VUE接入腾讯云验证码

腾讯云验证码-图形验证

目的：该模型能够准确识别可信、可疑和恶意用户，并提供不同的验证体验，令有效验证通过更轻松，机器作恶更困难。防止软件外围发短信被恶意攻击。

前提：接入验证码前，需要先在 验证码控制台 中注册 AppID 和 AppSecret。

提示：可以免费领取20000次验证，足够平时的测试使用

 

准备工作完成之后就可以进入下面的引入阶段了。

第一步：全局引入js

  <script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>

 第二步：生成滑块验证码对象

 let captchaId = '******'; //腾讯滑块验证码appid
            //生成一个滑块验证码对象
            const _this = this;//此处处理是因为调用滑块验证码校验方法失效
            var captcha = new TencentCaptcha(captchaId,
              function (res) {
                console.log(res)
                _this.handleLoginMe(res);//图形验证码校验
              });
            // 滑块显示
            captcha.show();

第三步：滑块验证码校验

校验地址腾讯提供：前往

    async phonecodePPTAction() {
        let ckParams = this.ctx.ckParams,
            reqBody = this.ctx.post(),
            PostData = utils.getBody(reqBody, ['USERLOGINNAME','TICKET','RANDSTR']);
        let result = null;
        const CaptchaClient = tencentcloud.captcha.v20190722.Client;
        const models = tencentcloud.captcha.v20190722.Models;

        const Credential = tencentcloud.common.Credential;
        const ClientProfile = tencentcloud.common.ClientProfile;
        const HttpProfile = tencentcloud.common.HttpProfile;

        let cred = new Credential("【SecretId】", "【SecretKey】");
        let httpProfile = new HttpProfile();
        httpProfile.endpoint = "captcha.tencentcloudapi.com";
        let clientProfile = new ClientProfile();
        clientProfile.httpProfile = httpProfile;
        let client = new CaptchaClient(cred, "ap-beijing", clientProfile);

        let req = new models.DescribeCaptchaResultRequest();

        let params = '{\"CaptchaType\":9,\"Ticket\":\"'+PostData.TICKET+'\",\"UserIp\":\"127.0.0.1\",\"Randstr\":\"'+PostData.RANDSTR+'\",\"CaptchaAppId\":2067362599【】,\"AppSecretKey\":\"【】\"}'
        req.from_json_string(params);
        try {
            const result = await this.reqTCaptcha(client, req)
            if(result.CaptchaCode=='1'){
                return this.json({Result: 'Success', resultMsg: '图形验证码校验成功'})
            }else {
                return this.json({Result: 'Fail', resultMsg: '图形验证码校验失败'})
            }
        } catch (e) {
            this.status = 500;
            return this.fail(500, e.message || '内部服务错误')
        }
    }
    reqTCaptcha(client, req) {
        return new Promise((resolve, reject) => {
            client.DescribeCaptchaResult(req, function(errMsg, response) {
                if (errMsg) {
                    reject(errMsg)
                }
                resolve(response)
            });
        })
    }

 基本上获取验证码到验证码校验就完成了整个流程。效果图如下