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

时间：2021-08-26 来源：互联网编辑：宝哥软件园浏览：次

前言

这是一篇关于一个原创微信小程序开发过程的原创文章。涉及的核心技术是微信小程序开发方法和百度云人脸识别界面。小程序的主体是个人密码存储的密码管理器。在登录注册阶段，需要调用百度云人脸识别界面和百度云在线人脸数据库管理界面。本文主要讨论登录注册模块的实现，在没有PHP后台代码的情况下，完全在线调用界面。希望你以后能有所收获！

步骤

步骤涉及界面(百度云)拍摄或相册选择，将对比样张照片上传到人脸库管理界面(main:人脸注册)拍摄照片并上传。云服务器比较人脸库照片和在线上传图片的相似度。人脸识别界面获取返回结果(相似度)。人脸识别界面开发流程、

1.拍摄人脸照片并上传到人脸数据库-注册

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

具体如下：

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

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

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

创建一个新的组(id不应该太复杂，应该稍后使用。)

至此，我们已经在云上完成了所有必要的操作。接下来，我们可以在小程序中上传照片。

照片上传

我们需要在页面中创建一个新的目录来存放我们的登录注册模块。假设是camera { camera . jscamera . wxmlcamera . wxsscamera . JSON }

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

camera.wxml

！- camera.wxml相机大小需要从- camera设备-位置=' front ' flash=' off ' bind error=' error ' style=' width : 100%；' height: 400px'/相机！-需要使用按钮授权登录-button wx : if=' { { canius } } ' open-type=' getuser info ' bindguteuserinfo=' bindguteuserinfo ' type=' primary ' authorize/button view wx :否则请升级微信版本/视图！-拍照按钮-按钮类型=' primary' bindtap=' take photo '拍照/buttonbutton bindtap='btnreg '注册通知/按钮我所谓的授权就是我需要获取用户微信的昵称来作为我的人脸库照片的用户id，如果只有一个人使用，就不需要设置为相同。)

camera.js

调用wxAPI takePhoto()拍照，获取src-wx.request()访问百度云。Get access_token -wx.request()访问百度云上传的照片(以base64编码为准)。具体请参考小程序API文档和百度云API文档(18年接口并升级到v3)

//camera . jsconst app=GetApp()Page({ data : { canuses : wx . CAniuse(' button . open-type . GetUserInfo ')，昵称： ' '，src : ' '，//图片的链接为token: ' '，base64: ' '，msg:''}，//take photo(){ var那=this//拍照const CTX=wx . createcamera context()CTX . take photo({ quality : ' high '，Success 3360(RES)={ this . setdata({ src : res.tempImagePath//获取图片})//图片base64代码wx.getFileSystemManager()。read file({ file path : this . data . src，//选择图片返回的相对路径，encoding: 'base64 '，//编码格式success: res={//成功回调this。setdata ({base643360res。data })})}//拍摄成功结束})//调用camera to end //acess_token采集，wx . request({ QS : ' https://aip.baidubce.com/oauth/2.0/token',//is)您创建的应用程序的真实接口地址data : { grant _ type : ' Client _ credentials '，Client _ id : ' * * * * * * * * * * * * * * * * * * * * * * secret : ' * * * * * * * * * * * * * * * * * * * * *。header : { ' content-type ' : ' application/JSON '//default value }，Success(RES){ that . setdata({ token : RES . data . access _ token//get token })})//上传face to register-testwx . request({ URL : ' https://AIP . baidubce.com/rest/2.0/face/v3/face set/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//},头： { content-type ' : ' application/JSON '/default value }中获取此处的用户昵称，Success (RES) {that。/UI/UI '，})})。//尝试wx.showToast失败({ title: '请重试'，icon : '正在加载，持续时间： 500})}，错误(e) {console.log (e.detail)}，//获取用户信息bindinguserinfo :函数(e){ this . setdata({昵称： e . detail . userinfo . nickname })wx . show toast({ title 3: '授权成功'，Icon : '成功'，持续时间网络可能已关闭，如果不成功，请重试！})})在这里试几次。我以为调用可能会因为网络问题而失败，但实际上wx.request()是并发的，所以获取access_token和上传的请求会发生冲突(没有获取access_token的上传可能会导致错误)。

临时解决方案：

上传人脸的请求放在access_token获取请求的成功函数中，这样只有获取到access_token后才能进行上传操作。

另外，需要在微信小程序IDE中开启不验证合法域名的选项(设置-项目设置-勾选不验证.)

此时注册完成(即获取用户昵称、拍照、上传人脸数据库进行注册)。)

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

在指定的用户组中找到与上传的照片最相似的人脸，将其返回，并比较结果。

我们仍然需要创建另一个页面来执行我们的登录相关操作。假设是camera 2 { camera 2 . js camera 2 . wxml camera 2 . wxss camera 2 . JSON }

camera2.wxml

！-camera . wxml-camera device-position=' front ' flash=' off ' binder error=' error ' style=' width : 100%；' height: 300px'/camera button type=' primary ' bind tap=' take photo '拍照/button view preview/view image mode=' width fix ' src=' http : { { src } } '/imagecamera 2 . js类似于注册。不同的是上传图片的界面不同(这次是https://aip.baidubce.com/rest/2.0/face/v3/search人脸搜索)，access_token、拍照、photo base64编码都是一样的。

//camera . js page({ data : { base 64: ' '，token: ' '，msg: null }，//拍照并编码takePhoto() {//拍照const CTX=wx . createcamera context(). CTX . take photo({ quality : ' high '，success :(RES)={ this . setdata({ src 3360 RES . temp image path })}))//图片base64编码wx.getfilesystemmanager。read file({ file path : this . data . src，//选择图片编码： 'base64 '返回的相对路径。//编码格式success: res={//成功回调that . setdata({ base 643360 RES . data })})//acess _ token获取wx . request({ URL 3360 ' https://aip.baidubce.com/oauth/2.0/token '，//真实接口地址data : { grant _ type : ' Client _ credentials '，client _ id:' * * * * * * * * * * * * *，Client _ secret : ' * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */使用您自己的success(RES){ that . setdata({ token : RES . data . access _ token//get 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}，标头： { ' content-type ' : ' application/JSON '/default value }，Success (res) {that。setdata ({msg:res。数据。结果。user _ list [0]。得分})如果(那个。数据。msg80) {wx。showtoast ({title : '已验证'，Icon : '成功'，持续时间： 1000 })//已验证，跳转到UI页面wx.switchtab ({URL : './UI/UI '，})} }；Wx.showToast({ title: '请重试'，图标： '正在加载'，持续时间： 500})}，错误(e) {console.log (e.detail)})到目前为止，我们的登录已经完成。

注意：以上登录注册是某个小程序的一个模块。关系如下