验证码 支付宝小程序接入

一、前提条件

2. 单击创建验证码，根据业务场景需求，设置验证名称、客户端类型、验证方式等参数。

3. 单击确定，完成新建验证，即可在验证列表中查看验证码 CaptchaAppId 及 AppSecretKey。

二、示例下载

代码示例：单击验证，激活验证码，并弹窗展示验证结果。

完整示例请下载：支付宝小程序验证码接入示例。

三、步骤1：添加插件

1. 用管理员身份登录 支付宝开放平台控制台，且需使用接入小程序的相关账号。

2. 在插件服务 > 插件管理中，单击订购其他插件。

3. 在搜索框内，输入插件 ID2021006159676022查找插件，并单击授权并绑定。

4. 在服务市场首页 > 服务详情 > 服务订阅中，单击添加小程序。

5. 添加所需要使用验证码的小程序，填写必填信息，选择“同意”相关协议并单击授权并订购。

四、步骤2：集成插件

1. 引入验证码小程序插件。

使用验证码插件前，需要在 app.json 中声明验证码小程序插件，如下：

{ "plugins": { "captcha": { "version": "*", // 默认加载最新版本 "provider": "2021006159676022" } }}

2. 引入验证码小程序组件。

在页面.json文件中需要引入自定义组件，js 代码如下：

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

五、步骤3：使用小程序插件

1. 使用原生小程序语言接入时，需要在自定义的.axml文件中，使用验证码插件，axml 代码如下：

<!– app-id：验证码CaptchaAppId, 从腾讯云的验证码控制台中获取, 在验证码控制台页面内【验证管理】进行查看 –><t-captcha id="captcha" app-id=CaptchaAppId onVerify="handlerVerify" onReady="handlerReady" onClose="handlerClose" onError="handlerError" /><button onTap='login'>登录</button>

·组件参数说明：

·组件事件说明：

·组件方法说明：

2. 在自定义的.js文件中，监听事件，代码如下：

Page({ data: {}, login: function () { this.$selectComponent('#captcha').show() // 进行业务逻辑，若出现错误需重置验证码，执行以下方法 // if (error) { // this.$selectComponent('#captcha').refresh() // } }, // 验证码验证结果回调 handlerVerify: function (ev) { if (ev.ret === 0) { // 验证成功 console.log('ticket:', ev.ticket) } else { // 验证失败 // 请不要在验证失败中调用refresh，验证码内部会进行相应处理 } }, // 验证码准备就绪 handlerReady: function () { console.log('验证码准备就绪') }, // 验证码弹框准备关闭 handlerClose: function (ev) { if (ev && ev.ret && ev.ret === 2) { console.log('点击了关闭按钮，验证码弹框准备关闭'); } else { console.log('验证完成，验证码弹框准备关闭'); } }, // 验证码出错 handlerError: function (ev) { console.log(ev.errMsg) }})

注意：业务客户端完成验证码接入后，服务端需二次核查验证码票据结果（未接入票据校验，会导致黑产轻易伪造验证结果，失去验证码人机对抗效果），详情请参见 接入票据校验(小程序)。

六、常见问题

详情参见 接入相关问题。

七、更多信息

你可以登录 验证码控制台，在页面右下角单击快速咨询，了解更多详细信息。