人脸识别登录Django4+Vue2 百度API接口

最新推荐文章于 2024-05-09 11:06:54 发布

小川zs

最新推荐文章于 2024-05-09 11:06:54 发布

阅读量396

点赞数 5

分类专栏： vue2 文章标签： django vue.js 经验分享

本文链接：https://blog.csdn.net/CWK13400405244/article/details/129931353

版权

vue2 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

人脸识别登录Django4+Vue2 百度API接口

百度云操作

1、注册百度账号并实名认证

百度云登录网址

2、点击领取免费资源

全部选择就行，然后选择个人

3、点击创建应用

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LqBwWlNO-1680507715403)(F:\F盘桌面文件\百度人脸识别登录\img\屏幕截图 2023-04-03 141333.png)]$

注意：创建完应用后会生成一个API Key和一个Secret Key，这两个密匙要保密，懂得都懂！需要用来生成token。

4、到可视化人脸库中新建应用

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PDyCTBSx-1680507715403)(F:\F盘桌面文件\百度人脸识别登录\img\3.png)]$

注意现在新建的是一个人脸库

5、点击刚刚创建好的人脸库名称进去，新建组

在这里插入图片描述

6、最后就是新建用户就好了

以上是百度云那边需要做的全部操作

前端Vue2操作

1、准备工具文件

百度网盘下载js工具包

链接: https://pan.baidu.com/s/1snApbFqPPwOkhxwDWZ7_LA

提取码: dxc6

解压后会得到一个js文件夹，把它放到src/assets文件夹下

2、Login.vue中

<template>
    <div class="login-wrapper">

        <div class="big-box" v-show="isShowV">
            <div class="video-box">
                <video id="video" width="320" height="240" preload autoplay loop muted></video>
                <canvas id="canvas" width="320" height="240"></canvas>
            </div>

            <div class="success-face">
                <canvas id="screenshotCanvas" width="320" height="240"></canvas>
                <div class="switch-button">
                    <el-row>
                        <el-button type="primary" @click="destroyed">关闭摄像头</el-button>
                        <el-button type="primary" @click="init">开始识别</el-button>
                    </el-row>
                </div>
            </div>
        </div>


        <div class="login-form">
            <div class="title-container">
                <div class="t_wel">欢迎登录</div>
                <div class="t_site">小川数据可视化平台</div>
            </div>

            <div class="form-box">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
                    <el-form-item prop="username">
                        <el-input v-model="ruleForm.username" prefix-icon="el-icon-user-solid" placeholder="请输入用户名"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input show-password v-model="ruleForm.password" prefix-icon="el-icon-lock" placeholder="请输入密码"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button @keyup.enter="keyDown" type="primary" @click="submitForm('ruleForm')" style="width: 100%;padding: 15px 0">立即登录</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="text" @click="faceLoginBtn">人脸识别登录</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import tracking from '@/assets/js/tracking-min'
import '@/assets/js/face-min.js'
import Qs from 'qs'

export default {
    name: "Login2",
    data() {
        return {
            ruleForm: {
                username: 'admin',
                password: '123',
            },
            rules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                ],
            },

            trackerTask: null,
            mediaStreamTrack: null,
            video: null,
            screenshotCanvas: null,
            uploadLock: true, // 上传锁

            isShowV:false
        };
    },
    methods: {
        //人脸识别登录
        faceLoginBtn(){
            this.isShowV = this
            this.init();
        },
        // 初始化设置
        init() {
            this.video = this.mediaStreamTrack = document.getElementById('video');
            this.screenshotCanvas = document.getElementById('screenshotCanvas');

            let canvas = document.getElementById('canvas');
            let context = canvas.getContext('2d');

            // 固定写法
            let tracker = new window.tracking.ObjectTracker('face');
            tracker.setInitialScale(4);
            tracker.setStepSize(2);
            tracker.setEdgesDensity(0.1);
            //摄像头初始化
            this.trackerTask = window.tracking.track('#video', tracker, {
                camera: true
            });

            let _this = this;
            tracker.on('track', function(event) {

                // 检测出人脸 绘画人脸位置
                context.clearRect(0, 0, canvas.width, canvas.height);
                event.data.forEach(function(rect) {
                    context.strokeStyle = '#76e535';
                    context.strokeRect(rect.x, rect.y, rect.width, rect.height);
                });
                // event.data.length长度为多少代表检测几张人脸
                if(_this.uploadLock && event.data.length){
                    //上传图片
                    _this.screenshotAndUpload();
                }
            });
        },
        // 上传图片
        screenshotAndUpload() {
            // 上锁避免重复发送请求
            this.uploadLock = false;

            // 绘制当前帧图片转换为base64格式
            let canvas = this.screenshotCanvas;
            let video = this.video;
            let ctx = canvas.getContext('2d');
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
            let base64Img = canvas.toDataURL('image/jpeg');

            this.axios.post("http://localhost:8000/login/",Qs.stringify({"b64":base64Img.split(',')[1]})).then(res=>{

                if(res.data.code===200){
                    this.$store.commit('setUser', res.data.user_id)
                    this.$message.success(res.data.msg)
                    this.destroyed();
                    this.$router.push('/home')
                }else if(res.data.code===250){
                    console.log(res.data,'res.data')
                    this.$message.error(res.data.msg)
                    this.destroyed();
                }else if(res.data.code===500){
                    console.log(res.data,'res.data')
                    this.$message.error(res.data.msg)
                    this.destroyed();
                }
            })
            // 请求接口成功以后打开锁
            // this.uploadLock = true;
        },
        //关闭摄像头
        destroyed(){
            if(!this.mediaStreamTrack){
                return
            }
            this.mediaStreamTrack.srcObject.getTracks()[0].stop();
            this.trackerTask.stop()
            this.isShowV = false
        },

        //键盘事件
        keyDown(e){
            //如果是回车则执行登录方法
            if(e.keyCode === 13){
                //需要执行的登录方法
                this.submitForm('ruleForm');
            }
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$message.success('本登录只能使用人脸登录！')
                } else {
                    console.log('error submit!!');
                    this.$message.error('请填写登录信息!!!')
                    return false;
                }
            });
        },
    },
    mounted() {
        //绑定事件
        window.addEventListener('keydown',this.keyDown);
    },
    //销毁事件
    destroyed(){
        window.removeEventListener('keydown',this.keyDown,false);
    }
}
</script>

<style lang="scss" scoped>
html,body{
    width: 100%;
    height: 100%;
}
*{
    box-sizing: border-box;
}
.login-wrapper{
    background-image: url("@/assets/image/暗系-风景.png") ;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
    overflow: hidden;
    .login-form{
        position: absolute;
        left: 80%;
        top: 50%;
        -webkit-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
        width: 480px;
        height: 465px;
        max-width: 100%;
        margin-right: 120px;
        padding: 40px 70px 0;
        overflow: hidden;
        background-color: rgba(255,255,255,.1);
        border-radius: 15px;
        .title-container{
            position: relative;
            text-align: center;
            .t_wel{
                font-size: 26px;
                line-height: 1;
                color: #eee;
                margin-bottom: 10px;
            }
            .t_site{
                font-size: 14px;
                line-height: 1;
                color: #bebebe;
                margin-bottom: 26px;
            }
        }
        .form-box{
            .el-form{
                .el-form-item{
                    .el-input{
                        margin-top: 10px;
                    }
                    .el-button{
                        margin-top: 10px;
                    }
                }
            }
        }
    }
    .big-box{
        position: absolute;
        top: 5%;
        left: 50%;
        width: 320px;
        //border: 1px solid #ddd;
        //height: 700px;
        transform: translate(-50%);
        .video-box{
            width: 320px;
            height: 240px;
            #canvas{
                position: absolute;
                top: 0;
                left: 0;
            }
        }
        .success-face{
            width: 320px;
            height: 240px;
            //border: #ddd solid 1px;
        }
    }

}
</style>

说明：不管前端怎么写，只要能生成图片的base64编码就行，只要往后端提交图片的base64格式编码即可

注意：前端项目启动只能在本地localhost访问，不能使用ip地址访问项目，不然浏览器调摄像头时会报错，原因是安全隐私问题。切记

前端登录效果图：
在这里插入图片描述

前端工程已完毕

后端Django4操作

1、pip下载依赖包

pip install baidu-aip

注意：如果中间启动项目时报错，说是让下载其他的包，直接下载就可以，包名具体叫什么，忘了。

2、app/views.py中

from django.http import JsonResponse
from aip import AipFace
from django.views.decorators.csrf import csrf_exempt


@csrf_exempt
def login(request):
    data = request.POST
    b64 = data.get('b64')  # 获取前端提交的图片的base64编码

    # 定义常量
    APP_ID = "APP_ID"  # 自己的APP_ID
    API_KEY = "API_KEY"  # 自己的API_KEY
    SECRET_KEY = "SECRET_KEY"  # 自己的SECRET_KEY
    imageType = "BASE64"  # 固定写法
    groupIdList = "2023_login"  # 你创建的人脸组名称

    client = AipFace(APP_ID, API_KEY, SECRET_KEY)  # 初始化AipFace对象

    result = client.search(b64, imageType, groupIdList)

    print(result["result"]["user_list"][0]["group_id"])  # 打印用户组
    print(result["result"]["user_list"][0]["user_id"])  # 打印用户ID
    print(result["result"]["user_list"][0]["score"])  # 打印置信度

    if result["error_msg"] in "SUCCESS":
        score = result["result"]["user_list"][0]["score"]
        user_id = result["result"]["user_list"][0]["user_id"]
        if score > 85:
            print(user_id, ":识别成功")
            res = {
                "code": 200,
                "msg": "识别成功",
                "user_id": user_id
            }
            return JsonResponse(res)
        else:
            print("人脸库无此人")
            res = {
                "code": 250,
                "msg": "人脸库无此人",
            }
            return JsonResponse(res)
    else:
        print("error:", result["error_msg"])

    res = {
        "code": 500,
        "msg": result["error_msg"]
    }
    return JsonResponse(res)