验证码 小程序插件接入

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

前提条件

使用小程序插件接入验证码前，需要先在 验证码控制台 中注册小程序插件 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 接入 操作，确保验证安全性。

赞 (0)

相关推荐