uni-app微信小程序接入人脸核身SDK认证

写这篇文章是记录自己使用慧眼的流程,由于网上另外一篇友链,并不是很支持uniapp、vue3、ts的架构

接⼊准备
⼩程序前端接⼝请求有域名⽩名单限制,如果不添加只能再调试模式下运⾏,上线前需要将如下两
个域名在⼩程序后台添加服务器域名
uni-app接⼊
步骤⼀:注册并创建 uni-app 开发环境
uni-app开发接⼊具体参照uni官⽹
步骤⼆:下载并配置verify_mpsdk源码

  1. 下载sdk源码及配套的demo示例
  2. 配置sdk源码
    ⽅法⼀:项⽬根⽬录配置(推荐)
  3. 将sdk源码包verify-mpsdk⽂件夹拷⻉到项⽬根⽬录
  4. ⼩程序前端接⼝请求有域名⽩名单限制,如果不添加只能再调试模式下运⾏,上线前需要将如下两
    个域名在⼩程序后台添加服务器域名
https://faceid.qq.com;
https://faceid.qcloud.com;

步骤三:将verify_mpsdk/utils目录下的module.exports全都改为es6的export,例如:

//  /verify_mpsdk/globalConfig.js
export default {
  normalPath: '',
}
//  /verify_mpsdk/utils/index.js
import common from './common'

export * from './extend'
export * from './report'
export * from './request'
export * from './http'
export * from './util'
export * from './validate'
export * from './verify'
export const $common = common

步骤四:在pages.json中添加实名界面路径

{
      "path": "verify_mpsdk/pages/ocr/ocr",
      "style": {
        "navigationStyle": "custom"
      }
    },
    {
      "path": "verify_mpsdk/pages/sms/sms",
      "style": {
        "navigationStyle": "custom"
      }
    },
    {
      "path": "verify_mpsdk/pages/verifyLivingBody/verifyLivingBody",
      "style": {
        "navigationStyle": "custom"
      }
    },
    {
      "path": "verify_mpsdk/pages/protocol/protocol",
      "style": {
        "navigationStyle": "custom"
      }
    },
    {
      "path": "verify_mpsdk/pages/result/result",
      "style": {
        "navigationStyle": "custom"
      }
    }

步骤五:App.ue初始化sdk

  import Verify from '@/verify_mpsdk/utils/main.js'
    onLaunch(async (options) => {
    Verify.init()
  })

步骤六:使用的位置调用

interface Uniapp<Key> {
  [key: string]: Key extends keyof Uni ? Uni[Key] : any
}

// 后续参考文档调用就行
// 有问题可以联系我vx
// 15884572638
// 获取bizToken
    const {
      data = { bizToken: '' },
      code,
      message,
    } = await getBizToken(personInfo)
;(uni as Uniapp<'startVerify'>).startVerify({
        data: {
          token: data.bizToken, // BizToken
        },
        success: (res: any) => {
          showLoading()
          // 验证成功后触发
          // res 包含验证成功的token, 这里需要加500ms延时,防止iOS下不执行后面的逻辑
          setTimeout(async () => {
            try {
              // 验证成功后,拿到token后的逻辑处理,具体以客户自身逻辑为准
              // if (res.BizToken) {
              const { data } = await postBizToken({
                bizToken: res.BizToken || '',
              })
              msg('实名成功')
              return resolve(true)
              // }
            } catch (e) {
              //TODO handle the exception
              hideLoading()
              uni.showModal({
                title: '提示',
                content: '实名认证调用接口失败',
                showCancel: false,
              })
              console.log('实名认证失败')

              return reject(false)
            }
          }, 500)
        },
        fail: (err: any) => {
          // 验证失败时触发
          // err 包含错误码,错误信息,弹窗提示错误
          setTimeout(() => {
            uni.showModal({
              title: '提示',
              content: err.ErrorMsg || '实名失败',
              showCancel: false,
            })
            useRealAuthLimit(true)
            return reject(false)
          }, 500)
        },
      })

申请流程是参照:这个链接

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐