SpringBoot实现人脸识别等多种登录方式
目录
- 1.前端界面实现
- 2.手机验证码登录
- 3.人脸识别登录(百度人脸识别)
1.前端界面实现
①背景闪烁效果：
<!-- 背景星星闪烁效果 -->
<script>
window.onload = function () {
// 屏幕的尺寸
var screenW = document.documentElement.clientWidth;
var screenH = document.documentElement.clientHeight;
// 2. 动态创建多个星星
for(var i=0; i<300; i++){
var span = document.createElement('span');
document.body.appendChild(span);
console.log(i);
//位置随机
var x = parseInt(Math.random() * screenW);
var y = parseInt(Math.random() * screenH);
span.style.left = x + 'px';
span.style.top = y + 'px';
/*
width: 2px;
height: 2px;
border-radius: 5px;
background-color: whitesmoke;
position: absolute;
top: 0;
left: 0;
backface-visibility: hidden;
*/
//大小随机
var scale = Math.random() * 2;
span.style.transform = 'scale('+ scale + ', ' + scale + ')';
//频率随机
var rate = Math.random() *1.5;
span.style.animationDelay = rate + 's';
}
}
</script>
②翻页效果实现
.shu{
position: relative;
width: 300px;
height: 400px;
background-color: rgba(255, 255, 255, 0.774);
transform-style: preserve-3d;
box-shadow: 300px 0px 30px rgb(0, 0, 0.6) inset;
transition: 1s cubic-bezier(.79,.34,.47,.92);
}
.shu::after{
content: '';
position: absolute;
height: 3px;
width: 303px;
left: 0px;
bottom: -3px;
/* background-color: rgb(100, 96, 96); */
background-image: linear-gradient(to right,rgb(71, 68, 68),rgba(124, 120, 120, 0.3) );
border-bottom-left-radius: 5px;
}
.shu::before{
content: '';
position: absolute;
width: 3px;
height: 100%;
right: -3px;
top: 0px;
background-color: rgb(112, 108, 108);
background-image: linear-gradient(to top,rgb(114, 111, 111),rgba(90, 87, 87, 0.5) );;
border-top-right-radius: 3px;
}
.shu:hover{
box-shadow: 30px 0px 30px rgb(0, 0, 0.6) inset;
transform: rotate(-5deg);
}
.shu:hover .feng{
transform: rotateY(-140deg);
}
.feng{
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
background: url("../../images/img_4.png");
background-size: 100% ;
transform-origin: left;
transition: 1s cubic-bezier(.79,.34,.47,.92);
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
}
.wen{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-family: 'fangsong';
text-align: left;
border: solid black 1px;
font-weight: bold;
transform-origin: left; /* 旋转轴 */
transition: 1s cubic-bezier(.79,.34,.47,.92); /* 旋转曲线 */
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;;
}
<div class="shu" id="shu">
<div class="feng" id="feng"></div>
<div class="wen" id="wen1">
<h1 class="contain" id="register" style="padding-top:30px;padding-left: 50px;">用户注册</h1>
<h1 class="contain" id="faceregister" style="padding-top:20px;padding-left: 50px;">人脸注册</h1>
<h1 class="contain" id="facelogin" style="padding-top:20px;padding-left: 50px;">人脸登录</h1>
<h1 class="contain" id="numlogin" style="padding-top:20px;padding-left: 50px;">账号登录</h1>
<h1 class="contain" id="mailorphonelogin" style="padding-top:20px;padding-left: 50px;">邮箱/手机号登录</h1>
<h1 class="contain" id="resetpwd" style="padding-top:20px;padding-left: 50px;">忘记密码</h1>
</div>
<div class="wen" id="wen2">
<!-- 用户注册 -->
<div id="contain1">
<h1 style="padding-top:30px;padding-left: 50px;">用户注册</h1>
<form class="layui-form">
<div class="layui-form-item">
<input id="num1" type="text" required lay-verify="required" placeholder="账号" size="20">
</div>
<div class="layui-form-item">
<input id="phone1" type="text" required lay-verify="required|phone" placeholder="手机号" size="20">
</div>
<div class="layui-form-item">
<input id="mailbox1" type="text" required lay-verify="required|email" placeholder="邮箱" size="20">
</div>
<div class="layui-form-item">
<i class="layui-icon" id="show1" onclick="showordisappear(this)"></i>
<input id="pwd1" type="password" required lay-verify="required" placeholder="密码" size="20">
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button id="btnofregister" type="button" class="layui-btn layui-btn-primary layui-border-black" lay-submit >注册</button>
</div>
</div>
</form>
</div>
<!-- 账号登录 -->
<div id="contain2">
<h1 style="padding-top:30px;padding-left: 50px;">账号登录</h1>
<form class="layui-form">
<div class="layui-form-item">
<input id="num2" type="text" required lay-verify="required" placeholder="账号" size="20">
<p id="tipofnum"></p>
</div>
<div class="layui-form-item">
<i class="layui-icon" id="show2" onclick="showordisappear(this)"></i>
<input id="pwd2" type="password" required lay-verify="required" placeholder="密码" size="20">
<p id="tipofpwd"></p>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button id="btnofnumlogin" type="button" class="layui-btn layui-btn-primary layui-border-black" lay-submit >登录</button>
</div>
</div>
</form>
</div>
<!-- 邮箱/手机号登录 -->
<div id="contain3">
<h1 style="padding-top:30px;padding-left: 50px;">邮箱/手机号登录</h1>
<form class="layui-form">
<div class="layui-form-item">
<input id="mailboxorphone" type="text" required lay-verify="required" placeholder="邮箱/手机号" size="20">
<p id="tipofmop"></p>
</div>
<div class="layui-form-item">
<input id="yzm1" type="text" required lay-verify="required" placeholder="验证码" size="10">
<input type="button" id="getyzm1" value="获取验证码" onclick="settime(this)">
<p id="tipofyzm1"></p>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button id="btnofmoplogin" type="button" class="layui-btn layui-btn-primary layui-border-black" lay-submit >登录</button>
</div>
</div>
</form>
</div>
<!-- 忘记密码 -->
<div id="contain4">
<h1 style="padding-top:30px;padding-left: 50px;">忘记密码</h1>
<form class="layui-form">
<div class="layui-form-item">
<input id="mailboxorphone2" type="text" required lay-verify="required" placeholder="邮箱/手机号" size="20">
<p id="tipofmop2"></p>
</div>
<div class="layui-form-item">
<input id="yzm2" type="text" required lay-verify="required" placeholder="验证码" size="10">
<input type="button" id="getyzm2" value="获取验证码" onclick="settime2(this)">
<p id="tipofyzm2"></p>
</div>
<div class="layui-form-item">
<i class="layui-icon" id="show3" onclick="showordisappear(this)"></i>
<input id="pwd3" type="password" required lay-verify="required" placeholder="密码" size="20">
<p id="tipofpwd2"></p>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button id="btnofresetpwd" type="button" class="layui-btn layui-btn-primary layui-border-black" lay-submit >确认</button>
</div>
</div>
</form>
</div>
</div>
</div>
2.手机验证码登录
①使用Ajax传送给后台传数据
if(tip.match(/^1\d{10}$/)){
var para = {
stuphone:$("#mailboxorphone").val(),
};
$.ajax({
url :"/user/sendVerifyCode",
type : "POST",
async : true,
data : para,
dataType : 'html',
success:function (data){
eval(data)
}
});
}
②使用短信平台发送手机短信
public class SendJunkPhoneServiceImpl implements SendJunkPhoneService{
@Resource
AyUserDao ayUserDao;
private String code;
private Date sendTime;
private static final Logger logger = LogManager.getLogger(sendemailController.class);
//短信平台相关参数
//这个不用改
private String apiUrl = "https://sms_developer.zhenzikj.com";
//榛子云系统上获取
private String appId = "######";
private String appSecret = "######";
public boolean sendJunkPhone(String stuphone){
try {
JSONObject json = null;
//随机生成验证码
code = String.valueOf(new Random().nextInt(999999));
tmp = code;
//将验证码通过榛子云接口发送至手机
ZhenziSmsClient client = new ZhenziSmsClient(apiUrl, appId, appSecret);
Map<String, Object> params = new HashMap<String, Object>();
//前台输入的手机号
params.put("number", stuphone);
//这个模板id对应的是榛子云个人中心的模板id
params.put("templateId", 7161);
String[] templateParams = new String[2];
templateParams[0] = code;
templateParams[1] = "1";
params.put("templateParams", templateParams);
String result = client.send(params);
sendTime = new Date();
System.out.println(result);
json = JSONObject.parseObject(result);
} catch (Exception e) {
return Boolean.FALSE;
}
return Boolean.TRUE;
}
}
3.人脸识别登录(百度人脸识别)
①注册：
public String test(String userName,String faceBase) throws IOException {
if(!StringUtils.isEmpty(userName) && !StringUtils.isEmpty(faceBase)) {
//文件上传的地址
String upPath = ResourceUtils.getURL("classpath:").getPath()+"static\\photo";
//用于查看路径是否正确
System.out.println(upPath);
// 图片名称
String fileName = userName+System.currentTimeMillis() + ".png";
System.out.println(upPath+"\\"+fileName);
File file = new File(upPath+"\\"+fileName);
//初始化百度云的AipFace
AipFace client = new AipFace(APP_ID, API_KEY, SECRET_KEY);
//往自己demo数据库里插入一条用户数据
//进行人像数据对比
Double num = FaceUtils.verifyUser(faceBase, client);
if(num>95) {
return "2";
}
User u = ayUserDao.selectUserByName(userName);
if (u != null) {
return "3";
}
/* iUserService.addUsers(user); */
ayUserDao.addUsers(userName);
//向百度云人脸库插入一张人脸
FaceUtils.facesetAddUse(client,faceBase,userName);
}
return "1";
}
②登录
@RequestMapping(value = "/login2")
public String login(String faceBase,HttpSession session) {
String faceData = faceBase;
//进行人像数据对比
AipFace client = new AipFace(APP_ID, API_KEY, SECRET_KEY);
Double num = FaceUtils.verifyUser(faceData, client);
if(num>95) {
session.setAttribute("username", faceBase);
return "1";
}else {
session.removeAttribute("username");
return "2";
}
}
第一次写文章，我也不知道应该写什么。这个项目所涉及到的内容刚学没几天，代码感觉很杂乱，不过和我一样的小白应该能看懂。
到此这篇关于SpringBoot实现人脸识别等多种登录方式的文章就介绍到这了,更多相关SpringBoot 人脸识别登录内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
springboot集成opencv实现人脸识别功能的详细步骤
前言 项目中检测人脸图片是否合法的功能,之前用的是百度的人脸识别接口,由于成本高昂不得不寻求替代方案. 什么是opencv? OpenCV是一个基于BSD许可(开源)发行的跨平台计算机视觉和机器学习软件库,可以运行在Linux.Windows.Android和Mac OS操作系统上.轻量级而且高效--由一系列 C 函数和少量 C++ 类构成,同时提供了Python.Java.MATLAB等语言的接口,实现了图像处理和计算机视觉方面的很多通用算法. 项目集成步骤 由于项目是放在Linux系统中跑的
-
SpringBoot实现人脸识别等多种登录方式
目录 1.前端界面实现 2.手机验证码登录 3.人脸识别登录(百度人脸识别) 1.前端界面实现 ①背景闪烁效果: <!-- 背景星星闪烁效果 --> <script> window.onload = function () { // 屏幕的尺寸 var screenW = document.documentElement.clientWidth; var screenH = document.documentElement.clientHeight; // 2. 动态创建多个星星
-
如何基于SpringBoot实现人脸识别功能
目录 前言 需求分析 一.人脸注册 二.人脸登录 具体实现 一.人脸注册 二.刷脸登录 总结 前言 去年在公司参与了一个某某机场建设智能机场的一个项目,人脸登机是其中的一个功能模块,当时只是写了后台的接口,调用人脸识别设备的api,给闸机回传数据信号,以保障该功能的正常使用. 当时因为项目进度紧张,手里还有其他项目赶进度,也就没时间去分享这个功能的实现.前几天刷脸进公司大楼的时候,突然想起来应该写一个功能类似的demo分享个人的一些小小的经验.在当时项目中刷脸的设备终端是采购某某AI公司,当然咱
-
Django通过自定义认证后端实现多种登录方式验证
前言 我们见到几乎所有的 Web 网站或者手机 App 也好,它们的最终目的都是要留住用户,提升自己网站的用户注册量,所以说用户的概念也必须深入到每一个程序开发者的心中.而权限呢?它限制了用户可以拥有哪些功能,比如说某项只有付费会员才可以观看的教程,这就用到了用户的权限设置,可以一言一概之,用户的实现业务系统中的数据隔离,而权限则限定了用户可以使用的哪些功能. 那么,Django 提供的用户认证系统如何在项目中进行应用呢?在本节我们将给大家介绍如何使用用户认证系统,实现我们业务场景中常见的多种登
-
springboot+jwt+微信小程序授权登录获取token的方法实例
目录 前言 配置 XcxAuthenticationProvider XcxAuthenticationToken 小程序授权登录 前言 我们有时候在开发中,遇到这样的问题,就是我们需要小程序授权登录我们自己的后台,通过小程序的信息换取我们自己后台的token,实现账号密码.小程序授权登录的多种登录方式. 配置 在 SecurityConfig文件中配置 XcxAuthenticationProvider public class XcxAuthenticationProvider implem
-
Java实现人脸识别登录、注册等功能(最新完整版)
目录 前言: 难度分析: 项目回顾(百度云AI) 最终效果演示: 技术选型: 项目需求分析 项目搭建 注意事项(项目搭建前了解) 项目总结 前言: 这段时间由于学校实行静态化管理,寝室门和校门都是用了人脸识别的装置,每次经过都会激发我的好奇心,也想自己搞一个人脸识别玩玩,随着开始查找资料来研究这方面的信息,还好有好几家公司都有提供这方面的免费API,也是省下来很多功夫.一开始采用的是face++,但是在执行到最后一步人脸搜索时出现问题,一直提示INVALID_OUTER_ID,跟着官方文档,一步
-
PyQt5+Caffe+Opencv搭建人脸识别登录界面
最近开始学习Qt,结合之前学习过的caffe一起搭建了一个人脸识别登录系统的程序,新手可能有理解不到位的情况,还请大家多多指教. 我的想法是用opencv自带的人脸检测算法检测出面部,利用caffe训练好的卷积神经网络来提取特征,通过计算当前检测到的人脸与已近注册的所有用户的面部特征之间的相似度,如果最大的相似度大于一个阈值,就可以确定当前检测到的人脸对应为这个相似度最大的用户了. ###Caffe人脸识别 因为不断有新的用户加入,然而添加新用户后重新调整CNN的网络结构太费时间,所以不能用CN
-
Android开发人脸识别登录功能
近来,很多公司的APP都实现了人脸识别登录的功能.今天呢,银鹏带大家从头到尾做一下这个人脸识别登录. 首先呢,我们需要采用一个拥有人脸识别算法的平台,这边我建议使用虹软的人脸识别,因为我个人用的就是这个,关键有一点好处,就是免费.注册链接:点击进入注册. 注册完毕以后,话不多说,我们进入流程. 第一步:在虹软平台创建应用 直接安装SDK查看激活码 下载虹软识别库地址:点击下载识别库 下载好之后进行依赖添加: implementation 'com.github.tyhjh:PermissionU
-
浅谈spring使用策略模式实现多种场景登录方式
@Autowired注解可以帮我们自动注入我们想要的 Bean. 如果只是简单使用@Autowired会遇到spring IOC容器中一个接口有多个实现的情况,spring无法识别具体的实现类,如果不是策略模式,我们可以进行具体的指定@Qualifier和@primary来避免bean冲突的情况.但在策略模式中是不行的. 而除了这个基本功能之外, @Autowired 还有更加强大的功能,还可以注入指定类型的数组,List/Set 集合,甚至还可以是 Map 对象. 为每个具体的实现类添加了一