前端滑动验证码实现

先注册领取腾讯滑动验证码登录 - 腾讯云  在控制台免费试用7天 根据官方文档验证码 Web 客户端接入-接入指引-文档中心-腾讯云引入接口 在html中引入

<script src="https://turing.captcha.qcloud.com/TCaptcha.js"></script>

创建一个js文件 

 // 定义回调函数
 function callback(res) {
    // 第一个参数传入回调结果，结果如下：
    // ret         Int       验证结果，0：验证成功。2：用户主动关闭验证码。
    // ticket      String    验证成功的票据，当且仅当 ret = 0 时 ticket 有值。
    // CaptchaAppId       String    验证码应用ID。
    // bizState    Any       自定义透传参数。
    // randstr     String    本次验证的随机串，后续票据校验时需传递该参数。
    console.log('callback:', res);




    // res（用户主动关闭验证码）= {ret: 2, ticket: null}
    // res（验证成功） = {ret: 0, ticket: "String", randstr: "String"}
    // res（请求验证码发生错误，验证码自动返回terror_前缀的容灾票据） = {ret: 0, ticket: "String", randstr: "String",  errorCode: Number, errorMessage: "String"}
    // 此处代码仅为验证结果的展示示例，真实业务接入，建议基于ticket和errorCode情况做不同的业务处理
    if (res.ret === 0) {
        // 复制结果至剪切板
        var str = '【randstr】->【' + res.randstr + '】      【ticket】->【' + res.ticket + '】';
        var ipt = document.createElement('input');
        ipt.value = str;
        document.body.appendChild(ipt);
        ipt.select();
        document.execCommand("Copy");
        document.body.removeChild(ipt);
        alert('1. 返回结果（randstr、ticket）已复制到剪切板，ctrl+v 查看。2. 打开浏览器控制台，查看完整返回结果。');
    }
}


// 定义验证码js加载错误处理函数
function loadErrorCallback() {
    var appid = '194610789';
    // 生成容灾票据或自行做其它处理
    var ticket = 'terror_1001_' + appid + '_' + Math.floor(new Date().getTime() / 1000);
    callback({
      ret: 0,
      randstr: '@'+ Math.random().toString(36).substr(2),
      ticket: ticket,
      errorCode: 1001,
      errorMessage: 'jsload_error'
    });
 }

主要代码模块 

// 点击登录

const handleSubmit = () => {

    lgLoading.value = true

    formRef.value

        .validate()

        .then(async () => {

            const appId = '194610789';

            if (window.TencentCaptcha) {

                var captcha = new TencentCaptcha(appId, function (res) {

                    // 验证码验证成功的回调函数

                    if (res.ret === 0) { // ret 为 0 表示验证成功

                        // 这里添加验证成功后的代码，例如提交表单

                        loginWithCaptcha(res.ticket, res.randstr); // 使用验证码的票据和随机字符串来登录

                    }

                });

                // 显示验证码弹窗

                captcha.show();



            }

            lgLoading.value = false

        })

        .catch(() => {

            lgLoading.value = false

        })

}



const loginWithCaptcha = async (ticket, randstr) => {

    // 向后端发送请求进行登录

    // 确保后端验证了ticket和randstr的有效性

    try {

        await acquireSubmit();

        await loginPush();

    } catch (error) {

        console.log(error);;

    }finally{

        lgLoading.value = false;

    }

};

196684808