使用阿里云的滑动验证码完成登陆注册

关于滑动验证码的作用这里就不说了，应该都知道，下面就开始叙述一下怎样使用阿里云的滑动验证码。
这是阿里云滑动验证码的样式

（如果觉得不好看。还可以自己自定义样式）

第一步 登陆阿里云账号

登陆阿里云账号，进入控制台首页，在这里

第二步 新增配置

新增配置

按照步骤填写对应的值，点击下一步，就会看到有文档指引，一段前端代码，还有对应语言版本的SDK，以及代码示例，这里下载java版本的SDK，解压会得到两个jar包，对应的maven依赖是这个：

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

<dependency>
  <groupId>com.aliyun</groupId>
  <artifactId>aliyun-java-sdk-afs</artifactId>
  <version>1.0.0</version>
</dependency>

第三步 复制代码

复制第二步说的前端代码与对应语言的代码示例到项目中：
可以看到java代码是一个类TestAfsCheck ，中有一个变量client和两个方法setup, test，由标注的注解可以知道setup先执行用于实例化client，在test方法中使用了之前的client变量，test方法后执行用于得到验证结果。

第四步修改代码

需要修改的第一个位置：

那么在哪里获取这两个东西呢？
首先鼠标移到控制台右上角你的头像处

便可以创建你的AccesKey（注意不要泄露你的AccessKey），然后复制你的AccessKey ID与Access Key Secret到代码中即可。

需要修改的第二个位置

观察test方法有这样一个地方：
其中有4个参数需要从前端获取，那么怎么获取呢
观察前端的js代码可以知道其中的3个参数-sessionId,sig以及token

最后那个scene其实是js代码里面对象NC_Opt的一个属性

js代码中的callback回调函数是当滑动验证码验证通过时会触发的，为了将这四个属性传递给后端，就在前端添加一个form表单，里面是对应四个属性的隐藏域

<form id="afsMsgForm">
    <input type="hidden" id="sessionId" name="sessionId"/>
    <input type="hidden" id="sig" name="sig"/>
    <input type="hidden" id="token" name="token"/>
    <input type="hidden" id="scene" name="scene"/>
</form>

然后在callback回调函数中向表单中四个属性赋值，并提交表单 - 使用了jquery

callback: function (data) {    //验证通过时会触发此回调
    $("#sessionId").val(data.csessionid);
    $("#token").val(nc_token);
    $("#sig").val(data.sig);
    $("#scene").val("nc_login");
    submit();
}

function submit() {
    $.ajax({
        type:'post',
        dataType:"text",
        url:'/afs',
        data:$("#afsMsgForm").serialize(),
        success:function (data) {
            alert(data);
        }
    });
}

创建一个实体类用于接收参数 - 这里用了lombok的Data注解，没有lombok的话就好好写get set

@Data
public class AsfModel {
    private String sessionId;
    private String sig;
    private String token;
    private String scene;
}

需要修改的第三个位置

最后一个地方了，第一个参数appKey，在js的NC_Opt对象中，属性appkey，复制过来就行；第二个参数remoteIp需要外部传入参数HttpServletRequest req 然后：填入req.getRemoteAddr()
这部分的完整代码为：

我修改了test的返回类型为boolean，让其“验签通过”返回true，“验签失败”返回fasle，并将TestAfsCheck类交予Spring管理。
控制器中代码如下：

@Autowired
private TestAfsCheck testAfsCheck;

@RequestMapping(value = "/afs",produces = {"text/html;charset=utf-8"})
@ResponseBody
public String afs(AsfModel asfModel, HttpServletRequest req) throws Exception {
    testAfsCheck.setUp();
    boolean isSuccess = testAfsCheck.test(asfModel, req);
    if(isSuccess){
        return "验证成功";
    }
    return "验证失败";
}

测试：

如果验证失败就去查看报错，如果没有报错就在test方法中使用response.getCode();得到错误码或者使用response.getMsg();得到错误信息并在常见错误码中查看相关错误并修改。。。