极乐门资源网 Design By www.ioogu.com
在项目中使用滑动验证,可以调用腾讯云的组件和接口(付费项目)
导言
首先看看官方的步骤教学:
https://cloud.tencent.com/document/product/1110/36839
其中,前端涉及到的是“步骤3:客户端接入”,里面介绍了两种接入方法:“快速接入”和“定制接入”。
项目是原生HTML 或者 jQuery 开发,那么可以使用“快速接入”。
项目使用 vue、react 等框架开发,则需要使用“定制接入”。
步骤
1、新建项目对应 appid
在 验证码控制台 中注册 AppID 和 AppSecret。
其中的“所在网址”可以填本地开发IP地址,例如 “192.168.20.28”
注意,自己测试的话,需要先领取免费包。即在 APPID 列表里新建验证成功后,选择列表 table 上面的 “领取免费包”,领取2万次调用次数
2、在 index.html 中引入验证 js 文件
<script src="/UploadFiles/2021-04-02/TCaptcha.js">3、在按钮中绑定点击事件,实例化 TencentCaptcha ,制定回调函数
// vue 例子 // 点击按钮,出现拼图弹窗 <el @click="varify" > 验证</el - button > methods: { varify() { let appid = 'xxxxx'; // 腾讯云控制台中对应这个项目的 appid //生成一个滑块验证码对象 let captcha = new TencentCaptcha(appid, function (res) { // 用户滑动结束或者关闭弹窗,腾讯返回的内容 console.log(res) if (res.ret === 0) { //成功,传递数据给后台进行验证 axios.post('接口路径', { Ticket: res.ticket, CaptchaAppId: res.appid, Randstr: res.randstr, // 其他参数 }) .then( // 后台验证通过,返回用户信息 // 前端接收并登陆系统 ) .catch( // 验证失败 ) } else { // 提示用户完成验证 } }); // 滑块显示 captcha.show(); } }其中,腾讯返回的数据格式是这样的:
appid: "xxxx" bizState: "xxx" randstr: "@0N2" ret: 0 // 2 代表用户关闭验证弹窗 ticket: "xxxxx"4、在线调试
后台未接入腾讯云验证接口,也可以通过腾讯云提供的在线调试工具,测试验证结果
步骤:
- 前端滑动验证,打印返回结果
- 在工具网页点选 “只看必填参数”,将所需内容填好,Ticket 啥的就填返回的结果
- 选择右侧 在线调用 -> 发送请求
极乐门资源网 Design By www.ioogu.com
极乐门资源网
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
极乐门资源网 Design By www.ioogu.com
暂无vue如何在项目中调用腾讯云的滑动验证码的评论...
更新日志
2024年12月23日
2024年12月23日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]