微信小程序中OCR身份证识别流程

申请权限

登录微信小程序开发平台

设置 -> 第三方设置 -> 插件管理

在这里插入图片描述

点击添加，搜索OCR添加即可，如下图所示
在这里插入图片描述

点击详情可以看到插件的开发文档

文档传送门

这里值得注意的是要从开放平台购买微信 OCR 识别

在这里插入图片描述
不购买直接调用识别接口会报错 101003，官方文档并没有解释101003是因为没有购买。

这里购买每天一百次，一年以内都是免费的

代码

如果是原生微信小程序的写法，直接按照开发文档引入即可

OCR.idcard为例

因为 uni-app 中并没有可以支持微信小程序 OCR 功能的插件，所以我们为了适配直接在 uni-app 里面使用微信原生的 api 方法

根据官方文档，我们将步骤分为三步走

获取accessToken
选择本地图片（或者选择已经上传成功图片的网络地址）
调用接口进行识别

获取accesstoken 需要 appId 和 secret ，这两个参数在小程序开放平台均可查看

直接上代码

// 获取accessToken
    getAccessToken() {
    
    
      return new Promise((resolve, reject) => {
    
    
        uni.request({
    
    
          url: 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=*****&secret=***',
        }).then(response => {
    
    
          // 这里的返回结果是经过我们自己封装的，请根据自己的实际情况返回
          if(response[1].statusCode === 200) {
    
    
            resolve(response[1].data.access_token)
          } else {
    
    
            reject(error)
          }
        }).catch(error => {
    
    
          reject(error)
        })
      }) 
    }
    // OCR证件识别 - 仅用于微信小程序
    async identifyIDcard() {
    
    
      const accessToken = await this.getAccessToken()
      console.log(accessToken)
      // 这里使用的是uni，但并不影响，改成wx也可行，不比纠结
      uni.chooseMedia({
    
    
        count: 1,
        sourceType: ['album', 'camera'],
        success(res) {
    
    
          console.log(res.tempFiles[0].tempFilePath)
          // 这里亲测了使用上传文件的临时缓存地址不可辨别！！！
          // 请使用上传成功后的网络地址或将图片作为 FormData 直接上传
          uni.request({
    
    
            url: 'https://api.weixin.qq.com/cv/ocr/idcard?type=photo&img_url=' + encodeURIComponent('https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2582405855,2667866727&fm=26&gp=0.jpg') + '&access_token=' + accessToken,
            method: 'POST',
            success: function(response) {
    
    
              console.log(response)
              if(response.statusCode === 200 && response.data.errcode === 0) {
    
    
                wx.showToast({
    
    
                  title: response.data.name + '识别成功'
                })
              } else {
    
    
                wx.showToast({
    
    
                  title: response.data.errmsg
                })
              }
            },
            fail: function(error) {
    
    
              wx.showToast({
    
    
                title: error
              })
            }
          })
        }
      })
    }

我从网上随便找了一张示例图：

在这里插入图片描述

到此，我们需要的就可以了

值得注意的是，虽然我写了 chooseImage ，但其实是没有用到的

我们看一下执行结果

在这里插入图片描述
识别成功！

切记：101003的错误原因是因为没有申请免费试用权限

直接使用封装好的按钮

此种方法只能使用在线扫描，无法使用在线地址

逻辑为：扫描成功后上传服务器

其余申请权限都一样，JS方法不需要写

分别在app.json和page.json中添加使用的模块

"usingComponents": {
    
    
        "ocr-navigator": "plugin://ocr-plugin/ocr-navigator"
      }

然后在wxml中写入：

<!-- 直接调用按钮，无需自己写方法 -->
    <ocr-navigator bind:onSuccess="success" certificateType="idCard" :opposite="false">
      <button type="primary" class="mainBtn">拍摄身份证头像面</button>
    </ocr-navigator>

在这里插入图片描述

样式如上，可以自行修改

我们真机调试一下

这是调用识别成功之后的返回身份信息

在这里插入图片描述

识别成功之后我们就可以将正确的证照图片上传到服务器上