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

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

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：基于生物识别的人脸核身接口