腾讯人脸识别登录

腾讯人脸识别登录Express+Vue2

腾讯云操作

1、注册腾讯账号并实名认证（微信注册也可）

登录 - 腾讯云

2、开通服务

在 人脸识别控制台 中，按照页面提示，同意《人脸识别服务规则》后，即可开通服务。

3、人员库管理/人员管理 新建人员库

点击人员库名称进去创建人员

4、有一定node基础的可以手动配置生成后端代码

API Explorer - 云 API - 控制台

后端express中

1、npm 下载依赖包

# 生成token包
npm i jsonwebtoken

# 腾讯人脸识别包
npm i tencentcloud-sdk-nodejs-iai

# 配置跨域包
npm i cors

别忘了在app中配置跨域

2、路由视图中代码

//生成token包(npm i jsonwebtoken)
let jwt = require("jsonwebtoken")

//腾讯人脸识别包(npm i tencentcloud-sdk-nodejs-iai)
const tencentcloud = require("tencentcloud-sdk-nodejs-iai");

//人脸识别登录
router.post('/faceLogin',async (req, res) => {
    //获取前端传来的base64
    let b64 = req.body.b64
    
    const IaiClient = tencentcloud.iai.v20200303.Client;

    const clientConfig = {
        credential: {
            //自己的腾讯secretId
            secretId: "自己的腾讯secretId",
            //自己的腾讯密匙
            secretKey: "自己的腾讯密匙",
        },
        region: "ap-beijing",  //地域参数（华北地区北京）
        profile: {
            httpProfile: {
                endpoint: "iai.tencentcloudapi.com",
            },
        },
    };

    const client = new IaiClient(clientConfig);

    const params = {
        "GroupIds": [  //你创建的人员库ID
            "你创建的人员库ID"
        ],
        "Image": b64,  //图片的base64格式编码
        "NeedPersonInfo": 1,  //是否返回人员具体信息。0 为关闭，1 为开启。默认为 0。
        "QualityControl": 0,  //图片质量控制。 0: 不进行控制； 1:较低的质量要求
        "FaceMatchThreshold": 85,  //人脸对比度设置为大于85才可
    };

    let doc = await client.SearchFaces(params)
	
    //doc为人脸识别后的返回信息
    console.log(doc,'doc');

    if(doc.FaceNum===1){  //表示当前人脸库有该人员
        let personId = doc.Results[0].Candidates[0].PersonId  //拿到该人员的ID
        let personName = doc.Results[0].Candidates[0].PersonName  //拿到该人员的名称
        console.log(personName,'personNume');

        //根据该人员的名称去MongoDB中查询该用户对象(可以跳过这一步)
        let userObj = await userModel.findOne({username:personName})
        console.log(userObj,'userObj');
        if (userObj) {  //如果查询到该用户
            //生成token
            let token = jwt.sign({ "name": userObj.username }, "secretKey", { expiresIn: '1d' })

            res.send({
                code: 200,
                msg: "登录成功！",
                userObj,
                token
            })
            return false
        } else {
            res.send({
                code: 250,
                msg: "用户名或密码错误！",
                doc
            })
            return false
        }
    }else{
        res.send({
            code:251,
            msg:'人脸库无此人！'
        })
        return false
    }
    
})

后端工程配置完毕，如有疑问可自行百度，也可私信up

前端Vue2中

1、准备工具文件

百度网盘下载js工具包

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

提取码: dxc6

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

前端中用到了element-ui组件库，需提前配置好

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'

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);
            
            //base64Img为最终人像数据
            let base64Img = canvas.toDataURL('image/jpeg');
            //发送给后端
			this.$http.post("http://localhost:3000/users/faceLogin",{b64:base64Img.split(',')[1]}).then(res=>{

                if(res.data.code===200){
                    //登录成功把token存在浏览器会话存储中
                    sessionStorage.setItem("token",res.data.token)

                    this.$message.success(res.data.msg)
                    this.destroyed();
                }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===251){
                    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地址访问项目，不然浏览器调摄像头时会报错，原因是安全隐私问题。切记

前端登录效果图：

前端工程已完毕，如有疑问可自行百度，或者私信up