uniapp微信小程序证件识别

该博客介绍了如何接入百度云开发,通过获取access_token来调用百度OCR接口识别身份证信息。步骤包括:1) 注册并配置百度云账号;2) 使用API Key和Secret Key获取access_token;3) 使用POST请求发送身份证图片,识别姓名、身份证号和住址等信息。同时提供了自定义函数`OcrIdCard`的实现和在页面中调用的示例。
摘要由CSDN通过智能技术生成

1.百度云开发注册与配置-接入百度OCR

官网:https://ai.baidu.com/

 

2.获取access_token,根据图4中的api和secret获取

参考:https://ai.baidu.com/ai-doc/REFERENCE/Ck3dwjhhu

请求URL数据格式

向授权服务地址https://aip.baidubce.com/oauth/2.0/token发送请求(推荐使用POST),并在URL中带上以下参数:

  • grant_type: 必须参数,固定为client_credentials
  • client_id: 必须参数,应用的API Key
  • client_secret: 必须参数,应用的Secret Key

例如:

getUsers() {
            uni.request({
                url:'https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=API Key&client_secret=Secret Key',
                success:res=>{
                    console.log('access_token',res.data.access_token)
                    let obj = res.data.access_token;
                    // uni.setStorage({
                    //     key:'accsee_token',
                    //     data:obj,
                    //     success: () => {
                    //         console.log('success')
                    //         this.getcarno()
                    //     }
                    // })
                    this.access_token=obj
                    this.getIDCard()
                },
                error:err=>{
                    console.log('err',err)
                }
            })

打印得到access_token

3.得到access_token便可获取图中信息

参考:https://www.cnblogs.com/masterchd/p/12452005.html

请求示例

HTTP 方法:POST

请求URL: https://aip.baidubce.com/rest/2.0/ocr/v1/idcard(根据需求在图四中选择你的地址)

URL参数:

参数
access_token通过API Key和Secret Key获取的access_token,参考第二步

Header如下:

参数
Content-Typeapplication/x-www-form-urlencoded

Body中放置请求参数,参数详情如下:

请求参数

参数是否必选类型可选值范围说明
imagestring-图像数据,base64编码后进行urlencode,要求base64编码和urlencode后大小不超过4M,最短边至少15px,最长边最大4096px,支持jpg/jpeg/png/bmp格式
id_card_sidestringfront/backfront:身份证含照片的一面;back:身份证带国徽的一面
detect_directionstringtrue/false是否检测图像旋转角度,默认检测,即:true。朝向是指输入图像是正常方向、逆时针旋转90/180/270度。可选值包括: - true:检测旋转角度; - false:不检测旋转角度。
detect_riskstringtrue/false是否开启身份证风险类型(身份证复印件、临时身份证、身份证翻拍、修改过的身份证)功能,默认不开启,即:false。可选值:true-开启;false-不开启
detect_photostringtrue/false是否检测头像内容,默认不检测。可选值:true-检测头像并返回头像的 base64 编码及位置信息
detect_rectifystringtrue/false是否进行完整性校验,默认为true,需上传各字段内容完善的图片方可识别;如果设置为false,则对于身份证切片(如仅身份证号区域)也可识别

示例:
3.1自定义文件 profunc.js,实现函数并封装

function OcrIdCard(access_token){
  return new Promise(function(resolve,reject){
    var that = this;
    //识别身份证
    wx.chooseImage({
      count: 1,
      sizeType: ['compressed'],
      sourceType: ['album', 'camera'],
      success: function (res) {
        console.log(res.tempFilePaths)
          //核心代码
        wx.getFileSystemManager().readFile({
          filePath: res.tempFilePaths[0],
          encoding: 'base64', //编码格式
          success(ans) {
            // console.log(ans.data)
            wx.showLoading({ title: '识别中' })
            wx.request({
              url: '图四中的地址?access_token=' + access_token,
              method: 'POST',
              header: {
                'Content-Type': 'application/x-www-form-urlencoded'
              },
              data: {
                image: ans.data,
                id_card_side: 'front'
              },
              success(_res) {
                wx.hideLoading();
                resolve(_res)
                
              }, fail(_res) {
                wx.hideLoading();
                wx.showToast({
                  title: '请求出错',
                })
                reject(_res)
              }
            })
          }
        })
      }
    })
  })
}

module.exports = {
  OcrIdCard: OcrIdCard
}

3.2页面引用,需要传入access_token

 import cwx from './profunc.js'
      getIDCard() {
                var that = this;
                    cwx.OcrIdCard(that.access_token).then(function(_res){
                        var trdata = _res.data.words_result;
                        console.log('trdata',trdata)
                        // that.setData({
                        //   name: trdata['姓名'].words,
                        //   idcard: trdata['公民身份号码'].words,
                        //   userloc: trdata['住址'].words
                        // })
                    })    
            },

打印得到图中信息

 

 

 

当面试官问到uniapp微信小程序相关的试题时,你可以参考以下问题答案: 1. 什么是uniapp? - uniapp是一个基于Vue.js开发跨平台应用框架,可以同时开发iOS、Android、H5和微信小程序等多个平台的应用。 2. 什么是微信小程序? - 微信小程序是一种在微信平台上运行的应用程序,用户可以在微信中直接使用,无需下载安装。 3. uniapp微信小程序有什么关系? - uniapp可以开发微信小程序,通过uniapp的跨平台特性,开发者只需要编写一套代码,就可以同时在多个平台上运行。 4. uniapp开发微信小程序的优势有哪些? - 跨平台开发:只需编写一套代码,即可在多个平台上运行。 - 开发效率高:使用Vue.js进行开发,具有简洁、灵活的语法,提高开发效率。 - 统一的UI组件:uniapp提供了一套统一的UI组件库,方便开发者快速构建界面。 - 支持原生能力:uniapp支持调用原生API,可以实现更多的功能。 5. uniapp开发微信小程序的限制有哪些? - 对于一些特定的微信小程序API,uniapp可能无法直接调用,需要通过插件或自定义组件来实现。 - 由于不同平台的差异,一些特定的样式和功能在不同平台上可能会有差异。 6. uniapp中如何实现微信小程序的页面跳转? - 可以使用uniapp提供的`uni.navigateTo`、`uni.redirectTo`、`uni.switchTab`等方法来实现页面跳转。 7. uniapp中如何调用微信小程序的原生API? - 可以使用uniapp提供的`uni.request`、`uni.showToast`等方法来调用微信小程序的原生API。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值