uni-app 接入极验验证码攻略

背景

uni-app 的项目中需要接入极验验证码，根据极验官方文档，只能在微信的 wxml 页面中引入模板，但是对于每个页面都有接口调用的情况下，手动加是不可能的，开发量大，测试工作量也大，需要回归整个app，但是官方也没有提供类似全局api的形式给到 js 去调用，小程序不像H5 是可以临时插入dom进行操作的，所有要做到全局把控，只能通过中间页的形式。

实现思路

思路：通过小程序里面建一个中间页面，在接口响应的时候，根据 code 码跳转到承载极验验证码的页面，在这个页面里面做相关的逻辑处理，成功之后在返回到上一个页面即可。为了不占用主包的大小，所以这个中间页最好放在分包里面。为了保存数据，在页面中使用，可以将数据存在 vuex 中，这样可以全局读取，进行二次验证传递给接口。

实现步骤

申请插件

登陆微信小程序的后台，在设置-第三方服务-插件管理中添加插件，通过 appid（wxefa63d84fe9f64a2)查找并添加验证码插件,等待极验通过申请即可使用。

插件通过后，可以在微信开发者工具详情-插件信息中查看插件的版本号

配置插件

在文件src/manifest.json中找到微信相关的配置，加入插件：

代码语言：javascript复制

"mp-weixin": { /* 微信小程序特有相关 */     "appid": "xx",     "setting": {       "urlCheck": false     },     "usingComponents": true,     "optimization": {       "subPackages": true     },     "plugins": {       "myPlugin": {         "version": "1.3.3",         "provider": "wxefa63d84fe9f64a2"       }     }   },

在src/pages.json中找到分包subPackages，加入承载验证码操作的中间页，在这个页面引入插件，就可以在当前页面中使用：

代码语言：javascript复制

"subPackages": [   "root": "packageSecond",   "pages": [     {       "path": "pages/geetest/geetest",       "style": {         "navigationBarTitleText": "验证码",         "mp-weixin": {            "usingComponents": {               "captcha": "plugin://myPlugin/captcha"             }          }        }     }   ] ]

中间页

新建中间页，在分包目录下，如src/packageSecond/pages下新建一个中间页面geetest/geetest.vue，页面中引入极验验证码的模板，按照vue的语法转换模板，监听成功和失败的时间，做相应的业务逻辑处理，根据官方文档，微信小程序的模板写法<captcha id="captcha" wx:if="{{loadCaptcha}}" gt="{{gt}}" challenge="{{challenge}}" offline="{{offline}}" bindonSuccess="captchaSuccess" /> wx:if换成v-if，{{}}语法换成 vue 模板语法，事件绑定换成@onSuccess

代码语言：javascript复制

// geetest/geetest.vue
<template>
  <view class="container">
    <view class="gettest-box">
      <captcha
        v-if="geetestObj.loadCaptcha"
        :gt="geetestObj.gt"
        :challenge="geetestObj.challenge"
        :offline="geetestObj.offline"
        @onError="error"
        @onSuccess="success"
      />
    </view>
  </view>
</template>
<script>
import { mapState } from 'vuex'
import store from 'store'

export default {
  computed: {
    ...mapState({
      geetestObj: state => state.geetestObj,
    }),
  },
  methods: {
    error(e) {
      console.log('我是挤眼验证码，我出错了')
    },
    async success(result) {
      try {
        store.commit('SET_GEETEST_RESULT', result.detail)
        const secondVerifyUrl = '/api/secondVerify'
        const reportResultUrl = '/api/reportResult'
        const options = {stone: true, json: true}
        const resultData = result.detail
  
        // 二次验证需要的参数
        const secondVerifParams = {
          challenge: resultData.geetest_challenge,
          serverStatus: this.geetestObj.serverStatus,
          validate: resultData.geetest_validate,
          seccode: resultData.geetest_seccode,
          devicePlatform: 'h5',
        }

        const secondVerify = await postRequest(secondVerifyUrl, secondVerifParams, options)
        let { resultCode = '' } = secondVerify
        if (resultCode) {
          const params = {
            challenge: resultData.geetest_challenge,
            serverStatus: this.geetestObj.serverStatus,
            result: resultCode === '200' ? 1 : 0,
            devicePlatform: 'h5',
          }
          const reportResult = await postRequest(reportResultUrl, params, options)
          if (reportResult.resultCode) {
            const pages = getCurrentPages() // 当前页面
            const beforePage = pages[pages.length - 2] // 上一页
            const options = beforePage.options
            uni.navigateBack({
              success: function() {
                beforePage.onLoad(options) // 执行上一页的onLoad方法
              }
            })
          }
        }
      } catch(e) {
        console.log(e)
      }
    }
  }
}
</script>
<style lang="scss">
.container {
  width: 100vw;
  height: 100vh;
  position: relative;

  .gettest-box {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>

监听接口

封装好的接口请求中监听响应的状态，将数据存到 store 中，在验证码中间页拿到数据，进行二次验证的时候传给后端接口。

代码语言：javascript复制

// server.js
fetchInstance.interceptors.response.use(res => {
    // #ifdef MP-WEIXIN
    if (res.data.status === 485) {
        const data = res.data.data
        const obj = {
            loadCaptcha: data.newCaptcha,
            gt: data.gt,
            challenge: data.challenge,
            offline: !data.serverStatus,
            serverStatus: data.serverStatus
        }
        store.commit('SET_GEETEST_OBJ', obj)
        uni.navigateTo({
            url: '/packageSecond/pages/geetest/geetest'
        })
    }
    // #endif
})

以上就是接入的这个过程。效果如下：

参考： https://docs.geetest.com/sensebot/apirefer/api/miniprogram https://docs.geetest.com/sensebot/deploy/client/miniprogram https://uniapp.dcloud.io/component/mp-weixin- plugin

验证码 https 网络安全小程序 api

0 人点赞