如何在微信小程序接入图形认证_号码认证服务(PNVS)-阿里云帮助中心

本文为您介绍微信小程序接入图形认证的集成方法和相关接口说明。

准备工作

环境要求

开发者工具	微信开发者工具
调试基础库	2.10.4及以上

下载SDK

登录号码认证产品控制台，在概览页面右侧API&SDK区域，单击立即下载，进入API&SDK页面，根据页面提示下载并解压对应SDK。

示例Demo

同时为您提供图形认证功能微信小程序接入Demo，您可参考Demo示例代码快速了解接入步骤。Demo下载请参见微信小程序接入Demo。

创建认证方案

登录号码认证产品控制台。
在左侧导航栏选择融合认证（基于原子能力）> 图形认证服务 > 图形认证方案管理。
在图形认证方案管理页面，单击新增图形认证方案。
输入方案名称，接入端选择H5，创建图形认证方案，获取密钥参数（包括appId、appKey）。
说明
接入端选择只用于标记，不影响方案号使用。

接入步骤

引入组件

小程序后台域名白名单添加合法域名https://captcha.alicaptcha.com。
在需要验证的页面下的 xxxx.json 文件中引入要使用的组件，示例代码如下，具体可参见Demo中的 index.json：
```
{  
   "usingComponents": {
    "captcha4": "/component/captcha4/captcha4"
  }
}
```

初始化

在需要验证的页面下 xxxx.wxml 文件中引入要使用的组件，示例参数为必传。

<captcha4  id="captcha" wx:if="{{loadCaptcha}}"  captchaId="{{captchaId}}" />

组件参数说明：

参数	是否必填	类型	说明
captchaId	是	string	验证码ID，即在控制台创建认证方案后获取的`appId`。
language	否	string	指定语言，默认值：zh。
useNativeButton	否	boolean	是否使用唤醒按钮，取值： true（默认值）：带按钮模式。 false：无按钮模式（对于此类型，需要用户主动调用showCaptcha方法唤起验证界面）。
riskType	否	string	当服务端配置了结合风控融合，此字段可指定验证形式。重要由于目前暂未提供风控融合模式，此参数调用不会生效。
hideBar	否	array	隐藏后续验证界面的关闭按钮、刷新按钮。可选值close/refresh。
scale	否	number	缩放比例，默认值：1。
mask	否	object	配置点击验证码区域外是否关闭验证，弹窗背景色。默认值：`{outside:true,bgColor:’#0000004d’}`
hideSuccess	否	boolean	是否隐藏bind模式下的成功弹窗，默认值：false。

下面为事件监听绑定示例，完整的事件说明及代码示例请参见下文事件说明。

<captcha4
    id="captcha"
    wx:if="{{loadCaptcha}}"
    captchaId="{{captchaId}}"
    bindSuccess="captchaSuccess"
    bindReady="captchaReady"
    bindClose="captchaClose"
    bindError="captchaError"
    bindFail="captchaFail"
/>

无按钮模式下，需要手动调用验证码的showCaptcha方法拉起图形验证，示例代码如下，具体可参见Demo中的index.js。

const captcha = this.selectComponent('#captcha');
captcha.showCaptcha();

获取成功凭证

成功完成验证码后，会触发用户自定义的 captchaSuccess 函数，将验证结果存储在 result（用户可⾃定义保存⽅式），等待⼆次验证时提取上传，⽆按钮模式时可以直接在此处进⾏⼆次验证。

captchaSuccess: function(result) {
    console.log("captcha-Success!");
    this.setData({
        result: result.detail
    })
}

提交二次校验

用户点击提交按钮触发提交，进行二次验证。

captchaValidate: function() {
    var self = this;
    var data = self.data.result; // 获取完成验证码时存储的验证结果
    
    if (typeof data !== 'object') {
        console.log("请先完成验证！");
        return;
    }
    
    // 将结果提交给用户服务端进行二次验证
    wx.request({
        url: "用户业务接口", // 替换为实际的URL
        method: 'POST',
        dataType: 'json',
        data: Object.assign({}, data, {
            captcha_id: self.data.captchaId
        }),
        success: function(res) {
            wx.showToast({
                title: res.data.result
            });
        },
        fail: function() {
            console.log('error');
        }
    });
}

事件说明

微信小程序事件通讯中固定存在一个对象event，组件返回的值位于该对象的detail属性中，以下回调参数表示detail中值。

bindReady

监听验证按钮的DOM生成完毕事件。

// wxml
<captcha4 bindReady="captchaReady"/>
// js
captchaReady: function () {
    console.log('captcha-Ready!')
}

bindError

监听验证出错事件，例如刷新过多、静态资源加载失败、网络不畅通等验证码能捕获到的错误，都会触发Error回调，示例代码如下： Error 返回一个 e，其中 e.detail 包含 2 个属性：code（错误码）、tips（错误提示）。

// wxml
<captcha4 bindError="captchaError"/>
// js
captchaError: function (e) {
    console.log('captcha-Error!', e.detail)
}

bindSuccess

监听验证成功事件，返回一个result对象，result中的detail包含四个属性：lot_number、pass_token、captcha_output、gen_time，这些参数为当前验证成功的凭据，二次验证时需要传入。

// wxml
<captcha4 bindSuccess="captchaSuccess"/>
// js
captchaSuccess: function (result) {
    console.log('captcha-Success!')
    // 这里先将result中的参数保存，待进行二次验证时传入
    this.setData({
         result: result.detail
    })
}

bindClose

用户关闭弹出来的验证时，会触发该回调。

// wxml
<captcha4 bindClose="captchaClose"/>
// js
captchaClose: function () {
    console.log('captcha-Close!')
}

bindFail

监听验证失败的事件。

// wxml
<captcha4 bindFail="captchaFail"/>
// js
captchaFail: function () {
    console.log('captcha-Fail!')
}

调用方法

方法名	说明
showCaptcha	仅当useNativeButton值为false时调用，可唤起验证码弹窗。
reset	重置验证码。

异常情况（宕机）说明

如果因为客户端网络或其他问题导致验证码初始化时无法访问服务器，则进入宕机流程，宕机时验证码表现为立即通过，即时触发Success事件。以上文的bindSuccess为例，e.detail对象中会有lot_number、pass_token、captcha_output、gen_time、offline，此时offline值固定为true。