java集成阿里云滑块验证码

简介

滑块验证码主要的作用是方便用户进行快捷验证操作，但是同时要合理的辨别到底是机器操作还是人工操作，这一点显得难度比较大，是属于人机识别的智能开发范畴，所以相对于之前的传统4位或者6位图片验证码来说，开发起来显得更加困难，所以一般来说都会接入一些第三方的Api来辅助开发人员进行滑块识别和验证。主要是根据用户在页面内的一些鼠标点击，停留，滑动距离等信息，综合来断定这个滑动操作是否是人为发起的。本文将结合阿里云的滑块验证技术来实现网站安全登录操作。

验证码样例

开发准备

进入阿里云的云盾·人机验证，配置管理里面添加对应的服务

可以在系统集成板块找到你想要的代码

根据语言需求下载对应的sdk

入门demo

废话不多说，开整

html文件

//引入js文件
<script type="text/javascript" charset="utf-8" src="//g.alicdn.com/sd/ncpc/nc.js?t=2015052012"></script>

//页面添加这个div
<!--No-Captcha渲染的位置，其中class中必须包含nc-container-->
											<div id="your-dom-id" class="nc-container"></div>
											<input type="hidden" id="sessionId" name="sessionId"/>

//js代码
<script type="text/javascript">

    //xxxxxxxxxxxxx token 我填的是阿里云控制台的appkey
    var nc_token = ["appkey", (new Date()).getTime(), Math.random()].join(':');
    var NC_Opt =
        {
            renderTo: "#your-dom-id",
            appkey: "appkey",  //此处填阿里云控制台给你的appkey
            scene: "scene", //此处填阿里云控制台给你的scene
            token: nc_token,
            customWidth: 306,
            trans:{"key1":"code0"},
            elementID: ["usernameID"],
            is_Opt: 0,
            language: "cn",
            isEnabled: true,
            timeout: 3000,
            times:5,
            apimap: {
                // 'analyze': '//a.com/nocaptcha/analyze.jsonp',
                // 'get_captcha': '//b.com/get_captcha/ver3',
                // 'get_captcha': '//pin3.aliyun.com/get_captcha/ver3'
                // 'get_img': '//c.com/get_img',
                // 'checkcode': '//d.com/captcha/checkcode.jsonp',
                // 'umid_Url': '//e.com/security/umscript/3.2.1/um.js',
                // 'uab_Url': '//aeu.alicdn.com/js/uac/909.js',
                // 'umid_serUrl': 'https://g.com/service/um.json'
            },
            callback: function (data) {
                var sessionId=data.csessionid+","+data.sig+","+data.token+","+"nc_login";
                $("#sessionId").val(sessionId);
            }
        }
    var nc = new noCaptcha(NC_Opt)
    nc.upLang('cn', {
        _startTEXT: "请按住滑块，拖动到最右边",
        _yesTEXT: "验证通过",
        _error300: "哎呀，出错了，单击<a href=\"javascript:__nc.reset()\">刷新</a>再来一次",
        _errorNetwork: "网络不给力，请<a href=\"javascript:__nc.reset()\">单击刷新</a>",
    })
</script>

java后端代码

登录代码中加上验证码验证逻辑

    /**
     * 用户登录验证
     */
    @ResponseBody
    @RequestMapping(value = "/login", method = RequestMethod.POST)
    public ResponseResult login(@RequestParam("username") String username,
                                @RequestParam("password") String password,
                                @RequestParam("sessionId") String sessionId,
                                ModelMap model, HttpServletRequest request) throws IOException {

        if (StringUtils.isEmpty(sessionId)) {
            return new ResponseResult(205, "请滑动图形码");
        }

        if (!AfsCheck.check(sessionId, request)) {
            return new ResponseResult(205, "图形码验证失败");
        }

    }

AfsCheck.java

package com.ph.bscCloud.common.utils;


import com.aliyuncs.DefaultAcsClient;
import com.aliyuncs.IAcsClient;
import com.aliyuncs.afs.model.v20180112.AuthenticateSigRequest;
import com.aliyuncs.afs.model.v20180112.AuthenticateSigResponse;
import com.aliyuncs.profile.DefaultProfile;
import com.aliyuncs.profile.IClientProfile;
import org.apache.commons.lang3.StringUtils;

import javax.servlet.http.HttpServletRequest;

public class AfsCheck {

     //ACCESS_KEY、ACCESS_SECRET请替换成您的阿里云accesskey和secret 

    private static String ACCESS_KEY = "ACCESS_KEY";
    private static String ACCESS_SECRET = "ACCESS_SECRET";

    /**
     * sessionId
     *
     * @param sessionId 为h5从风控服务器获取的返回值(字符串)，具体格式：sessionId<-->sig<-->token<-->scene
     * @param req
     * @return
     */
    public static boolean check(String sessionId, HttpServletRequest req) {
        try {
            if (StringUtils.isEmpty(sessionId)) {
                return false;
            }
            String[] afs = sessionId.split(",");

            IClientProfile profile = DefaultProfile.getProfile("cn-beijing", ACCESS_KEY, ACCESS_SECRET);
            IAcsClient client = new DefaultAcsClient(profile);
            DefaultProfile.addEndpoint("cn-beijing", "cn-beijing", "afs", "afs.aliyuncs.com");

            AuthenticateSigRequest request = new AuthenticateSigRequest();
            request.setSessionId(afs[0]);// 必填参数，从前端获取，不可更改
            request.setSig(afs[1]);// 必填参数，从前端获取，不可更改
            request.setToken(afs[2]);// 必填参数，从前端获取，不可更改
            request.setScene(afs[3]);// 必填参数，从前端获取，不可更改
            request.setAppKey("appkey");// 必填参数，此处填阿里云控制台给你的appkey
            request.setRemoteIp(GetIpUtil.getIp(req));// 必填参数，后端填写

            AuthenticateSigResponse response = client.getAcsResponse(request);
            if (response.getCode() == 100) {
                return true;
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
        return false;
    }

}

浏览器输出结果，下面结果表示验证成功，现在一般来说就可以创建一个session标识验证成功，前台点击登录就可以放行了。

ok,阿里云滑块验证集成到此结束，溜了…