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


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 innerHTML使用分析
Dec 03 Javascript
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
Dec 27 Javascript
JS 两个字符串时间的天数差计算
Aug 25 Javascript
ExpressJS入门实例
Jan 14 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
Mar 16 Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
Mar 01 Javascript
模仿password输入框的实现代码
Jun 07 Javascript
JS防止网页被嵌入iframe框架的方法分析
Sep 13 Javascript
jQuery实现简单的网页换肤效果示例
Sep 18 Javascript
JQuery扩展对象方法操作示例
Aug 21 jQuery
微信小程序新手教程之启动页的重要性
Mar 03 Javascript
javascript读取本地文件和目录方法详解
Aug 06 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
vBulletin Forum 2.3.xx SQL Injection
2006/10/09 PHP
php实现网页缓存的工具类分享
2015/07/14 PHP
PHP实现微信发红包程序
2015/08/24 PHP
thinkPHP框架整合tcpdf插件操作示例
2018/08/07 PHP
PHP快速排序算法实现的原理及代码详解
2019/04/03 PHP
PHP程序员必须知道的两种日志实例分析
2020/05/14 PHP
用jQuery中的ajax分页实现代码
2011/09/20 Javascript
js 判断控件获得焦点的示例代码
2014/03/04 Javascript
js中跨域方法原理详解
2015/07/19 Javascript
jQuery图片加载显示loading效果
2016/11/04 Javascript
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
2017/10/24 Javascript
vue 自定义 select内置组件
2018/04/10 Javascript
微信小程序支付PHP代码
2018/08/23 Javascript
json前后端数据交互相关代码
2018/09/19 Javascript
Vue中的vue-resource示例详解
2018/11/02 Javascript
Vue核心概念Action的总结
2019/01/18 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
2019/08/20 Javascript
[16:04]DOTA2海涛带你玩炸弹 9月5日更新内容详解
2014/09/05 DOTA
利用Anaconda完美解决Python 2与python 3的共存问题
2017/05/25 Python
Python实现七彩蟒蛇绘制实例代码
2018/01/16 Python
python 变量初始化空列表的例子
2019/11/28 Python
python异常处理try except过程解析
2020/02/03 Python
PyTorch中clone()、detach()及相关扩展详解
2020/12/09 Python
python实现计算图形面积
2021/02/22 Python
CK美国官网:Calvin Klein
2016/08/26 全球购物
印刷工程专业应届生求职信
2013/09/29 职场文书
行政管理专业推荐信
2013/11/02 职场文书
研究生毕业鉴定
2014/01/29 职场文书
《二泉映月》教学反思
2014/04/15 职场文书
槐乡的孩子教学反思
2014/04/27 职场文书
党员个人承诺书
2015/04/27 职场文书
2015年酒店工作总结
2015/04/28 职场文书
反腐倡廉学习心得体会范文
2015/08/15 职场文书
小学数学新课改心得体会
2016/01/22 职场文书
PHP连接MSSQL数据库案例,PHPWAMP多个PHP版本连接SQL Server数据库
2021/04/16 PHP
有趣的二维码:使用MyQR和qrcode来制作二维码
2021/05/10 Python