记录：阿里云滑动验证

最新推荐文章于 2024-05-06 01:26:43 发布

少年闰土HZC

最新推荐文章于 2024-05-06 01:26:43 发布

阅读量4.9k

点赞数

本文链接：https://blog.csdn.net/dk0008/article/details/103869599

版权

导入依赖

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

前端代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>主页</title>
</head>

<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" charset="utf-8" src="//g.alicdn.com/sd/ncpc/nc.js?t=2015052012"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />

<body>

<a style="display:block;width:200px;height:42px;line-height:42px;font-size:18px;text-align:center;margin:40px auto;font-weight:800;" href="#" class="tbox">登录</a>

<div class="modal fade" id="myModal">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
					  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
			</div>
			<div class="modal-body" style="width:500px">
					<h4 class="modal-title" align="center">登录框</h4>
					<br/>
					<form class="form-horizontal" role="form" id="form1">
						<div class="form-group" width="300px">
							<label for="name" class="col-sm-offset-2 col-sm-2 control-label">账号</label>
							<div class="col-sm-5" width="300px">
								<input  type="text" class="form-control" id="name" placeholder="请输您的入账号">
							</div>
						</div>
						<div class="form-group" width="300px">
							<label for="password" class="col-sm-offset-2 col-sm-2 control-label">密码</label>
							<div class="col-sm-5" >
								<input  type="password" class="form-control" id="password" placeholder="请输入您的密码">
							</div>
						</div>
						<div class="form-group">
							<label for="password" class="col-sm-offset-2 col-sm-2 control-label">验证</label>
							<div  id="your-dom-id" class=" col-sm-5 nc-container"></div>
						</div>
						<div class="form-group">
							<div class="col-sm-offset-4 col-sm-5">
								<button id="submitBtn" type="button" class="btn btn-default btn-block btn-primary">登录</button>
							</div>
						</div>
						</form>
			</div>
			<div class="modal-footer">
			</div>
		</div>
		<!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script type="text/javascript">
$(function(){

	$(".tbox").click(function(){
		$('#myModal').modal('show') //显示模态框
	})


});
</script>

<script type="text/javascript">
    var result = false;
    var nc_token = ["FFFF0N00000000008A76", (new Date()).getTime(), Math.random()].join(':');
    var NC_Opt =
        {
            renderTo: "#your-dom-id",
            appkey: "FFFF0N00000000008A76",
            scene: "nc_login",
            token: nc_token,
            customWidth: 300,
            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) {
                window.console && console.log(nc_token)
                window.console && console.log(data.csessionid)
                window.console && console.log(data.sig)
                $.ajax({
                    url: "/user/getLogin?token=" + nc_token,
                    type: "post",
                    dataType: "text",
                    data: data,
                    success:function (json) {
                        result = true;
                        if (json == "ok") {
                            result = true;
                        }
                    },error:function(result) {
                        alert("error");

                    }
                });
            }
        }
    $('#myModal').on('hide.bs.modal', function () {
        // 执行一些动作...
        //$("#form1")[0].reset();
        document.getElementById("form1").reset();
        // $("#your-dom-id").__nc.reset();
        var ncs = new noCaptcha(NC_Opt);
    })
    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>",
    })
	$("#submitBtn").click(function(){
	    var username=$("#name").val();
	    var password =$("#password").val();
	    if(result){
			if (false){
			    alert("账号密码不可为空")
			    return ;
			} else {
                $.ajax({
                    url: "/user/index?username=" + username+"&password="+password,
                    type: "post",
                    dataType: "text",
                    success:function (json) {
                        alert(json)
                        $("#form1")[0].reset();
                    },error:function(result) {
                        alert("error");

                    }
                });
			}
		}else {
	        alert("滑动验证验证")
		}
	})
</script>
</body>
</html>

后端代码

@RequestMapping("/getLogin")
    public String getLogin(HttpServletRequest req) throws ClientException {
        AuthenticateSigRequest request = new AuthenticateSigRequest();
        DefaultProfile profile = DefaultProfile.getProfile("cn-hangzhou", "AKID", "AKS");
        IAcsClient client = new DefaultAcsClient(profile);
        DefaultProfile.addEndpoint("cn-hangzhou", "cn-hangzhou", "afs", "afs.aliyuncs.com");
        String sessionId=req.getParameter("csessionid");
        String token=req.getParameter("token");
        request.setSessionId(sessionId);// 必填参数，从前端获取，不可更改，android和ios只传这个参数即可
        request.setSig(req.getParameter("sig"));// 必填参数，从前端获取，不可更改
        request.setToken(token);// 必填参数，从前端获取，不可更改
        request.setScene("nc_login");// 必填参数，从前端获取，不可更改
        request.setAppKey("FFFF0N00000000008A76");// 必填参数，后端填写
        request.setRemoteIp("192.168.1.1");// 必填参数，后端填写
        System.out.println(sessionId);
        System.out.println(token);
        String result="ok";
        try {
            AuthenticateSigResponse response = client.getAcsResponse(request);
            if(response.getCode() == 100) {
                System.out.println("验签通过");
                result="ok";
            } else {
                System.out.println("验签失败");
                result="failed";
            }
            // TODO
        } catch (Exception e) {
            e.printStackTrace();
        }

        return result;
    }

少年闰土HZC

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
记录：阿里云滑动验证

导入依赖<dependency> <groupId>com.aliyun</groupId> <artifactId>aliyun-java-sdk-core</artifactId> <version>3.0.6</version> ...
复制链接

扫一扫