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

电玩女神 2022-12-10 01:16 1245阅读 0赞

## 申请权限 ##

登录微信小程序开发平台

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70_pic_center]

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

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

[文档传送门][Link 1]

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

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

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

## 代码 ##

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

[OCR.idcard][]为例

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

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

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

获取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
                  })
                }
              })
            }
          })
        }

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70_pic_center 3]

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

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

我们看一下执行结果

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70_pic_center 4]  
识别成功！

**切记：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>

![在这里插入图片描述][20200925095248583.png_pic_center]

样式如上，可以自行修改

我们真机调试一下

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70_pic_center 5]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/07c3e9988aa246e393c48da2a7ca86b5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/a07e422a060f46f993fab572f7bd9658.png
[Link 1]: https://mp.weixin.qq.com/wxopen/plugindevdoc?appid=wx4418e3e031e551be&token=1902823444&lang=zh_CN
[Link 2]: https://developers.weixin.qq.com/community/servicemarket/detail/000ce4cec24ca026d37900ed551415
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/4a4eed529d92460a9de69d2786eb6aae.png
[OCR.idcard]: https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/ocr/ocr.idcard.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/8d684c5a15ea45d2b4f18cc1147814f4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/8ad35cd03dec4d6ab54c3b5f73030b10.png
[20200925095248583.png_pic_center]: /images/20221123/8ef5d09cc8ae4aa086de856122c25a54.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221123/dace20eaba364ba8b9587bcdcb521465.png