详解微信小程序官方人脸核身认证

 更新时间:2021年06月04日 11:26:01   作者:Ferocious  
本文主要介绍了微信小程序官方人脸核身认证,感兴趣的同学,可以参考下,并且试验一下。

小程序收集了下用户个人信息上传被打回来说:

你好,小程序页面功能涉及:采集用户生物特征(人脸照片或视频)及其他敏感信息,用于身份认识或识别,

为保障用户敏感隐私身份信息,平台暂不支持此功能。请去除相关功能后重新提交。

然后就去找度娘搜了下需要申请

wx.startFacialRecognitionVerify({})

https://api.weixin.qq.com/cgi-bin/token?appid=appid&secret=secret&grant_type=client_credential

https://api.weixin.qq.com/cityservice/face/identify/getinfo?access_token=access_token

https://api.weixin.qq.com/cityservice/face/identify/getimage?access_token=access_token

首先要给申请下来的接口发送俩个参数:名字、身份证号码

photo.js

data: {
    openid: '',
    custName: '姓名',
    custIdCard: '身份证号码',
    verifyImg: ''
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      custName: options.custName,
      custIdCard: options.custIdCard
    });
    var _this = this;
    wx.checkIsSupportFacialRecognition({
      checkAliveType: 2,
      success: function (res) {
        if (res.errCode === 0 || res.errMsg === "checkIsSupportFacialRecognition:ok") {
          //调用人脸识别
          _this.startface(_this.data.custName.replace(/(^\s*)|(\s*)$/g, ""), _this.data.custIdCard); //身份证名称,身份证号码
          return;
        }
        wx.showToast('微信版本过低,暂时无法使用此功能,请升级微信最新版本')
      },
      fail: function(res){
        wx.showToast('微信版本过低,暂时无法使用此功能,请升级微信最新版本')
      }

    })
  },
  startface(name, idcard) {
    console.log('我进来了!!!');
    var _this = this;
    wx.startFacialRecognitionVerify({
      name: _this.data.custName, //身份证名称
      idCardNumber: _this.data.custIdCard, //身份证号码
      success: function (res) {
        var verifyResult = res.verifyResult; //认证结果
        //调用接口


        wx.request({
          url: 'https://api.weixin.qq.com/cgi-bin/token?appid=wx2cafec51ec4c2153&secret=8d3e68a5a2c702673340d72d1c7db4cc&grant_type=client_credential',
          data: {

          },
          method: 'POST',
          header: {
            'content-type': 'application/json;charset=utf-8'
          },
          success: function (res) {
            console.log(res.data);
            console.log(res.data.access_token)
            var token = res.data.access_token;
            wx.request({
              url: 'https://api.weixin.qq.com/cityservice/face/identify/getinfo?access_token=' + res.data.access_token,
              data: {
                verify_result: verifyResult
              },
              method: 'POST',
              header: {
                'content-type': 'application/json;charset=utf-8'
              },
              success: function (res) {
                console.log(res.data)
                console.log('我终于成功了。。。。')
                wx.request({
                  url: 'https://api.weixin.qq.com/cityservice/face/identify/getimage?access_token=' + token,
                  data: {
                    verify_result: verifyResult
                  },
                  method: 'POST',
                  responseType: 'arraybuffer',
                  header: {
                    'content-type': 'application/json;charset=utf-8',
                  },
                  success: (res) => {
                    // console.log('data:image/png;base64,'+wx.arrayBufferToBases64(res))

                    console.log(res.data);
                    var base64 = wx.arrayBufferToBase64(res.data);
                    _this.setData({ verifyImg:'data:image/png;base64,'+ base64})
                    wx.navigateTo({
                      url: '../msg/msg?msg=恭喜您信息核验成功&verifyImg=' + _this.data.verifyImg
                    });
                  },
                  fail: function (res) {
                    console.log('失败', res.data)
                  }
                })

              },
              fail: function (res) {

              }
            })
          },
          fail: function (res) {

          }
        })



        console.log(verifyResult)
        // wx.navigateTo({
        //   url: '../msg/msg?msg=人脸核身认证成功'
        // });
      },
      checkAliveType: 2, //屏幕闪烁(人脸核验的交互方式,默认0,读数字)
      fail: err => {
        wx.showToast('请保持光线充足,面部正对手机,且无遮挡')
        wx.navigateTo({
          url: '../msg/msg?msg=请保持光线充足,面部正对手机,且无遮挡,请退出重新操作'
        });
      }
    })
  }

主要坑的是这样下来得申请好几次接口到最后业务还需要unionid所以还得去微信开放平台申请认证

然后想要拉取核身结果的图片的时候就需要党上面的https://api.weixin.qq.com/cityservice/face/identify/getimage?access_token=access_token

返回的数据需要转成base64码然后显示在image标签上我是直接传给后台的

下面上我msg的js代码

msg.js

const app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    msg:'',
    verifyImg:'',
    url:app.globalData.PostData
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var timestamp = Date.parse(new Date());
    timestamp = timestamp/1000
    console.log(options)
    var that = this;
    that.setData({
      msg:options.msg,
      verifyImg:options.verifyImg
    });
    console.log(that.data.url)
    console.log(that.data.verifyImg)
    
      wx.request({
        url: that.data.url+'fileUpload!upBase64.do', //仅为示例,非真实的接口地址
        data: {
          file:that.data.verifyImg,
          filename:timestamp,
          filedata:that.data.verifyImg
        },
        method: 'POST',
        header: {
          'content-type': 'application/x-www-form-urlencoded;charset=utf-8'
        },
        success:function (res){
          const data = res.data
          console.log('成功',data);
          //do something
        },
       fail:function(res){
         console.log('失败',res)
       }
        
      })
  }

后台上传base64转换的代码

public void upBase64() {
         System.out.println("======开始上传图片====");
         System.out.println(file);
        Json j = new Json();
        String FilePath = ServletActionContext.getServletContext().getRealPath(Constants.IMGPATH+"/"+Constants.PHOTOPATH);  
        File PathFile = new File(FilePath);
        try {
            // 如果是IE,那么需要设置为text/html,否则会弹框下载
            // response.setContentType("text/html;charset=UTF-8");
            response.setContentType("application/json;charset=UTF-8");

            String FileName = request.getParameter("filename");
            String FileData = request.getParameter("filedata");
            System.out.println(FileName+"**************"+FileData);
            if (null == FileData || FileData.length() < 50) {
                j.setMsg("上传失败,数据太短或不存");
                j.setSuccess(false);
            } else {
                // 去除开头不合理的数据
                FileData = FileData.substring(30);
                FileData = URLDecoder.decode(FileData, "UTF-8");
                System.out.println("FileData="+FileData);
                byte[] data = FileUtil.decode(FileData);
                /*if (null == FileName || FileName.length() < 1) {
                    FileName = System.currentTimeMillis() + ".jpg";
                }*/
                // 写入到文件 
                FileOutputStream outputStream = new FileOutputStream(new File(PathFile,FileName)); 
                outputStream.write(data); 
                outputStream.flush(); 
                outputStream.close(); 
                System.out.println(FileName+"**************"+FileData);
                j.setMsg("上传成功");
                j.setSuccess(true);
            }
        } catch (Exception err) {
            j.setMsg("上传失败");
            j.setSuccess(false);
            err.printStackTrace();
        }
        writeJson(j);
    }

以上就是详解微信小程序官方人脸核身认证的详细内容,更多关于微信小程序官方人脸核身认证的资料请关注脚本之家其它相关文章!

相关文章

  • js或jquery动态输出select option的实现代码

    js或jquery动态输出select option的实现代码

    在 JavaScript 中动态生成 <option> 元素并添加到 <select> 下拉列表中,可以通过以下几种方式实现,以下是不同场景下的完整代码示例
    2025-03-03
  • JavaScript 中URL 查询字符串(query string)的序列与反序列化的方法

    JavaScript 中URL 查询字符串(query string)的序列与反序列化的方法

    在 JavaScript 中,可以使用 URLSearchParams 对象来处理 URL 中的查询字符串,这篇文章主要介绍了JavaScript 中URL查询字符串(query string)的序列与反序列化,需要的朋友可以参考下
    2023-01-01
  • 使用原生js+canvas实现模拟心电图的实例

    使用原生js+canvas实现模拟心电图的实例

    下面小编就为大家带来一篇使用原生js+canvas实现模拟心电图的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • JS组件Bootstrap实现弹出框效果代码

    JS组件Bootstrap实现弹出框效果代码

    这篇文章主要介绍了JS组件Bootstrap实现弹出框效果代码的相关资料,对弹出框感兴趣的小伙伴们可以参考一下
    2016-04-04
  • 详解JavaScript Alert函数执行顺序问题

    详解JavaScript Alert函数执行顺序问题

    本文主要介绍了Javascript的Alert函数执行顺序问题,对此感兴趣的同学,可以实验一下,以便解决平时遇到的一些奇怪的问题。
    2021-05-05
  • javascript实现window.print()去除页眉页脚

    javascript实现window.print()去除页眉页脚

    这篇文章主要介绍了javascript实现window.print()去除页眉页脚的方法以及各参数的设置技巧,需要的朋友可以参考下
    2014-12-12
  • 微信小程序实现签字功能

    微信小程序实现签字功能

    这篇文章主要介绍了微信小程序实现签字功能,本文通过效果图展示,实例代码讲解的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-12-12
  • 基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用

    基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用

    一般Web界面包括的界面控件有:单行文本框、多行文本框、密码文本框、下拉列表Combobox、日期输入控件、数值输入控件、单项选择、复选框、表格控件DataGrid、树形控件、布局控件、弹出式对话框、提示信息、列表控件等,这些界面控件的操作都有哪些不同,下面逐一介绍
    2015-12-12
  • JavaScript中map属性示例详解

    JavaScript中map属性示例详解

    Map对象在JavaScript中提供了一种灵活且高效的键值对存储方式,它具有许多实用的方法,如set()、get()、has()和delete()等,使得操作和管理键值对变得更加简单,这篇文章主要介绍了JS中map属性,需要的朋友可以参考下
    2024-08-08
  • 详解JavaScript中浮点数的精度计算

    详解JavaScript中浮点数的精度计算

    这篇文章主要来和大家介绍一下JavaScript中浮点数精度计算的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起了解一下
    2023-06-06

最新评论