微信小程序实现人脸识别登陆的示例代码


Posted in Javascript onApril 02, 2019

前言

这是一篇关于一个原创微信小程序开发过程的原创文章。涉及到的核心技术是微信小程序开发方法和百度云人脸识别接口。小程序的主体是一个用于个人密码存储的密码管理器,在登陆注册阶段,需要调用百度云人脸识别接口以及百度云在线人脸库的管理接口。本文主要涉及登陆注册模块的实现,而且不需要PHP后台代码,完全在线调用接口实现,希望后来的你能有所收获!

步骤

步骤 涉及接口(百度云)
拍摄或者相册选择 并 上传比对样本照片到 人脸库 人脸库管理接口(main:人脸注册)
拍摄照片并上传,云服务器在线比对 人脸库照片与上传图片的相似度 人脸识别接口
获取返回结果(相似度) 人脸识别接口

开发过程

1.拍摄人脸图片上传至人脸库---注册

准备工作:需要在百度云注册(或者直接用百度云盘app扫码登陆),并创建人脸识别的应用。(完全免费)

具体如下:

百度云:https://cloud.baidu.com/

注册完成后(或者直接扫码登陆),进入管理控制台->产品服务->人工智能->人脸识别->创建应用->填写必要信息->立即创建

微信小程序实现人脸识别登陆的示例代码

至此,我们已经创建好了人脸识别的应用。接下来,进入应用列表,找到我们才新建的应用,查看人脸库,我们需要创建用户组(用来集中管理小程序的用户人脸照片)

微信小程序实现人脸识别登陆的示例代码

新建组(id不要太复杂,后面还要用的。)

微信小程序实现人脸识别登陆的示例代码

至此,我们已经完成了在云上的所有必要操作。下面,我们在小程序中,拍照上传即可。

拍照上传

需要在pages中新建一个目录,用来承载我们的登陆注册模块。就假定为 camera{camera.js camera.wxml camera.wxss camera.json}

主要文件自然是 *.wxml 和 *.js 了。

camera.wxml

<!-- camera.wxml相机大小需要从重新设置 -->
<camera
 device-position="front"
 flash="off"
 binderror="error"
 style="width: 100%; height: 400px;"
></camera>

<!-- 需要使用 button 来授权登录 -->
<button
 wx:if="{{canIUse}}"
 open-type="getUserInfo"
 bindgetuserinfo="bindGetUserInfo"
 type="primary"
>
 授权
</button>
<view wx:else>请升级微信版本</view>

<!-- 拍照按钮 -->
<button type="primary" bindtap="takePhoto"> 拍照 </button>

<button bindtap='btnreg'> 注册须知 </button>

我所谓的授权是,我需要获取用户微信的昵称来充当我人脸库照片的用户id,你可以不需要(设置成一样的,如果是只有一个人使用的话。)

camera.js

调用wxAPI takePhoto() 拍照并获取src -> wx.request() 访问百度云 用先前创建的应用的API Key & Screct Key 获取 access_token ->wx.request() 访问百度云 上传 所拍照片(要经过base64编码)详情可参考小程序API文档 以及 百度云API文档(接口以及于18年升级至v3)

// camera.js
const app = getApp()
Page({
 data: {
  canIUse: wx.canIUse('button.open-type.getUserInfo'),
  nickName : "",
  src : "",//图片的链接
  token: "",
  base64: "",
  msg:""
 },

 //拍照
 takePhoto() {
  var that = this;
  //拍照
  const ctx = wx.createCameraContext()
  ctx.takePhoto({
   quality: 'high',
   success: (res) => {
    this.setData({
     src: res.tempImagePath//获取图片
    })

    //图片base64编码
    wx.getFileSystemManager().readFile({
     filePath: this.data.src, //选择图片返回的相对路径
     encoding: 'base64', //编码格式
     success: res => { //成功的回调
      this.setData({
       base64: res.data
      })
     }
    })
   }//拍照成功结束

  })//调用相机结束

   //acess_token获取,qs:需要多次尝试
   wx.request({
    url: 'https://aip.baidubce.com/oauth/2.0/token', //是真实的接口地址
    data: {
     grant_type: 'client_credentials',
     client_id: '**********************',//用你创建的应用的API Key
     client_secret: '************************'//用你创建的应用的Secret Key
    },
    header: {
     'Content-Type': 'application/json' // 默认值
    },
    success(res) {
     that.setData({
      token: res.data.access_token//获取到token
     })
    }
   })
   
   //上传人脸进行注册-----test
   wx.request({
    url: 'https://aip.baidubce.com/rest/2.0/face/v3/faceset/user/add?access_token=' + this.data.token,
    method: 'POST',
    data: {
     image: this.data.base64,
     image_type: 'BASE64',
     group_id: '********',//自己建的用户组id
     user_id: this.data.nickName//这里获取用户昵称
    },
    header: {
     'Content-Type': 'application/json' // 默认值
    },
    success(res) {
     that.setData({
      msg: res.data.error_msg
     })
     console.log(that.data.msg)
     //做成功判断
     if (that.data.msg == 'SUCCESS') {//微信js字符串请使用单引号
      wx.showToast({
       title: '注册成功',
       icon: 'success',
       duration: 2000
      })
      wx.switchTab({
       url: '../UI/ui',
      })

     }

    }
   }),
   
   //失败尝试
   wx.showToast({
    title: '请重试',
    icon: 'loading',
    duration: 500
   })
 },
 error(e) {
  console.log(e.detail)
 },

//获取用户信息
 bindGetUserInfo: function(e){
  this.setData({
   nickName: e.detail.userInfo.nickName
  })
  wx.showToast({
   title: '授权成功',
   icon: 'success',
   duration: 1000
  })
 },

//先授权登陆,再拍照注册
 btnreg:function(){
  wx.showModal({
   title: '注册须知',
   content: '先授权登陆,再拍照注册哦!网络可能故障,如果不成功,请再试一下!',
  })
 }

})

这里要多试几次,我以为可能由于网络的问题,会调用失败, 但其实是wx.request()是并发的,所以获取access_token和上传请求会冲突(可能没有获取到access_token就上传,会发生错误)。

暂时的解决方案:

将上传人脸的request放在access_token获取请求的success函数中,这样一来,就可以保证获取到access_token才进行上传操作。

另外,要开启微信小程序 IDE 的 不校验合法域名的选项(设置->项目设置 -> 勾选 不校验......)

至此,注册 就完成了(即获取用户昵称、拍照、上传人脸库注册。)

2.拍照上传在线人脸识别---登陆

找到指定用户组中与上传照片最相似的人脸并返回,比对结果。

我们仍然需要再建立一个页面来承载我们的登陆相关操作。就假定为 camera2{camera2.js camera2.wxml camera2.wxss camera2.json}

camera2.wxml

<!-- camera.wxml -->
<camera
 device-position="front"
 flash="off"
 binderror="error"
 style="width: 100%; height: 300px;"
></camera>
<button type="primary" bindtap="takePhoto">拍照</button>
<view>预览</view>
<image mode="widthFix" src="{{src}}"></image>

camera2.js 与注册大同小异,区别是图片上传的接口不同(这次是 https://aip.baidubce.com/rest/2.0/face/v3/search 人脸搜素),获取access_token、拍照、照片base64编码都相同。

// camera.js
Page({
 data: {
  base64: "",
  token: "",
  msg: null
 },
 //拍照并编码
 takePhoto() {
  //拍照
  const ctx = wx.createCameraContext()
  ctx.takePhoto({
   quality: 'high',
   success: (res) => {
    this.setData({
     src: res.tempImagePath
    })
   }
  })

  var that = this;
  //图片base64编码
  wx.getFileSystemManager().readFile({
   filePath: this.data.src, //选择图片返回的相对路径
   encoding: 'base64', //编码格式
   success: res => { //成功的回调
    that.setData({
     base64: res.data
    })
   }
  })

  //acess_token获取
  wx.request({
   url: 'https://aip.baidubce.com/oauth/2.0/token', //真实的接口地址
   data: {
    grant_type: 'client_credentials',
    client_id: '**************************',
    client_secret: '*******************************'//用自己的
   },
   header: {
    'Content-Type': 'application/json' // 默认值
   },
   success(res) {
    that.setData({
     token: res.data.access_token//获取到token
    })
   }
  })

  //上传人脸进行 比对
  wx.request({
   url: 'https://aip.baidubce.com/rest/2.0/face/v3/search?access_token=' + that.data.token,
   method: 'POST',
   data: {
    image: this.data.base64,
    image_type: 'BASE64',
    group_id_list: '********'//自己建的用户组id
   },
   header: {
    'Content-Type': 'application/json' // 默认值
   },
   success(res) {
    that.setData({
     msg: res.data.result.user_list[0].score
    })
    if(that.data.msg > 80){
     wx.showToast({
      title: '验证通过',
      icon: 'success',
      duration: 1000
     })
     //验证通过,跳转至UI页面
     wx.switchTab({
      url: '../UI/ui',
     })
    }
   }
  });

  wx.showToast({
   title: '请重试',
   icon: 'loading',
   duration: 500
  })
 },
 error(e) {
  console.log(e.detail)
 }
})

至此,我们的登陆也搞定了。

注意:上述的 登陆注册 是一个某个小程序的一个模块。关系如下

微信小程序实现人脸识别登陆的示例代码

所以,需要在index页面中设置按钮,来跳转到注册以及登陆页面,然后注册登陆成功后,再跳转至其他功能页面。

后记

这次小程序实战,对我自己也是一个不小的挑战,对比各个云接口、看接口文档、查资料,耗费了大概十来天。但是,我相信大有裨益。另外,对我参考的博客和回答的诸位表示感谢。我们一起前进!

参考资料

【1】微信小程序开发文档

【2】百度云接口文档.v3版

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript方法和技巧大全
Dec 27 Javascript
js下拉菜单语言选项简单实现
Sep 23 Javascript
JQuery Highcharts 动态生成图表的方法
Nov 15 Javascript
js实现div闪烁原理及实现代码
Jun 24 Javascript
JavaScript判断变量是对象还是数组的方法
Aug 28 Javascript
开源的javascript项目Kissy介绍
Nov 28 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
Nov 29 Javascript
vue单个组件实现无限层级多选菜单功能
Apr 10 Javascript
使用JS实现导航切换时高亮显示的示例讲解
Aug 22 Javascript
Angular angular-file-upload文件上传的示例代码
Aug 23 Javascript
react项目如何使用iconfont的方法步骤
Mar 13 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
May 16 Javascript
Angular7中创建组件/自定义指令/管道的方法实例详解
Apr 02 #Javascript
Node.js中package.json中库的版本号(~和^)
Apr 02 #Javascript
基于Vue插入视频的2种方法小结
Apr 02 #Javascript
vue踩坑记-在项目中安装依赖模块npm install报错
Apr 02 #Javascript
小程序实现自定义导航栏适配完美版
Apr 02 #Javascript
es6 symbol的实现方法示例
Apr 02 #Javascript
微信小程序设置全局请求URL及封装wx.request请求操作示例
Apr 02 #Javascript
You might like
PHP用户指南-cookies部分
2006/10/09 PHP
php 删除记录实现代码
2009/03/12 PHP
php操作csv文件代码实例汇总
2014/09/22 PHP
php 升级到 5.3+ 后出现的一些错误,如 ereg(); ereg_replace(); 函数报错
2015/12/07 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
简单的php购物车代码
2020/06/05 PHP
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
2011/12/31 Javascript
基于jquery &amp; json的省市区联动代码
2012/06/26 Javascript
JavaScript中的面向对象介绍
2012/06/30 Javascript
使用jquery组件qrcode生成二维码及应用指南
2015/02/22 Javascript
nodejs中使用多线程编程的方法实例
2015/03/24 NodeJs
JavaScript面向对象的实现方法小结
2015/04/14 Javascript
js实现横向伸展开的二级导航菜单代码
2015/08/28 Javascript
javascript原生ajax写法分享
2016/04/10 Javascript
jquery对象和DOM对象的相互转换详解
2016/10/18 Javascript
详解nodejs 文本操作模块-fs模块(二)
2016/12/22 NodeJs
JS中微信小程序自定义底部弹出框
2016/12/22 Javascript
angular-cli修改端口号【angular2】
2017/04/19 Javascript
js操作二进制数据方法
2018/03/03 Javascript
vue多层嵌套路由实例分析
2019/03/19 Javascript
微信小程序实现发微博功能的示例代码
2020/06/24 Javascript
python端口扫描系统实现方法
2014/11/19 Python
浅谈python配置与使用OpenCV踩的一些坑
2018/04/02 Python
解决Python pandas df 写入excel 出现的问题
2018/07/04 Python
利用Python如何制作好玩的GIF动图详解
2018/07/11 Python
深入解析python中的实例方法、类方法和静态方法
2019/03/11 Python
Python使用内置函数setattr设置对象的属性值
2020/10/16 Python
Lovedrobe官网:英国领先的大码服装品牌
2019/09/19 全球购物
大学生职业生涯规划书前言
2014/01/09 职场文书
大学生先进事迹材料
2014/02/16 职场文书
三方合作协议书范本
2014/04/18 职场文书
2014小学二年级班主任工作总结
2014/12/05 职场文书
教师教育教学随笔
2015/08/15 职场文书
人生一定要学会的三样东西:放下、忘记、珍惜
2019/08/21 职场文书
golang特有程序结构入门教程
2021/06/02 Python
Three.js实现雪糕地球的使用示例详解
2022/07/07 Javascript