yunzerwebsite/yunzer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

登录加入极验验证

Browse Source
This commit is contained in:
hero920103
2025-06-05 15:59:23 +08:00
parent 47cfb7dcaf
commit ebffdf180e
2 changed files with 611 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/index/view/user/login.php
+124 -42
View File
@@ -5,6 +5,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="__LAYUI__/css/layui.css">
<script src="__JS__/gt4.js"></script>
<script src="__LAYUI__/layui.js" charset="utf-8"></script>
<title>用户登录</title>
<style>
@@ -155,8 +156,8 @@
<div class="layui-tab">
<ul class="layui-tab-title">
<li class="layui-this" lay-id="account">账密登录</li>
<!-- <li lay-id="phone">手机验证码</li>
<li lay-id="wechat">微信登录</li> -->
<li lay-id="phone">手机验证码</li>
<li lay-id="wechat">微信登录</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show" id="account">
@@ -173,6 +174,9 @@
placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div id="gt-captcha" style="width: 100%;"></div>
</div>
<div class="layui-form-item" style="display: flex;flex-direction: column;align-items: center;">
<div class="layui-input-block" style="margin-left: 0;margin-bottom: 10px;">
<button class="layui-btn layui-btn-fluid" lay-submit
@@ -185,7 +189,7 @@
</div>
</form>
</div>
<!-- <div class="layui-tab-item" id="phone">
<div class="layui-tab-item" id="phone">
<form action="#" method="post" class="layui-form login-form">
<div class="layui-form-item">
<div class="layui-input-block" style="margin-left: 0;">
@@ -204,6 +208,9 @@
</div>
</div>
</div>
<div class="layui-form-item">
<div id="gt-captcha" style="width: 100%;"></div>
</div>
<div class="layui-form-item">
<div class="layui-input-block" style="margin-left: 0;">
<button class="layui-btn layui-btn-fluid" lay-submit lay-filter="phoneLogin">登录</button>
@@ -216,7 +223,7 @@
<img src="" alt="微信登录" class="layui-img">
<p>点击使用微信登录</p>
</div>
</div> -->
</div>
</div>
</div>
</div>
@@ -226,38 +233,122 @@
var element = layui.element;
var $ = layui.jquery;
form.on('submit(accountLogin)', function (data) {
$.ajax({
url: '{:url("index/user/login")}',
type: 'POST',
data: data.field,
dataType: 'json',
success: function (res) {
if (res.code === 0) {
// 存储登录数据，设置7天过期
var expireTime = new Date().getTime() + 7 * 24 * 60 * 60 * 1000;
localStorage.setItem('user_account', data.field.account);
localStorage.setItem('user_password', btoa(data.field.password));
localStorage.setItem('expire_time', expireTime);
// 添加登录状态标记
localStorage.setItem('is_auto_login', 'true');
// 初始化极验验证
var handler = function (captchaObj) {
// 将验证码渲染到指定容器
captchaObj.appendTo('#gt-captcha');
layer.msg('登录成功', {
icon: 1,
time: 2000,
shade: 0.3
}, function () {
window.location.href = '{:url("/")}';
});
} else {
layer.msg(res.msg, {
icon: 2,
time: 2000
});
}
// 账密登录表单提交
form.on('submit(accountLogin)', function (data) {
var validate = captchaObj.getValidate();
if (!validate) {
layer.msg('请完成验证码验证', {
icon: 2,
time: 2000
});
return false;
}
data.field.geetest_challenge = validate.geetest_challenge;
data.field.geetest_validate = validate.geetest_validate;
data.field.geetest_seccode = validate.geetest_seccode;
$.ajax({
url: '{:url("index/user/login")}',
type: 'POST',
data: data.field,
dataType: 'json',
success: function (res) {
if (res.code === 0) {
// 存储登录数据，设置7天过期
var expireTime = new Date().getTime() + 7 * 24 * 60 * 60 * 1000;
localStorage.setItem('user_account', data.field.account);
localStorage.setItem('user_password', btoa(data.field.password));
localStorage.setItem('expire_time', expireTime);
// 添加登录状态标记
localStorage.setItem('is_auto_login', 'true');
layer.msg('登录成功', {
icon: 1,
time: 2000,
shade: 0.3
}, function () {
window.location.href = '{:url("/")}';
});
} else {
layer.msg(res.msg, {
icon: 2,
time: 2000
});
}
}
});
return false;
});
// 手机验证码登录表单提交
form.on('submit(phoneLogin)', function (data) {
var validate = captchaObj.getValidate();
if (!validate) {
layer.msg('请完成验证码验证', {
icon: 2,
time: 2000
});
return false;
}
data.field.geetest_challenge = validate.geetest_challenge;
data.field.geetest_validate = validate.geetest_validate;
data.field.geetest_seccode = validate.geetest_seccode;
$.ajax({
url: '{:url("index/user/login")}',
type: 'POST',
data: data.field,
dataType: 'json',
success: function (res) {
if (res.code === 0) {
layer.msg('登录成功', {
icon: 1,
time: 2000,
shade: 0.3
}, function () {
window.location.href = '{:url("/")}';
});
} else {
layer.msg(res.msg, {
icon: 2,
time: 2000
});
}
}
});
return false;
});
// 点击获取验证码按钮时验证
document.getElementById('getCode').addEventListener('click', function () {
var validate = captchaObj.getValidate();
if (!validate) {
layer.msg('请完成验证码验证', {
icon: 2,
time: 2000
});
return;
}
console.log('获取验证码');
});
};
// 直接使用配置初始化极验验证，并添加错误处理
initGeetest4({
captchaId: '{$config[\'geetest_id\']}',
offline: false,
new_captcha: true
}, handler, function (error) {
console.error('极验验证初始化失败:', error);
layer.msg('验证码初始化失败，请刷新页面重试', {
icon: 2,
time: 2000
});
return false;
});
// 页面加载时检查是否有保存的登录数据
@@ -276,15 +367,6 @@
localStorage.removeItem('is_auto_login');
}
});
// form.on('submit(phoneLogin)', function (data) {
// console.log(data.field);
// return false;
// });
// document.getElementById('getCode').addEventListener('click', function () {
// console.log('获取验证码');
// });
});
</script>