VUE接入腾讯云验证码
腾讯云验证码-图形验证目的:该模型能够准确识别可信、可疑和恶意用户,并提供不同的验证体验,令有效验证通过更轻松,机器作恶更困难。防止软件外围发短信被恶意攻击。前提:接入验证码前,需要先在验证码控制台中注册 AppID 和 AppSecret。提示:可以免费领取20000次验证,足够平时的测试使用准备工作完成之后就可以进入下面的引入阶段了。第一步:全局引入js<script src="http
·
目的:该模型能够准确识别可信、可疑和恶意用户,并提供不同的验证体验,令有效验证通过更轻松,机器作恶更困难。防止软件外围发短信被恶意攻击。
前提:接入验证码前,需要先在 验证码控制台 中注册 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)
});
})
}
基本上获取验证码到验证码校验就完成了整个流程。效果图如下
更多推荐
已为社区贡献2条内容
所有评论(0)