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


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 相关文章推荐
jQuery 页面 Mask实现代码
Jan 09 Javascript
jquery中通过过滤器获取表单元素的实现代码
Jul 05 Javascript
javascript:history.go()和History.back()的区别及应用
Nov 25 Javascript
JS中处理时间之setUTCMinutes()方法的使用
Jun 12 Javascript
鼠标经过子元素触发mouseout,mouseover事件的解决方案
Jul 26 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
Aug 24 Javascript
原生JS实现匀速图片轮播动画
Oct 18 Javascript
关于json字符串与实体之间的严格验证代码
Nov 10 Javascript
利用原生JS与jQuery实现数字线性变化的动画
Feb 24 Javascript
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
vue-cli3+typescript新建一个项目的思路分析
Aug 06 Javascript
vue实现弹幕功能
Oct 25 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
探讨:如何通过stats命令分析Memcached的内部状态
2013/06/14 PHP
从PHP的源码中深入了解stdClass类
2014/04/18 PHP
详解WordPress中提醒安装插件以及隐藏插件的功能实现
2015/12/25 PHP
php xhprof使用实例详解
2019/04/15 PHP
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
2007/07/21 Javascript
IE8 引入跨站数据获取功能说明
2008/07/22 Javascript
jQuery实现的立体文字渐变效果
2010/05/17 Javascript
JS中的this变量的使用介绍
2013/10/21 Javascript
JS复制到剪贴板示例代码
2013/10/30 Javascript
原生js ActiveXObject获取execl里面的值
2013/11/01 Javascript
浅谈javascript中的instanceof和typeof
2015/02/27 Javascript
用Node.js通过sitemap.xml批量抓取美女图片
2015/05/28 Javascript
探讨JavaScript语句的执行过程
2016/01/28 Javascript
js实现兼容PC端和移动端滑块拖动选择数字效果
2017/02/16 Javascript
详解Vue的computed(计算属性)使用实例之TodoList
2017/08/07 Javascript
学习JS中的DOM节点以及操作
2018/04/30 Javascript
微信小程序实现美团菜单
2018/06/06 Javascript
opencv 识别微信登录验证滑动块位置
2018/08/07 Javascript
浅析Vue 中的 render 函数
2020/02/28 Javascript
深入分析jQuery.one() 函数
2020/06/03 jQuery
简单介绍Python的轻便web框架Bottle
2015/04/08 Python
python 统计数组中元素出现次数并进行排序的实例
2018/07/02 Python
Python中super函数用法实例分析
2019/03/18 Python
解决pycharm 远程调试 上传 helpers 卡住的问题
2019/06/27 Python
pytorch实现用Resnet提取特征并保存为txt文件的方法
2019/08/20 Python
python高阶函数map()和reduce()实例解析
2020/03/16 Python
美国著名童装品牌:OshKosh B’gosh
2016/08/05 全球购物
OnePlus加拿大官网:中国国际化手机品牌
2020/10/13 全球购物
中文专业毕业生自荐书范文
2014/01/04 职场文书
关于赌博的检讨书
2014/01/24 职场文书
电工技术比武方案
2014/05/11 职场文书
2014年网络管理员工作总结
2014/12/01 职场文书
怎样写离婚协议书
2015/01/26 职场文书
客房部经理岗位职责
2015/02/02 职场文书
2015年妇幼保健工作总结
2015/05/19 职场文书
HTML中的表格元素介绍
2022/02/28 HTML / CSS