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

前言

这是一篇关于一个原创微信小程序开发过程的原创文章。涉及到的核心技术是微信小程序开发方法和百度云人脸识别接口。小程序的主体是一个用于个人密码存储的密码管理器,在登陆注册阶段,需要调用百度云人脸识别接口以及百度云在线人脸库的管理接口。本文主要涉及登陆注册模块的实现,而且不需要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版

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

(0)

相关推荐

  • 小程序实现人脸识别功能(百度ai)

    本文介绍了小程序实现人脸识别功能,分享给大家,具体如下: 文档中心:https://ai.baidu.com/docs#/Begin/a2bbf4b2 接入流程 1. 按照文档获取AppID.API Key.Secret Key,进行Access Token(用户身份验证和授权的凭证)的生成 const getBaiduToken = function () { return new Promise((resolve, reject) => { //自行获取APIKey.SecretKey co

  • 微信小程序实现人脸识别

    本文为大家分享了微信小程序人脸识别的具体代码,供大家参考,具体内容如下 首先,我们要有开发者工具,今天所说的是后端和前端联合起来实现的. 在PHP的控制器中写一个upload方法,代码如下: public function upload($id=''){ if(empty($id)){ return false; } $no = M("student")->where("id={$id}")->getField('no'); $dir = ".

  • PHP实现微信小程序人脸识别刷脸登录功能

    首先我们先确认我们的百度云人脸库里已经上传了我们的个人信息照片 然后我们在后台写刷脸登陆的接口login我们要把拍照获取的照片存储到服务器 public function login(){ // 上传文件路径 $dir = "./Uploads/temp/"; if(!file_exists($dir)){ mkdir($dir,0777,true); } $upload = new \Think\Upload(); $upload->maxSize = 2048000 ;//

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

    前言 这是一篇关于一个原创微信小程序开发过程的原创文章.涉及到的核心技术是微信小程序开发方法和百度云人脸识别接口.小程序的主体是一个用于个人密码存储的密码管理器,在登陆注册阶段,需要调用百度云人脸识别接口以及百度云在线人脸库的管理接口.本文主要涉及登陆注册模块的实现,而且不需要PHP后台代码,完全在线调用接口实现,希望后来的你能有所收获! 步骤 步骤 涉及接口(百度云) 拍摄或者相册选择 并 上传比对样本照片到 人脸库 人脸库管理接口(main:人脸注册) 拍摄照片并上传,云服务器在线比对 人脸

  • 微信小程序实现拨打电话功能的示例代码

    1.在对应需要拨打电话的标签那里绑定事件(使用的标签不固定,可以是text.view等) 例子: <text class="phone" bindtap="callPhone">400-9121-211</text> 2.在对应的事件方法里面写入 wx.makePhoneCall方法 例子: callPhone() { wx.makePhoneCall({ phoneNumber: '400-9121-211' //仅为示例,并非真实的电话号

  • 微信小程序实现搜索关键词高亮的示例代码

    1,前言 项目中碰到一个需求,搜索数据并且关键词要高亮显示,接到需求,马上开干.先上效果图.源码已经做成了小程序代码片段,放入了GitHub了,文章底部有源码链接. 2,思路 博主第一时间想到的就是使用split,根据搜索的关键词,处理后台返回的数据,然后indexOf找到关键字,给每个字添加deep字段,deep为true,则高亮,为false,则正常.由于是小程序,所以楼主直接做成了一个高亮组件,代码很简单,实现步骤如下. 3,代码逻辑 模拟数据如下 list:[ '武汉大学', '华中科技

  • 微信小程序拖拽排序列表的示例代码

    拖拽排序列表 思路 界面分为两层: 底层,正常列表展示,拖拽的时候不做处理(大牛直接加了动画,原谅我技艺不精,还没实现) 顶层,movable-view组件,不长按不展示,之后长按才展示,且没有点击事件. 事件 主要监听:longpress , touchmove , touchend 三个事件 longpress 保障长按才有效,并设定许多其他值. touchmove 滑动的时候触发 判断是否需要滑动页面,因为 movable-area组件 滑动事件被catch掉,无法滑动: 记录滑动经过的项

  • 微信小程序实现手写签名的示例代码

    目录 1.效果图 2.相关代码 canvas代码 js相关 在微信小程序上实现手写签名,获取canvascontext新版本和旧版本有点坑,新版本在获取canvas后如果页面有滑动,则签名坐标出现异常(在微信开发者工具上会出现2022-2-17),但是在真机上即使滑动也不会出现异常,为了防止出现问题,暂时使用旧版本获取canvascontext 1.效果图 2.相关代码 canvas代码 新版2d canvas <canvas id="canvas" class="ca

  • 微信小程序实现自定义弹窗组件的示例代码

    目录 编写组件代码 Dialog.wxml Dialog.js Dialog.wxss 调用自定义组件 上一篇中说的是小程序自带的弹窗组件,今天,我们来试试小程序的自定义组件,我们自定义一个带确定取消的弹窗组件. 首先,放一下,最终的效果图: 这是我们最后要实现的效果 那么,首先,我们创建一个组件 新建component文件夹存放我们的组件,里边存放的就是我们所用的组件,我们今天要做的事弹出框,新建文件夹popup存放我们的组件模板,点击右键选择新建component,就会自动生成组件的模板wx

  • 微信小程序之页面拦截器的示例代码

    场景 小程序有52个页面,其中13个页面无需任何身份,另外39个页面需要系统角色.对于这39个页面,如果微信用户没有系统角色,则跳转到登录页. 是否有系统角色信息需要通过异步请求来获取. 需求分析&实现 对需求进行抽象,其实要的就是一个过滤器,对小程序页面的访问进行过滤,符合条件的通过,不符合条件进行其他处理. 使用过php的laravel框架的童鞋,肯定一下子就联想到了laravel框架的http中间件: HTTP 中间件提供一个方便的机制来过滤进入应用程序的 HTTP 请求,例如,Larav

  • 微信小程序websocket聊天室的实现示例代码

    背景 最近做了一个微信小程序的即时通讯功能,之前我也做过node.js的websocket服务,不过是在web端应用的socket.io服务.小程序本身对http.websocket等连接均有诸多限制,所以这次项目选择了node.js自带的ws模块. 服务端 初始化一个node.js项目,引入ws模块 const webSocket = require('ws'); 创建websocket实例,并设置监听端口 const wss = new webSocket.Server({ port: 30

  • Laravel 微信小程序后端实现用户登录的示例代码

    接上篇微信小程序后端搭建:分享:Laravel 微信小程序后端搭建 后端搭建好后第一件事就是用户登录认证,简单实现微信小程序登录认证 1.user 模型 use Laravel\Passport\HasApiTokens; 新增 use HasApiTokens, Notifiable; protected $fillable = [ 'id', 'name', 'email', 'email_verified_at', 'username', 'phone', 'avatar',//我用来把微

随机推荐