wepy开发小程序：人脸识别登陆的实现方法

小程序人脸识别的实现方法

下面直接贴出实现的代码：

login.wpy

    <template>
      <div class="m-btnGroup">
        <button class="u-btn u-btn-main br10 md20" hover-class="none" @tap="login">人脸识别登录</button>
      </div>
    </template>

    <script>
        //登录跳转身份信息填写
      login(){
        wx.navigateTo({
          url: "/pages/login/step1"
        })
      }
   </script>

step1.wpy 

<template >
  <div class="container">
    <div class="m-head tc p40">请进行人脸识别登录验证</div>
    <div class="m-body flex-column">
      <div class="w100 p40">
        <div class="u-tips">姓名</div>
        <input class="u-input plr20" placeholder="请输入姓名" v-model="param.zsxm" />
      </div>
      <div class="w100 p40">
        <div class="u-tips">身份证</div>
        <input class="u-input plr20" placeholder="请输入身份证号" v-model="param.zjhm" value="{{zjhm}}" />
      </div>
      <div class="p40 m-radio">
        <radio-group class="radio-group flex-row" bindchange="radioChange">
          <label class="radio flex-row plr40">
            <radio value="1" checked="true" />反光识别
          </label>
          <label class="radio flex-row plr40">
            <radio value="0" />读数识别
          </label>
        </radio-group>
      </div>
      <div class="p40">
        <checkbox-group bindchange="checkboxChange">
          <label class="checkbox d-f">
            <checkbox value="1" />
            <span class="u-text">我同意**********管理系统小程序使用我所提交的信息用于快捷登录。</span>
          </label>
        </checkbox-group>
      </div>
      <div class="m-btnGroup w100 p40">
        <button class="u-btn u-btn-main br10 md20" hover-class="none" @tap="verify()">开始验证</button>
      </div>
    </div>
  </div>
</template>

<script>
import wepy from '@wepy/core'
import api from '@/utils/request.js'
import { validate } from '@/utils/validate'
import faceRecognite from '@/utils/faceRecognite.js'
wepy.page({
  data: {
    isReading: [],
    identifyType: '1', // 1反光识别，0读数识别，默认1
    param: {
      zsxm: '',
      zjhm: '',
      logintype: '3',
      appid: api.appid
    },
    zjhm: ''
  },
  onLoad() {
    let self = this
      if (wx.getStorageSync('rlsbLoginRedis') && wx.getStorageSync('rlsbLoginRedis') > new Date().getTime()) {
        self.params.zsxm = wx.getStorageSync('zsxm')
        self.params.zjhm = wx.getStorageSync('zjhm')
        self.zjhm = wx.getStorageSync('zjhm').replace(
          /(\d{4})(\d{10})(\d{4})/,
          '$1**********$3')
      } else {
        try {
          wx.removeStorageSync('zsxm')
          wx.removeStorageSync('zjhm')
          wx.removeStorageSync('rlsbLoginRedis')
        } catch (e) {
          console.log(e)
        }
        self.params.zsxm = ''
        self.params.zjhm = ''
      }
  },
  methods: {
    radioChange(e) {
      let self = this
      self.identifyType = e.$wx.detail.value
    },
    checkboxChange(e) {
      let self = this
      self.isReading = e.$wx.detail.value
    },
    verify() {
      let self = this
      if (self.param.zsxm == '' || self.param.zjhm == '') {
        wx.showToast({
          title: '请输入姓名或身份证号码',
          duration: 2000,
          icon: 'none'
        })
        return false
      }
      if (!validate.IdCardValidate(self.params.zjhm)) {
        wx.showToast({
          title: '身份证号码不正确',
          duration: 2000,
          icon: 'none'
        })
        return false
      }
      if (self.isReading.length == 0) {
        wx.showToast({
          title: '请勾选内容',
          duration: 2000,
          icon: 'none'
        })
        return false
      }
      let checkAliveType = parseInt(self.identifyType)
      faceRecognite.faceRecognition(self.params.zsxm, self.params.zjhm, checkAliveType).then(res => {
        self.login()
      })
    },
    // 设置过期时间7天
    fun_date(nowDate, redis) {
      var redisDate = new Date(nowDate)
      redisDate.setDate(nowDate.getDate() + redis)
      return redisDate.getTime()
    },
    login() {
      let self = this
      api.request('user/login', self.param, 'POST').then(res => {
        if (res.data.code == '0') {
          try {
            wx.setStorageSync('user', res.data.data)
            wx.setStorageSync('fgbs', '1')
            wx.setStorageSync('zsxm', self.params.zsxm)
            wx.setStorageSync('zjhm', self.params.zjhm)
            wx.setStorageSync('rlsbLoginRedis', self.fun_date(new Date(), 7))
          } catch (e) {
            // console.log(e)
          }
          wx.showToast({
            title: '登录成功!'
          })
          wx.reLaunch({
            url: '/pages/main/homePage'
          })

        } else {
          wx.showToast({
            title: res.data.msg,
            duration: 3000,
            icon: 'none'
          })
        }
      }).catch(err => {
        wx.showToast({
          title: err.data.msg,
          duration: 3000,
          icon: 'none'
        })
      })
    }
  }
})
</script>
<config>
    {
        "navigationBarTitleText":"登录"
    }
</config>

<style lang="less" scoped>
.container {
  background: #fff;
  .m-head {
    font-size: 40rpx;
    font-weight: bold;
  }
  .m-body {
    .u-tips {
      font-size: 28rpx;
    }
    .u-input {
      height: 80rpx;
      line-height: 80rpx;
      font-size: 32rpx;
      border-bottom: 1px solid #e5e5e5;
    }
    .m-radio {
      width: calc(~'100% - 80rpx');
      border-bottom: 1px solid #e5e5e5;
      .radio {
        font-size: 30rpx;
        padding: 0 20rpx;
        width: 50%;
        &:first-child {
          border-right: 1rpx solid #e7eaee;
          justify-content: flex-end;
        }
      }
      radio .wx-radio-input {
        width: 40rpx;
        height: 40rpx;
        border: 2rpx solid #999;
        border-radius: 100%;
        background: none;
      }
      /*单选按钮选中后内部样式*/
      radio .wx-radio-input.wx-radio-input-checked {
        border: 2rpx solid #4073f6 !important;
        background: #4073f6 !important;
      }
      radio .wx-radio-input.wx-radio-input-checked::before {
        width: 40%;
        height: 40%;
        background: #fff;
        border-radius: 100%;
        content: '';
        transform: translate(-50%, -50%) scale(1);
        -webkit-transform: translate(-50%, -50%) scale(1);
      }
    }
    .checkbox {
      /*checkbox 选项框大小  */
      checkbox .wx-checkbox-input {
        width: 30rpx;
        height: 30rpx;
      }
      /*checkbox选中后样式  */
      checkbox .wx-checkbox-input.wx-checkbox-input-checked {
        background: #4073f6;
      }
      /*checkbox选中后图标样式  */
      checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
        width: 28rpx;
        height: 28rpx;
        line-height: 28rpx;
        text-align: center;
        font-size: 22rpx;
        color: #fff;
        background: transparent;
        transform: translate(-50%, -50%) scale(1);
        -webkit-transform: translate(-50%, -50%) scale(1);
      }
      .u-text {
        font-size: 28rpx;
        color: #707070;
      }
    }
  }
}
</style>

 faceRecognite.js(重点代码)

//是否人脸识别
//checkAliveType 0读数字（默认） 1屏幕闪烁 识别 2先检查是否可以屏幕闪烁，不可以则自动为读数字
function faceRecognition(name, idCard, checkAliveType) {
  return new Promise((resolve, reject) => {
    wx.checkIsSupportFacialRecognition({
      success: res => {
        console.log('设备支持人脸识别')
        wx.checkIsSupportFacialRecognition({
          success: res => {
            wx.startFacialRecognitionVerify({
              name: name,
              idCardNumber: idCard,
              checkAliveType: checkAliveType,
              success: res => {
                if (res.errCode == 0) {
                  resolve(res)
                }
              },
              fail: res => {
                console.log(res)
              }
            })
          },
          fail: res => {
            console.log('fail', res)
          }
        })
      },
      fail(res) {
        console.log(res)
      }
    })
  })
}

module.exports = {
  faceRecognition
}

 

login.wpy只是一部分代码，如果参考请根据自己实际需求开发，step1.wpy和faceRecognite.js是比较完成的代码。如果哪里不对也欢迎在下方留言，如果觉得适合有需要的朋友也欢迎交流学习。wepy框架开发的写法其实和其他小程序框架写法几乎雷同，不要纠结文件后缀。