element-ui后台系统接入阿里云无痕验证

最新推荐文章于 2023-06-21 15:18:45 发布

大王๑

最新推荐文章于 2023-06-21 15:18:45 发布

阅读量497

点赞数

分类专栏：前端知识库文章标签： javascript 阿里云

本文链接：https://blog.csdn.net/FTEzreal/article/details/115763141

版权

前端知识库专栏收录该内容

21 篇文章 0 订阅

订阅专栏

阿里云无痕验证链接

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <script src="https://g.alicdn.com/AWSC/AWSC/awsc.js"></script>
</head>
<body>
<form id="login-form">
    <input id="account" type="text" placeholder="账号"/>
    <input id="password" type="password" placeholder="密码">
    <button type="button" id="register">注册</button>
</form>
<div id="nc"></div>

<input type="hidden" name="data" id="nvc_data">

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
    var nvc_data = document.getElementById('nvc_data')


    //todo  点击登录按钮后，先走以下逻辑，然后再走原来的登录逻辑
    var btn = document.getElementById("register");
    // 实例化nvc 对无痕验证进行初始化操作
    AWSC.use("nvc", function (state, module) {
        // 初始化 调用module.init进行初始化
        window.nvc = module.init({
            // 应用类型标识。它和使用场景标识（scene字段）一起决定了无痕验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的appkey字段值，请务必正确填写。
            appkey: "FFFF0N0000000000975B",
            //使用场景标识。它和应用类型标识（appkey字段）一起决定了无痕验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的scene值，请务必正确填写。
            scene: "nvc_other",
            // 二次验证获取人机信息串，跟随业务请求一起上传至业务服务器，由业务服务器进行验签。
            success: function (data) {
                console.log('二次验证成功');
                window.console && console.log(data)
            },
            // 前端二次验证失败时触发该回调参数
            fail: function (failCode) {
                window.console && console.log(failCode)
            },
            // 前端二次验证加载异常时触发该回调参数。
            error: function (errorCode) {
                window.console && console.log(errorCode)
            }
        });
        // 绑定事件
        btn.onclick = onclick;
    });

    // 发送业务请求：点击按钮时触发，主动获取人机信息串，并发送给业务服务端
    function onclick() {
        window.nvc.getNVCValAsync(function (nvcVal) {

            //进行ajax校验
            $.ajax({
                url: 'http://test.mt.api.aidianjia.com/api_admin/afs/code/verify',
                type: 'post',
                headers: {
                    Accept: 'application/json',
                },
                data: {
                    data: nvcVal
                },
                success: function (data) {
                    data.status = +data.BizCode; //用+ 转为了数字

                    console.log(data.status);
                    if (data.status === 100 || data.status === 200) {
                        // 无痕验证通过
                        console.log("register success!");

                        nvc_data.value = nvcVal;

                        //todo 这里才开始走原来登录的逻辑，进行表单提交

                    } else if (data.status === 800 || data.status === 900) {
                        // 无痕验证失败，直接拦截
                        // 二次验证失败（eg：密码错误已达三次），提示用户刷新或稍后重试
                        alert("register failed!")
                    } else if (data.status === 400) {
                        // 无痕验证失败，触发二次验证
                        // 二次验证码（滑动验证码）配置项设置，详情请见滑动验证集成方式文档
                        // 二次验证的appkey，scene，test值及success，fail，error的回调由nvc初始化时决定，请不要在二次验证时传入
                        var ncoption = {
                            // 声明滑动验证需要渲染的目标ID。
                            renderTo: "nc", //todo 这个是出现滑动验证的框框
                        }
                        // 唤醒二次验证（滑动验证码）
                        window.nvc.getNC(ncoption);
                    }
                },
                error: function (err) {

                }
            })

        });
    }


</script>
</body>
</html>