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

article/2025/9/11 23:54:56

申请权限

登录微信小程序开发平台

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

在这里插入图片描述

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

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

文档传送门

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

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

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

代码

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

OCR.idcard为例

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

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

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

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

直接上代码

// 获取accessTokengetAccessToken() {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>