当前位置: 首页 > news >正文

微信小程序接入腾讯云天御验证码

腾讯云新一代行为验证码(Captcha),基于十道安全防护策略,为网页、APP、小程序开发者打造立体、全面的人机验证。在保护注册登录、活动秒杀、点赞发帖、数据保护等各大场景下业务安全的同时,提供更精细化的用户体验。
在这里插入图片描述

步骤一:获取 CaptchaAppId 、AppSecretKey

根据 腾讯云官方文档,在 验证码控制台 完成相关配置,得到 CaptchaAppId 以及 AppSecretKey

客户端接入前,需完成新建验证,并在验证列表获取所需的 CaptchaAppId 以及 AppSecretKey。步骤如下:

  1. 登录 验证码控制台,左侧导航栏选择图形验证 > 验证管理,进入验证管理页面。
  2. 单击新建验证,根据业务场景需求,设置验证名称、客户端类型、验证方式等参数。
  3. 单击确定,完成新建验证,即可在验证列表中查看验证码 CaptchaAppId 及 AppSecretKey。

步骤二:微信小程序接入插件

添加插件:

登录 小程序后台 ,选择 设置 > 第三方设置 > 添加插件,搜索 “天御验证码” 并添加

在这里插入图片描述
集成插件:

1、原生集成:

在 app.json 中声明验证码小程序插件

{"plugins": {"t-captcha": {"version": "1.0.4", // 请选择小程序插件最新版本"provider": "wxb302e0fc8ab232b4"}}
}

在需要使用插件的页面中引入组件,页面 .json 文件里引入组件

{"usingComponents": {"t-captcha": "plugin://t-captcha/t-captcha"}
}

2、uni-app框架集成:

声明插件,打开 manifest.json > 切换到源码视图 > 在 mp-weixin 中声明验证码小程序插件

"mp-weixin": {..."plugins": {"t-captcha": {"version": "1.0.4", // 请选择小程序插件最新版本"provider": "wxb302e0fc8ab232b4"}}
}

引入组件,打开pages.json > 在需要使用插件的页面中引入组件

{"path": "pages/login/index","style": {"usingComponents": {"t-captcha": "plugin://t-captcha/t-captcha"}}
}

注意:验证码组件引入的路径,必须和在 app.json 或 manifest.json 中声明的名称一致。

比如,在 manifest.json 中声明的名称叫 captcha ,那么引入时的路径就是 plugin://captcha/t-captcha,才能正确引入。

步骤三:插件使用

以获取手机号验证码为例

<t-captcha id="captcha" app-id="第一步获取的CaptchaAppId "@ready="handlerReady"@close="handlerClose"@error="handlerError"@verify="handlerVerify" /><button @click="checkGetCode">{{ state.smsSendBtn ? state.time + 's' : '获取验证码' }}
</button>
// 获取手机号验证码校验
checkGetCode() {if (!this.mobile) {showToast('请输入手机号')return false}if (!/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(this.mobile.replace(/(^\s*)|(\s*$)/g, ''))) {showToast('请输入正确手机号码')return false}this.selectComponent('#captcha').show()
},
// 获取验证码
getCode(ticket) {this.state.smsSendBtn = truethis.state.interval = setInterval(() => {if (this.state.time-- <= 0) {this.state.time = 60this.state.smsSendBtn = falseclearInterval(this.state.interval)}}, 1000)getCode({ phone: this.mobile, ticket }).then(res => {showToast('短信发送成功')}).catch(err => {this.state.time = 60this.state.smsSendBtn = falseclearInterval(this.state.interval)})
},
// 滑块验证回调
handlerVerify(ev) {if (ev.detail.ret === 0) { // 验证成功this.getCode(ev.detail.ticket)} else {// 验证失败}
},
// 滑块验证准备就绪
handlerReady() {console.log('验证码准备就绪')
},
// 滑块验证弹框准备关闭
handlerClose(ev) {// 如果使用了 mpvue,ev.detail 需要换成 ev.mp.detail,ret为0是验证完成后自动关闭验证码弹窗,ret为2是用户主动点击了关闭按钮关闭验证码弹窗if (ev && ev.detail.ret && ev.detail.ret === 2) {console.log('点击了关闭按钮,验证码弹框准备关闭')} else {console.log('验证完成,验证码弹框准备关闭')}
},
// 验证码出错
handlerError(ev) {console.log(ev.detail.errMsg)
}

注意:

微信小程序端,核查验证码票据结果,不需要 randstr 字段,参考文档。

滑块验证成功后,前端需要将返回的票据(ticket )传给后端进行校验,小程序端返回参数只有 ticket 字段, 没有 randstr 字段。

相关文章:

微信小程序接入腾讯云天御验证码

腾讯云新一代行为验证码&#xff08;Captcha&#xff09;&#xff0c;基于十道安全防护策略&#xff0c;为网页、APP、小程序开发者打造立体、全面的人机验证。在保护注册登录、活动秒杀、点赞发帖、数据保护等各大场景下业务安全的同时&#xff0c;提供更精细化的用户体验。 …...

Docker build 命令详解

build 命令用于使用 Dockerfile 创建镜像。 语法&#xff1a; $ docker build [OPTIONS] PATH | URL | -OPTIONS 说明 # 可通过帮助命令查看 $ docker build --help--build-arg[]: 设置镜像创建时的变量--cpu-shares: 设置 cpu 使用权重--cpu-period: 限制 CPU、CFS 周期--cpu…...

基于Translators的多语言翻译解决方案

当Translators库,一个用Python为个人和学生提供免费、多样、愉快翻译的库。 文章目录 Translators支持的翻译服务安装与入门参数和功能支持的语言调试和运行环境API服务Translators Translators库是一个强大的Python库,旨在为个人和学生提供免费、多样、愉快的翻译体验。它支…...

Unity 性能优化五:渲染模块压力

CPU压力 Batching 在GPU渲染前&#xff0c;CPU会把数据按batch发送给GPU&#xff0c;每发送一次&#xff0c;都是一个drawcall&#xff0c;GPU在渲染每个batch的时候&#xff0c;会切换渲染状态&#xff0c;这里的渲染状态指的是&#xff1a;影响对象在屏幕上的外观的渲染属性…...

Redis数据库 | 事务、持久化

&#x1f497;wei_shuo的个人主页 &#x1f4ab;wei_shuo的学习社区 &#x1f310;Hello World &#xff01; Redis事务操作 Redis事务是一组命令的集合&#xff0c;这些命令会作为一个整体被执行&#xff0c;要么全部执行成功&#xff0c;要么全部执行失败&#xff1b;Redis事…...

浅析大数据时代下的视频技术发展趋势以及AI加持下视频场景应用

视频技术的发展可以追溯到19世纪初期的早期实验。到20世纪初期&#xff0c;电视技术的发明和普及促进了视频技术的进一步发展。 1&#xff09;数字化&#xff1a;数字化技术的发明和发展使得视频技术更加先进。数字电视信号具有更高的清晰度和更大的带宽&#xff0c;可以更快地…...

TensorRT学习笔记--基于YoloV8检测图片和视频

1--完整项目 完整项目地址&#xff1a;https://github.com/liujf69/TensorRT-Demo git clone https://github.com/liujf69/TensorRT-Demo.gitcd TRT_YoloV8 2--模型转换 cd yolov8python gen_wts.py 3--编译项目 mkdir buildcd build cmake .. # 需要更改 CMakeLists.txt…...

【C++】开源:matplotlib-cpp静态图表库配置与使用

&#x1f60f;★,:.☆(&#xffe3;▽&#xffe3;)/$:.★ &#x1f60f; 这篇文章主要介绍matplotlib-cpp图表库配置与使用。 无专精则不能成&#xff0c;无涉猎则不能通。——梁启超 欢迎来到我的博客&#xff0c;一起学习&#xff0c;共同进步。 喜欢的朋友可以关注一下&…...

香港IT软件开发服务公司Alpha Technology 申请纳斯达克IPO上市

来源&#xff1a;猛兽财经 作者&#xff1a;猛兽财经 猛兽财经获悉&#xff0c;总部位于中国香港的IT软件开发服务公司Alpha Technology 近期已向美国证券交易委员会&#xff08;SEC&#xff09;提交招股书&#xff0c;申请在纳斯达克IPO上市&#xff0c;股票代码为&#xff0…...

JavaScript:数组深拷贝

文章目录 1 数组深拷贝的意义2 数组深拷贝的常用方式2.1 使用 JSON 序列化和反序列化2.2 使用递归方法2.3 使用第三方库 1 数组深拷贝的意义 JavaScript中的数组深拷贝&#xff0c;指的是创建一个完全独立于原始数组的新数组&#xff0c;所有新数组的元素都是原始数组的副本。…...

干翻Dubbo系列第七篇:@EnableDubbo、@DubboService、@DubboReference注解的作用

文章目录 文章说明 一&#xff1a;EnableDubbo注解的作用 1&#xff1a;注解使用地点 2&#xff1a;注解作用 3&#xff1a;路径要求 4&#xff1a;指定路径 5&#xff1a;另外一种指定路径 二&#xff1a;DubboService注解的作用 1&#xff1a;注解作用 2&#xff1…...

clickhouse断电重启故障解决方案

业务场景 公司的一个日志系统用到了clickhouse。一线运维反映说有个生产环境因为异常断电造成服务器重启。在执行日志系统的启动脚本时&#xff0c;一直报clickhouse启动不起来&#xff0c;日志系统无法使用。 问题排查 通过阅读启动脚本代码&#xff0c;以及启动日志系统&a…...

Spring学习笔记之Bean的实例化方式

文章目录 通过构造方法实例化通过简单工厂模式实例化通过factory-bean实例化BeanFactory和FactoryBean的区别BeanFactoryFactoryBean 注入自定义Date Spring为Bean提供了多种实例化方式&#xff0c;通常包括4种方式。&#xff08;也就是说在Spring中为Bean对象的创建准备了很多…...

JVM-类加载器

1.前置知识 1.1CPU与内存交互图&#xff1a; 2.类加载器ClassLoader 在装载(Load)阶段&#xff0c;其中第(1)步:通过类的全限定名获取其定义的二进制字节流&#xff0c;需要借助类装 载器完成&#xff0c;顾名思义&#xff0c;就是用来装载Class文件的。 2.1什么是类加载器&a…...

ChatGPT在法律行业的市场潜力

​ChatGPT现在已经成为我们的文字生成辅助工具、搜索引擎助手&#xff0c;许多体验过它的朋友会发现对它越来越依赖&#xff0c;并将其逐渐融入到自己的日常工作、生活。但有一点值得注意&#xff1a;这种人工智能除了技术可行、经济价值可行还要与相关规范即人类普遍的价值观念…...

Python编程从入门到实践练习第三章:列表简介

目录 一、字符串1.1 在字符串中使用变量 二、列表2.1 遍历列表练习题代码 2.2 列表元素的插入和删除涉及方法练习题代码 2.3 组织列表涉及方法练习题代码 2.4 索引 参考书&#xff1a;Python从入门到实践&#xff08;第二版&#xff09; 一、字符串 1.1 在字符串中使用变量 f…...

【Spring Boot】请求参数传json数组,后端采用(pojo)新增案例(103)

请求参数传json数组&#xff0c;后端采用&#xff08;pojo&#xff09;接收的前提条件&#xff1a; 1.pom.xml文件加入坐标依赖&#xff1a;jackson-databind 2.Spring Boot 的启动类加注解&#xff1a;EnableWebMvc 3.Spring Boot 的Controller接受参数采用&#xff1a;Reque…...

Redis 持久化RDB和AOF

Redis 持久化之RDB和AOF Redis 有两种持久化方案&#xff0c;RDB &#xff08;Redis DataBase&#xff09;和 AOF &#xff08;Append Only File&#xff09;。如果你想快速了解和使用RDB和AOF&#xff0c;可以直接跳到文章底部看总结。本章节通过配置文件&#xff0c;触发快照…...

【ThinkPHP】PHP实现分页功能

查询列表数据&#xff0c;需要用到分页功能&#xff0c;下面是分页功能的代码&#xff1a; /*** Summary of userList* return \think\response\Json*/public function userList(){$page input("page")?:1;//当前页数$size input("size")?:10;//每页大…...

chrome 插件开发

参考&#xff1a; https://www.cnblogs.com/amboke/p/16718855.html 设计和实现一个 Chrome 插件提升登录效率_若川的技术博客_51CTO博客 最新版 V3 chrome 插件开发~ demo 坑 - 掘金 官方文档&#xff1a;https://developer.chrome.com/docs/extensions/...

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作&#xff0c;无需更改相机配置。但是&#xff0c;一…...

Spring Boot 实现流式响应(兼容 2.7.x)

在实际开发中&#xff0c;我们可能会遇到一些流式数据处理的场景&#xff0c;比如接收来自上游接口的 Server-Sent Events&#xff08;SSE&#xff09; 或 流式 JSON 内容&#xff0c;并将其原样中转给前端页面或客户端。这种情况下&#xff0c;传统的 RestTemplate 缓存机制会…...

边缘计算医疗风险自查APP开发方案

核心目标:在便携设备(智能手表/家用检测仪)部署轻量化疾病预测模型,实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...

【Linux】C语言执行shell指令

在C语言中执行Shell指令 在C语言中&#xff0c;有几种方法可以执行Shell指令&#xff1a; 1. 使用system()函数 这是最简单的方法&#xff0c;包含在stdlib.h头文件中&#xff1a; #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术,以解决单机资源不足的问题。分布式训练主要分为两种模式: 数据并行:将数据分片到不同设备,每个设备拥有完整的模型副本 模型并行:将模型分割到不同设备,每个设备处理部分模型计算 现代大模型训练通常结合…...

Redis的发布订阅模式与专业的 MQ(如 Kafka, RabbitMQ)相比,优缺点是什么?适用于哪些场景?

Redis 的发布订阅&#xff08;Pub/Sub&#xff09;模式与专业的 MQ&#xff08;Message Queue&#xff09;如 Kafka、RabbitMQ 进行比较&#xff0c;核心的权衡点在于&#xff1a;简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...

Spring是如何解决Bean的循环依赖:三级缓存机制

1、什么是 Bean 的循环依赖 在 Spring框架中,Bean 的循环依赖是指多个 Bean 之间‌互相持有对方引用‌,形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路,例如: 双向依赖:Bean A 依赖 Bean B,同时 Bean B 也依赖 Bean A(A↔B)。链条循环: Bean A → Bean…...

CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)

漏洞概览 漏洞名称&#xff1a;Apache Flink REST API 任意文件读取漏洞CVE编号&#xff1a;CVE-2020-17519CVSS评分&#xff1a;7.5影响版本&#xff1a;Apache Flink 1.11.0、1.11.1、1.11.2修复版本&#xff1a;≥ 1.11.3 或 ≥ 1.12.0漏洞类型&#xff1a;路径遍历&#x…...

逻辑回归暴力训练预测金融欺诈

简述 「使用逻辑回归暴力预测金融欺诈&#xff0c;并不断增加特征维度持续测试」的做法&#xff0c;体现了一种逐步建模与迭代验证的实验思路&#xff0c;在金融欺诈检测中非常有价值&#xff0c;本文作为一篇回顾性记录了早年间公司给某行做反欺诈预测用到的技术和思路。百度…...