SpringBoot實現(xiàn)人臉識別等多種登錄方式
更新時間：2022年05月18日 11:04:34 作者：weixin_52371612
本文主要介紹了SpringBoot實現(xiàn)人臉識別等多種登錄方式，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
1.前端界面實現(xiàn)
①背景閃爍效果：
<!-- 背景星星閃爍效果 -->
<script>
window.onload = function () {
// 屏幕的尺寸
var screenW = document.documentElement.clientWidth;
var screenH = document.documentElement.clientHeight;
// 2. 動態(tài)創(chuàng)建多個星星
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>②翻頁效果實現(xiàn)
.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; /* 旋轉(zhuǎn)軸 */
transition: 1s cubic-bezier(.79,.34,.47,.92); /* 旋轉(zhuǎn)曲線 */
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傳送給后臺傳數(shù)據(jù)
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)
}
});
}②使用短信平臺發(fā)送手機短信
public class SendJunkPhoneServiceImpl implements SendJunkPhoneService{
@Resource
AyUserDao ayUserDao;
private String code;
private Date sendTime;
private static final Logger logger = LogManager.getLogger(sendemailController.class);
//短信平臺相關(guān)參數(shù)
//這個不用改
private String apiUrl = "https://sms_developer.zhenzikj.com";
//榛子云系統(tǒng)上獲取
private String appId = "######";
private String appSecret = "######";
public boolean sendJunkPhone(String stuphone){
try {
JSONObject json = null;
//隨機生成驗證碼
code = String.valueOf(new Random().nextInt(999999));
tmp = code;
//將驗證碼通過榛子云接口發(fā)送至手機
ZhenziSmsClient client = new ZhenziSmsClient(apiUrl, appId, appSecret);
Map<String, Object> params = new HashMap<String, Object>();
//前臺輸入的手機號
params.put("number", stuphone);
//這個模板id對應(yīng)的是榛子云個人中心的模板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數(shù)據(jù)庫里插入一條用戶數(shù)據(jù)
//進行人像數(shù)據(jù)對比
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;
//進行人像數(shù)據(jù)對比
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";
}
}第一次寫文章，我也不知道應(yīng)該寫什么。這個項目所涉及到的內(nèi)容剛學(xué)沒幾天，代碼感覺很雜亂，不過和我一樣的小白應(yīng)該能看懂。
到此這篇關(guān)于SpringBoot實現(xiàn)人臉識別等多種登錄方式的文章就介紹到這了,更多相關(guān)SpringBoot 人臉識別登錄內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- SpringBoot集成WebSocket長連接實際應(yīng)用詳解
- SpringBoot集成WebSocket遇到的問題及解決
- 使用WebSocket+SpringBoot+Vue搭建簡易網(wǎng)頁聊天室的實現(xiàn)代碼
- SpringBoot整合WebSocket實現(xiàn)后端向前端發(fā)送消息的實例代碼
- SpringBoot集成百度AI實現(xiàn)人臉識別的項目實踐
- 如何基于SpringBoot實現(xiàn)人臉識別功能
- springboot集成opencv實現(xiàn)人臉識別功能的詳細步驟
- Springboot實現(xiàn)人臉識別與WebSocket長連接的實現(xiàn)代碼
相關(guān)文章
Java數(shù)據(jù)結(jié)構(gòu)最清晰圖解二叉樹前 中 后序遍歷
樹是一種重要的非線性數(shù)據(jù)結(jié)構(gòu)，直觀地看，它是數(shù)據(jù)元素（在樹中稱為結(jié)點）按分支關(guān)系組織起來的結(jié)構(gòu)，很象自然界中的樹那樣。樹結(jié)構(gòu)在客觀世界中廣泛存在，如人類社會的族譜和各種社會組織機構(gòu)都可用樹形象表示2022-01-01
Java動態(tài)線程池插件dynamic-tp集成zookeeper
ZooKeeper是一個分布式的，開放源碼的分布式應(yīng)用程序協(xié)調(diào)服務(wù)，是Google的Chubby一個開源的實現(xiàn)，是Hadoop和Hbase的重要組件。它是一個為分布式應(yīng)用提供一致性的軟件，提供的功能包括：配置維護、域名服務(wù)、分布式同步、組服務(wù)等2023-03-03
Java利用Reflect實現(xiàn)封裝Excel導(dǎo)出工具類
這篇文章主要為大家詳細介紹了Java如何利用Reflect實現(xiàn)封裝Excel導(dǎo)出工具類，文中的實現(xiàn)方法講解詳細，具有一定的借鑒價值，需要的可以參考一下2022-11-11
MybatisPlus使用Wrapper實現(xiàn)條件查詢功能
這篇文章主要介紹了MybatisPlus使用Wrapper實現(xiàn)查詢功能,使用它可以實現(xiàn)很多復(fù)雜的查詢，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-06-06
SpringBoot使用Prometheus采集自定義指標數(shù)據(jù)的方法詳解
隨著微服務(wù)在生產(chǎn)環(huán)境大規(guī)模部署和應(yīng)用,隨之而來也帶來了新的問題,其中比較關(guān)鍵的就是關(guān)于微服務(wù)的運維和監(jiān)控,本文將結(jié)合微服務(wù)運維監(jiān)控中的指標監(jiān)控進行詳細的說明,需要的朋友可以參考下2024-07-07
Java中圖片轉(zhuǎn)換為Base64的示例及注意事項
本文介紹了Base64編碼的概念及其作用,同時列舉了在實現(xiàn)圖片轉(zhuǎn)換為Base64過程中需要注意的問題,包括文件大小、讀取異常、圖片格式、網(wǎng)絡(luò)傳輸效率以及數(shù)據(jù)安全性等,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-10-10
這篇文章主要介紹了在Java中輕松使用工廠設(shè)計模式介紹，工廠設(shè)計模式或工廠方法設(shè)計模式是一種廣泛使用且易于理解的設(shè)計模式，文章通過圍繞主題展開詳細的內(nèi)容介紹，感興趣的朋友可以參考一下2022-09-09
IDEA2023 Maven3.9.1+Tomcat10.1.8配置并搭建Servlet5.0的框架實現(xiàn)
本文主要介紹了IDEA2023 Maven3.9.1+Tomcat10.1.8配置并搭建Servlet5.0的框架實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
這篇文章主要介紹了SpringBoot訪問windows共享文件,項目使用minio存儲且不在同一臺服務(wù)器上，為了優(yōu)化速度決定使用windows共享功能進行文件傳輸，本文結(jié)合實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2023-02-02
Spring Boot中使用Actuator的/info端點輸出Git版本信息
這篇文章主要介紹了Spring Boot中使用Actuator的/info端點輸出Git版本信息,需要的朋友可以參考下2017-06-06