springboot+springSecurity+vue+百度云AI实现人脸登录(客户端)

1、在登录界面中新加人脸登录按钮 



人脸登录

http://localhost:8080/#/faceLogin
 faceLogin(){
      this.$router.push('/faceLogin');
    },


{
        path: '/facelogin',
        name: 'facelogin',
        component: facelogin,
        hidden:true
    }

效果是 

springboot+springSecurity+vue+百度云AI实现人脸登录(客户端)_第1张图片

 

落地页随机拍摄的面部头像

springboot+springSecurity+vue+百度云AI实现人脸登录(客户端)_第2张图片

2.按钮跳转到落地页随机拍摄的面部头像界面








import axios from "axios"
let base='';
export const checkFace = (data) => {
    let config = {}
    config.data = data
    config.headers = {
      'Cache-Control': 'no-cache',
      'Content-Type': 'multipart/form-data'
    }
    config.transformRequest = data
    return axios.request({
        baseURL:process.env.BASE_API,
        method: 'post',
        url: '/face/check',
        ...config
    });
}

3.前端抓取人脸请求后端验证

springboot+springSecurity+vue+百度云AI实现人脸登录(客户端)_第3张图片

springboot+springSecurity+vue+百度云AI实现人脸登录(客户端)_第4张图片

 springboot+springSecurity+vue+百度云AI实现人脸登录(客户端)_第5张图片

 springboot+springSecurity+vue+百度云AI实现人脸登录(客户端)_第6张图片

你可能感兴趣的:(人工智能,vuex,springboot,百度,vue.js,小程序)