验证码 小程序插件接入

本文档将指导您如何在微信小程序中，通过小程序插件接入验证码。

前提条件

使用小程序插件接入验证码前，需要先在 验证码控制台 中注册小程序插件 AppID 和 AppSecret，注册完成后，您可以在验证码控制台的验证详情的基础配置中，查看 AppID 以及 AppSecret。

注意：

小程序插件 AppID 仅限小程序插件接入方式使用，请勿使用在 Web 前端接入。

接入步骤

步骤1：添加插件

1. 用管理员身份登录 微信公众平台，且需使用接入小程序的相关账号。
2. 选择【设置】>【第三方设置】>【添加插件】，在搜索框内输入关键字“天御验证码”查找插件，并单击【添加】，如下图所示：
   

步骤2：集成插件

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

   复制

   复制成功

   {
    "plugins": {
        "myPlugin": {
            "version": "1.0.0",
            "provider": "wxb302e0fc8ab232b4"
        }
    }
   }

2. 引入验证码小程序组件。
   需要在页面.json文件中需要引入自定义组件，js 代码如下：

   复制

   复制成功

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

步骤3：使用小程序插件

1. 在自定义的.wxml文件中，使用验证码插件，wxml 代码如下：

   复制

   复制成功

   <t-captcha
    id="captcha"
    app-id="小程序插件验证码AppID"
    bindverify="handlerVerify"
    bindready="handlerReady"
    bindclose="handlerClose"
    binderror="handlerError" />
   <button bindtap='login'>登录</button>

   • 组件参数说明：

     字段名	值类型	默认值	说明
     appId	String	无	场景 ID
     size	String	normal	尺寸，可选 normal、small、mini
     lang	String	zh-CN	语言，可选 zh-CN、zh-TW、en
     themeColor	String	#1A79FF	主题色

   • 组件事件说明：

     事件名	参数	说明
     ready	无	验证码准备就绪
     verify	{ret, ticket}	验证码验证完成
     close	无	验证码弹框准备关闭
     error	无	验证码配置失败

   • 组件方法说明：
     • show： 展示验证码。
     • destroy： 销毁验证码。
     • refresh： 重置验证码。

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

   复制

   复制成功

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

后续步骤

至此，验证码微信小程序接入已完成，验证码后台需二次核查验证码小程序插件票据结果，您需要进行 后台小程序插件 API 接入 操作，确保验证安全性。