微信小程序实战五:人脸识别登录的实现

微信小程序 专栏收录该内容
9 篇文章 8 订阅


上一篇实现了短信验证码登录,这次我们来实现下人脸核身登录

1.效果预览

2.微信小程序相关账户注册及提交审核

小程序官网:http://mp.weixin.qq.com

微信对人脸核身有资质要求,一般对事业单位、政府、医疗等行业开放,对于一般的公司一般是没有资质开通的。

人脸核身资质官方接口说明:https://developers.weixin.qq.com/community/business/doc/000442d352c1202bd498ecb105c00d

首先小程序注册的邮箱的账号在认证过程中必须使用有资质的,其中最重要的一步就是打款的公司主体必须符合人脸核身的资质才能开通,比如说A公司为某医疗机构开发一款需要人脸核身功能的小程序,那么不能用A公司的账号来申请小程序,需要用符合人脸核身资质的医疗机构去申请小程序的账号,并打款验证才可以。

其次,小程序名称的申请最好不要带有特定的地名及机构名称,比如山东省立医院等特定字样,确实需要带有特定字样需要提交资质资料证明。

最后,小程序先发布一版然后会在微信后台找到 功能-》人脸核身,提交资质等待审核开通,整个流程下来大约需要一整周的时间,建议提前处理。

3.界面实现

<template>
  <view class="login">
    <view class="login-logo">
      <image src="../../../../static/img/logo.png"
             mode=""></image>
    </view>
    <view class="form-view">
      <form class="form-input"
            @submit="formSubmit"
            @reset="formReset">

        <view class="uni-form-item uni-column">
          <view class="uni-form-item-cont"><input class="uni-input"
                   name="name"
                   v-model="formData.name"
                   placeholder="请输入姓名" /></view>
        </view>
        <view class="uni-form-item uni-column">
          <view class="uni-form-item-cont"><input class="uni-input"
                   name="idCards"
                   v-model="formData.idCards"
                   placeholder="请输入身份证号" /></view>
        </view>

        <view class="bot-view">

          <button class="btn btn-submit"
                  @click="checkFace">登录</button>
        </view>

      </form>
    </view>
  </view>

</template>

4.登录方法的实现

 checkFace() {
      var _this = this
      wx.checkIsSupportFacialRecognition({
        checkAliveType: 2,
        success: function (res) {
          if (res.errCode === 0 ) {
            _this.startface(
              _this.formData.name.replace(/(^\s*)|(\s*)$/g, ''),
              _this.formData.idCards
            ) 
            return
          }
          wx.showToast(res)
        },
        fail: (res) => {
          wx.showToast(res)
        },
      })
    },

    startface(name, idcard) {
      wx.startFacialRecognitionVerify({
        name: name, 
        idCardNumber: idcard, 
        checkAliveType: 2, 
        success: function (res) {
          if (res.errCode === 0) {
            let d = {xxx}
            try {
              uni.setStorageSync('USER_INFO', JSON.stringify(d))
            } catch (e) {
              console.log(e)
            }
            uni.reLaunch({
              url: `../index/index`,
            })
          } else {
            wx.showToast(res.errMsg)
          }
        },
        fail: (err) => {
          wx.showToast(err)
        },
      })
    },

5.微信接口说明

wx.checkIsSupportFacialRecognition:检查设备是否支持人脸检测
wx.startFacialRecognitionVerify:基于生物识别的人脸核身接口

  • 2
    点赞
  • 3
    评论
  • 13
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值