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


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 相关文章推荐
HTML页面如何象ASP一样接受参数
Feb 07 Javascript
Save a File Using a File Save Dialog Box
Jun 18 Javascript
js自定义事件代码说明
Jan 31 Javascript
jQuery EasyUI API 中文文档 - PropertyGrid属性表格
Nov 18 Javascript
jQuery入门介绍之基础知识
Jan 13 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
Jan 23 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
Jul 21 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
Oct 24 Javascript
微信小程序实现顶部导航特效
Jan 28 Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
Sep 07 Javascript
layer.prompt使文本框为空的情况下也能点击确定的方法
Sep 24 Javascript
vue3中轻松实现switch功能组件的全过程
Jan 07 Vue.js
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
星际流派综述
2020/03/04 星际争霸
谈谈PHP语法(3)
2006/10/09 PHP
php中将html中的br换行符转换为文本输入中的换行符
2013/03/26 PHP
浅析PHP中的UNICODE 编码与解码
2013/06/29 PHP
[原创]后缀就扩展名为js的文件是什么文件
2007/12/06 Javascript
效率高的Javscript字符串替换函数的benchmark
2008/08/02 Javascript
javascript 写的一个简单的timer
2009/07/30 Javascript
一个JS小玩意 几个属性相加不能超过一个特定值.
2009/09/29 Javascript
javascript oop开发滑动(slide)菜单控件
2010/08/25 Javascript
JavaScript中exec函数用法实例分析
2015/06/08 Javascript
jquery validate.js表单验证入门实例(附源码)
2015/11/10 Javascript
javascript判断图片是否加载完成的方法推荐
2016/05/13 Javascript
快速掌握jQuery插件WebUploader文件上传
2016/11/07 Javascript
jquery实现图片上传前本地预览
2017/04/28 jQuery
原生js获取left值和top值的三种方法
2017/08/02 Javascript
JS实现百度网盘任意文件强制下载功能
2018/08/31 Javascript
js实现烟花特效
2020/03/02 Javascript
JavaScript的一些小技巧分享
2021/01/06 Javascript
基于element-ui封装表单金额输入框的方法示例
2021/01/06 Javascript
[02:28]DOTA2亚洲邀请赛附加赛 RECAP赛事回顾
2015/01/29 DOTA
[01:03:41]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第三场 2月2日
2021/03/11 DOTA
Python求两个list的差集、交集与并集的方法
2014/11/01 Python
python实现定时播放mp3
2015/03/29 Python
Python httplib模块使用实例
2015/04/11 Python
Python实现读取SQLServer数据并插入到MongoDB数据库的方法示例
2018/06/09 Python
django多对多表的创建,级联删除及手动创建第三张表
2019/07/25 Python
Ranorex通过Python将报告发送到邮箱的方法
2020/01/12 Python
python安装后的目录在哪里
2020/06/21 Python
简述python Scrapy框架
2020/08/17 Python
丝芙兰法国官网:SEPHORA法国
2016/09/01 全球购物
成龙霸王洗发水广告词
2014/03/14 职场文书
党的群众路线教育实践活动学习笔记
2014/11/05 职场文书
OpenCV-Python实现图像平滑处理操作
2021/06/08 Python
Python合并pdf文件的工具
2021/07/01 Python
MySql 缓存查询原理与缓存监控和索引监控介绍
2021/07/02 MySQL
Redis特殊数据类型bitmap位图
2022/06/01 Redis