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

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: '',//APIKey
              client_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 ✨支持一下哦！手动码字，如有错误，欢迎在评论区指正💬~

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