SpringBoot实现滑块验证码验证登陆校验功能详解

下面我将为你详细讲解“SpringBoot实现滑块验证码验证登陆校验功能”的完整攻略。

1. 概述

在本文中，我们将介绍使用SpringBoot来实现滑块验证码验证登陆校验功能的完整攻略。其中，我们使用了阿里云的滑块验证码服务和Spring Security框架来完成。

本文将分为以下几个部分：

阿里云滑块验证码服务介绍
SpringBoot集成阿里云滑块验证码服务
Spring Security框架集成阿里云滑块验证码服务

2. 阿里云滑块验证码服务介绍

阿里云提供了一种非常优秀的滑块验证码服务。该服务主要用于防止机器人恶意攻击。当用户登录时，需要完成滑块验证码的验证，即滑动图块来让系统验证用户的真实性。如果验证通过，就可以正常登录系统。

阿里云的滑块验证码服务可以通过以下方式接入：

通过HTTP方式调用接口
在前端页面引入JavaScript SDK

在本文中，我们将使用第一种方式来接入阿里云的滑块验证码服务。

3. SpringBoot集成阿里云滑块验证码服务

接下来，我们将介绍在SpringBoot中集成阿里云滑块验证码服务的步骤：

3.1 引入依赖

首先，在pom.xml文件中添加以下依赖：

<dependency>
    <groupId>com.aliyun</groupId>
    <artifactId>aliyun-java-sdk-core</artifactId>
    <version>4.0.3</version>
</dependency>

3.2 配置AK和SK

在SpringBoot的application.properties文件中添加以下配置：

# 阿里云AccessKey ID
spring.cloud.alicloud.access-key=your_access_key
# 阿里云Access Key Secret
spring.cloud.alicloud.secret-key=your_secret_key

3.3 调用接口完成滑块验证码服务

通过调用阿里云的滑块验证码服务接口，我们可以获取到滑块验证码的验证结果。具体步骤如下：

调用阿里云滑块验证码服务的init接口，获取滑块验证码的Ticket和Sig（签名）。

DefaultProfile profile = DefaultProfile.getProfile("cn-hangzhou", "your_access_key", "your_secret_key");
IAcsClient client = new DefaultAcsClient(profile);
try {
     InitNvcRequest request = new InitNvcRequest();
     request.setTicket("");
     request.setHeight(320L);
     request.setScreenWidth(300L);
     request.setSig("");
     request.setScene("nc_login");
     request.setNet("ow");
     request.setSessionId(UUID.randomUUID().toString());
     request.setIp("127.0.0.1");
     InitNvcResponse response = client.getAcsResponse(request);
     String challenge = response.getData().getNvcCode();//获取验证码的challenge
     String nvcSessionId = response.getData().getNvcSessionId();//获取该验证码唯一标志
} catch (ClientException e) {
     throw new RuntimeException("generate nvc security error", e);
}

将Ticket和Sig（签名）返回给前端页面。

{
    "ticket": "LTafPqzghqo...",
    "sig": "ebZkb9i1e0pvFIBYT..."
}

在前端页面上展示滑块验证码，让用户滑动图块验证身份。
前端页面将滑块验证码验证的结果返回给SpringBoot后台，SpringBoot后台将调用阿里云的滑块验证码服务的verify接口来对用户进行验证。

DefaultProfile profile = DefaultProfile.getProfile("cn-hangzhou", "your_access_key", "your_secret_key");
IAcsClient client = new DefaultAcsClient(profile);
try {
     VerifyNvcRequest request = new VerifyNvcRequest();
     request.setTicket(ticket);//前端传的ticket
     request.setSig(sig); //前端传的sig
     request.setSessionId(nvcSessionId);//前端传的challenge
     request.setIp(request.getRemoteIp());
     request.setScene("nc_login");
     VerifyNvcResponse response = client.getAcsResponse(request);
     if("PASS".equalsIgnoreCase(response.getCode())){
          return true;
     }else{
          return false;
     }
} catch (ClientException e) {
     throw new RuntimeException("verify nvc security error", e);
}

以上就是SpringBoot集成阿里云滑块验证码服务的全部步骤。

4. Spring Security框架集成阿里云滑块验证码服务

接下来，我们将介绍如何在Spring Security框架中集成阿里云滑块验证码服务。

4.1 配置登录页面

首先，我们需要在Spring Security的配置文件中配置登录页面。

@Override
protected void configure(HttpSecurity http) throws Exception {
    http
        .authorizeRequests()
            .antMatchers("/login**").permitAll()
            .anyRequest().authenticated()
            .and()
        .formLogin()
            .loginPage("/login")
            .loginProcessingUrl("/login")
            .defaultSuccessUrl("/")
            .failureUrl("/login?error")
            .and()
        .csrf().disable();
}

登录页面的HTML文件如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="csrf-token" content="{{ csrf_token }}">
    <!-- Bootstrap core CSS -->
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="/static/css/signin.css" rel="stylesheet">
    <script src="https://g.alicdn.com/sd/nch5/index.js?t=202007302102030000/version/nvc.9.6.11.js"></script>
</head>
<body>
<div class="container">

    <form class="form-signin" action="/login" method="POST" id="login-form">
        <h2 class="form-signin-heading">Please sign in</h2>
        <input type="text" class="form-control" placeholder="Email address" name="email" required autofocus>
        <input type="password" class="form-control" placeholder="Password" name="password" required>
        <div id="nc-box-div"></div>
        <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
    </form>

</div> <!-- /container -->
<script type="text/javascript">
    NVC_Opt = {
        w:300,  // 控件宽度
        h:40, // 控件高度
        appkey:'FFFF00000000017A9545', // 应用程序标识
        scene:'register',  // 场景标识
        // 点击验证码的回调函数
        callback:function(data){
            if (data.csessionid) {
                document.getElementsByName("csessionid")[0].value = data.csessionid;
                document.getElementsByName("sig")[0].value = data.sig;
                document.getElementsByName("token")[0].value = data.token;
            }
        }
    };
    //载入验证码组件
    NVC_Client.init(document.getElementById("nc-box-div"),NVC_Opt);
</script>
</body>
</html>

4.2 配置AuthenticationProvider

接下来，我们需要在Spring Security的配置文件中配置AuthenticationProvider，以便对用户进行认证。

@Service
public class CustomAuthenticationProvider implements AuthenticationProvider {

    @Autowired
    private UserRepository userRepository;

    @Override
    public Authentication authenticate(Authentication authentication) throws AuthenticationException {
        String email = authentication.getName();
        String password = authentication.getCredentials().toString();
        User user = userRepository.findByEmail(email);
        if (user != null && user.getPassword().equals(password)) {
            return new UsernamePasswordAuthenticationToken(user, password, null);
        } else {
            throw new BadCredentialsException("Invalid email or password");
        }
    }

    @Override
    public boolean supports(Class<?> authentication) {
        return authentication.equals(UsernamePasswordAuthenticationToken.class);
    }

}

4.3 配置WebSecurityConfigurerAdapter

最后，我们需要在Spring Security的配置文件中配置WebSecurityConfigurerAdapter，把我们的AuthenticationProvider加入进来。

@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    @Autowired
    private CustomAuthenticationProvider authenticationProvider;

    @Override
    protected void configure(AuthenticationManagerBuilder auth) throws Exception {
        auth.authenticationProvider(authenticationProvider);
    }

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
            .authorizeRequests()
                .antMatchers("/login**").permitAll()
                .anyRequest().authenticated()
                .and()
            .formLogin()
                .loginPage("/login")
                .loginProcessingUrl("/login")
                .defaultSuccessUrl("/")
                .failureUrl("/login?error")
                .and()
            .csrf().disable();
    }

}

以上就是Spring Security框架集成阿里云滑块验证码服务的全部步骤。

总结：

本文介绍了使用SpringBoot和Spring Security框架来实现滑块验证码验证登陆校验功能。其中，阿里云的滑块验证码服务为我们提供了非常好的支持，为我们的工作带来了很大的便利。我们可以通过以上详细的步骤来实现滑块验证码验证登陆校验功能。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：SpringBoot实现滑块验证码验证登陆校验功能详解 - Python技术站