微信小程序实现人脸识别登录

hello hello~ ，这里是 code袁~💖💖 ，欢迎大家点赞🥳🥳关注💥💥收藏🌹🌹🌹

🦁作者简介：一名喜欢分享和记录学习的在校大学生
💥个人主页：code袁的博客
💥 个人QQ：2647996100
🐯 个人wechat：code8896
code袁系列专栏导航
1.《毕业设计与课程设计》本专栏分享一些毕业设计的源码以及项目成果。🥰🥰🥰
2.《微信小程序开发》本专栏从基础到入门的一系开发流程，并且分享了自己在开发中遇到的一系列问题。🤹🤹🤹
3.《vue开发系列全程线路》本专栏分享自己的vue的学习历程。

非常期待和您一起在这个小小的互联网世界里共同探索、学习和成长。💝💝💝 ✨✨ 欢迎订阅本专栏 ✨✨ 

1. 需求分析

人脸识别登录是一种基于生物特征的身份验证技术，近年来随着人工智能和计算机视觉技术的发展而逐渐普及。以下是人脸识别登录的需求背景分析：

1. 安全性需求

• 提高安全性：传统的用户名和密码登录方式容易受到攻击，如密码被盗、暴力破解等。人脸识别通过生物特征进行身份验证，增加了安全性。
• 防止身份伪造：人脸识别系统可以通过活体检测技术，防止使用照片或视频进行身份冒充。

2. 用户体验

• 便捷性：用户无需记住复杂的密码，只需通过摄像头扫描面部即可快速登录，提升了用户体验。
• 快速登录：人脸识别技术能够在几秒钟内完成身份验证，适合需要快速访问的场景，如金融服务、社交媒体等。

3. 应用场景广泛

• 移动设备：智能手机、平板电脑等移动设备普遍采用人脸识别技术作为解锁方式，满足用户对便捷性的需求。
• 企业应用：在企业环境中，人脸识别可以用于考勤管理、门禁控制等，提高管理效率。
• 公共安全：在公共场所（如机场、车站等）使用人脸识别技术进行身份验证，有助于提升安全防范能力。

4. 技术发展

• 深度学习技术：随着深度学习和计算机视觉技术的进步，人脸识别的准确性和速度得到了显著提升，使其在实际应用中更加可靠。
• 硬件普及：现代设备（如智能手机、监控摄像头等）普遍配备高质量的摄像头，为人脸识别提供了良好的硬件基础。

5. 法规与隐私保护

• 合规性需求：随着数据保护法规（如GDPR等）的实施，企业在使用人脸识别技术时需要遵循相关法律法规，确保用户隐私得到保护。
• 用户信任：为了获得用户的信任，企业需要透明地告知用户人脸数据的使用方式，并采取必要的安全措施来保护这些数据。

6. 市场趋势

• 市场需求增长：随着人们对安全性和便捷性的关注增加，人脸识别技术的市场需求持续增长，推动了相关产品和服务的发展。
• 竞争优势：企业通过引入人脸识别登录系统，可以在激烈的市场竞争中获得技术优势，吸引更多用户。

2.项目实现

2.1 开通百度智能云API

登录到百度智能云

注册登录账号后，需要进行个人的认证。认证完成后

大概有1000多次的免费额度

创建应用后会生成API Key和Secret Key后面会用到

3.代码实现

3.1注册

当用户注册时，需要录入人脸，会调用摄像头进行拍照。然后将照片转化为Base64的格式。存储到数据库中

wxml

<view  class="camera1"><view class="title">请将人脸移入框内</view><camera style="width: 100%; height:500rpx;border-radius: 100%; border:8rpx solid #ff5556;" device-position="front"></camera><button class="bt" style="background-color: {{themColor}}; width: 550rpx;" bind:tap="getPicBase">拍摄</button>
</view>

wxss

.title{text-align: center;font-size: 40rpx;margin-bottom: 100rpx;
}
.camera1{margin: 200rpx auto;height: 600rpx;width: 500rpx;border-radius: 20rpx;
}

js

  getPicBase(){const ctx=wx.createCameraContext()face.getPicFromcenavm(ctx).then(res=>{this.setData({Base64:res,checkFace:false})})},

face.js封装

function getPicFromcenavm(ctx){return new Promise(function(resolve, reject){ctx.takePhoto({quality:'low',success: (res) => {getBase64(res.tempImagePath).then(function(res2){console.log(res2);resolve(res2.data);});}})})
}function getBase64(tempImagePath){return new Promise(function (resolve, reject){wx.getFileSystemManager().readFile({filePath: tempImagePath,encoding:"base64",success:function(data){resolve(data)}})})
}
module.exports={getPicFromcenavm:getPicFromcenavm
}

3.2 登录

当用户选择人脸登录时，将用户登录时的人脸拍照下来转化为Base64与用户数据中的注册时的Base64的数据一起发送到百度的人脸比对。比对完后会返回一个相似度。当相似度大于90时。即同一个人。

wxml

<view hidden="{{!checkFace}}" class="camera1"><view class="title">请将人脸移入框内</view><camera style="width: 100%; height:500rpx;border-radius: 100%; border:8rpx solid #ff5556;" device-position="front"></camera><button class="bt" style="background-color: {{themColor}}; width: 550rpx;" bind:tap="getPicBase">登录</button>
</view>

wxss

.title{text-align: center;font-size: 40rpx;margin-bottom: 100rpx;
}
.camera1{margin: 200rpx auto;height: 600rpx;width: 500rpx;border-radius: 20rpx;
}

js
注意
文档资料

  //刷脸登录getPicBase(){const baseOld=wx.getStorageSync('Base64')if(baseOld==''){wx.showToast({title: '还未录入人脸',icon:'error'})}else{const ctx=wx.createCameraContext()face.getPicFromcenavm(ctx).then(res1=>{wx.request({            //请求百度api接口url: 'https://aip.baidubce.com/oauth/2.0/token',data: {               //请求时传送我们的账号信息进行认证grant_type: 'client_credentials',client_id: '',//APIKeyclient_secret: '',//SecretKey},success(res) {let token = res.data.access_token wx.request({url: 'https://aip.baidubce.com/rest/2.0/face/v3/match?access_token='+token,method: 'post',   //请求固定为post请求header: {"Content-type": "application/json"},data:JSON.stringify([{"image":res1,"image_type": "BASE64","face_type": "LIVE"},{"image":baseOld,"image_type": "BASE64","face_type": "LIVE"}]),success:(res)=> {console.log(res.data)if(res.data.result.score>90){//执行后续操作}else{wx.showToast({title: res.data.error_msg,icon:'error'})}}})}})}},

🎉写在最后

🍻伙伴们，如果你已经看到了这里，觉得这篇文章有帮助到你的话不妨点赞👍或 Star ✨支持一下哦！手动码字，如有错误，欢迎在评论区指正💬~

你的支持就是我更新的最大动力💪~