滑块验证是否人机

最新推荐文章于 2024-09-07 14:37:16 发布

凉风听雪

最新推荐文章于 2024-09-07 14:37:16 发布

阅读量432

点赞数 1

分类专栏：前端开发文章标签： javascript 前端 css ali 滑块验证验证码

本文链接：https://blog.csdn.net/p_s_p/article/details/141950867

版权

前端开发专栏收录该内容

28 篇文章 0 订阅

订阅专栏

效果图：

原理：

使用阿里第三方验证插件js生成滑块，默认获取验证码按钮为不可点击属性
    .getyzm{
        pointer-events: none;
        cursor: default;
    }
再添置一个可点击属性的类
    .getyzmok{
        color: #000000 !important;
        pointer-events: visible;
    }
当滑块滑动到右侧时触发success回调，在回调函数里给验证码按钮添加可点击属性类
const getyzmbtn = document.querySelector('.getyzm');
                getyzmbtn.classList.add('getyzmok');

文档：

如何集成滑动验证的前端页面代码_验证码(Captcha)-阿里云帮助中心

源码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script src="https://g.alicdn.com/AWSC/AWSC/awsc.js"></script>
</head>
<body>

<div id="nc"></div>
                        <div class="row" style="text-align: center;margin-bottom: 10px;display: flex;align-items: center;justify-content: center;">
                            <input type="text" id="yzm" name="smsCode" required class="customizeInquiry" placeholder="短信验证码" style="width: 40%;height: 45px;border-radius: 20px;border-top-right-radius: 0px;border-bottom-right-radius: 0px;background-color: #f9f9f9;text-indent: 2em;border: none;">
                            <div class="getyzm" style="width: 20%;height: 45px;background-color: #f9f9f9;border-top-right-radius: 20px;border-bottom-right-radius: 20px;line-height: 45px;border-left: 2px solid #ffffff;transition: all 0.3s;cursor: pointer;margin-left: 1px;font-size: 16px;color:#858A96">获取验证码</div>
                        </div>

<script>
    // 实例化nc
    AWSC.use("nc", function (state, module) {
        // 初始化
        window.nc = module.init({
            // 应用类型标识。它和使用场景标识（scene字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的appkey字段值，请务必正确填写。
            appkey: "CF_APP_1",
            //使用场景标识。它和应用类型标识（appkey字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的scene值，请务必正确填写。
            scene: "register",
            // 声明滑动验证需要渲染的目标ID。
            renderTo: "nc",
            //前端滑动验证通过时会触发该回调参数。您可以在该回调参数中将会话ID（sessionId）、签名串（sig）、请求唯一标识（token）字段记录下来，随业务请求一同发送至您的服务端调用验签。
            success: function (data) {
                window.console && console.log(data.sessionId)
                window.console && console.log(data.sig)
                window.console && console.log(data.token)
             // 给验证码按钮添加可点击属性
                const getyzmbtn = document.querySelector('.getyzm');
                getyzmbtn.classList.add('getyzmok');
            },
            // 滑动验证失败时触发该回调参数。
            fail: function (failCode) {
                 window.console && console.log(failCode)
            },
            // 验证码加载出现异常时触发该回调参数。
            error: function (errorCode) {
                 window.console && console.log(errorCode)
            }
        });
    })
</script>
</body>
</html>

PS:也可以在实例化nc前声明变量去接收滑块success回调生成的参数，用于手机验证码接口的传参。

let phoneNumberV = '';
        let sessionIdV = '';
        let sigV = '';
        let tokenV = '';

        let ncInstance;
        // 实例化nc
        AWSC.use("nc", function (state, module) {
        // 初始化
        ncInstance = module.init({
            // 应用类型标识。它和使用场景标识（scene字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的appkey字段值，请务必正确填写。
            appkey: "your_key",
            //使用场景标识。它和应用类型标识（appkey字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的scene值，请务必正确填写。
            scene: "your_scene",
            // 声明滑动验证需要渲染的目标ID。
            renderTo: "nc",
            //前端滑动验证通过时会触发该回调参数。您可以在该回调参数中将会话ID（sessionId）、签名串（sig）、请求唯一标识（token）字段记录下来，随业务请求一同发送至您的服务端调用验签。
            success: function (data) {
                phoneNumberV = document.getElementById('phone').value; // 获取手机号
                    sessionIdV = data.sessionId;
                    tokenV = data.token;
                    sigV = data.sig;

                const getyzmbtn = document.querySelector('.getyzm');
                getyzmbtn.classList.add('getyzmok');
            },
            // 滑动验证失败时触发该回调参数。
            fail: function (failCode) {
                 window.console && console.log(failCode)
            },
            // 验证码加载出现异常时触发该回调参数。
            error: function (errorCode) {
                 window.console && console.log(errorCode)
            }
        });
    });

    document.addEventListener('DOMContentLoaded', function() {
        // 点击获取验证码按钮
        document.querySelector('.getyzm').addEventListener('click', function() {
                           // 输出存储的参数变量
                // console.log('Stored Phone:', phoneNumberV);
                // console.log('Stored Session ID:', sessionIdV);
                // console.log('Stored Token:', tokenV);

                // 发送验证码后移除按钮的可点击属性避免连续点击
                const getyzmbtn = document.querySelector('.getyzm');
                getyzmbtn.classList.remove('getyzmok');

                if (ncInstance) {
                    ncInstance.reset(); // 触发滑块验证重置
                }

                // console.log('Stored Phone:', phoneNumberV);
                // console.log('Stored Session ID:', sessionIdV);
                // console.log('Stored Token:', tokenV);
                
                        // 创建 FormData 对象
                const formData = new FormData();
                formData.append('mobile', phoneNumberV);
                formData.append('type', 1);
                formData.append('sessionId', sessionIdV);
                formData.append('sig', sigV);
                formData.append('token', tokenV);
                // 发送 POST 请求到指定接口
                fetch('手机验证码接口地址', { 
                    method: 'POST',
                    // headers: {
                    //     'Content-Type': 'application/json'
                    // },
                    body:formData
                })
                .then(response => response.json())
                .then(data => {
                    console.log('Response:', data);
                    alert(data.message)
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert(error.message)
                });
        });
    })