实现微信扫码登陆
This commit is contained in:
云泽网
+116
-108
@@ -207,12 +207,12 @@
|
||||
</div>
|
||||
<div class="layui-tab">
|
||||
<ul class="layui-tab-title">
|
||||
<li class="layui-this" lay-id="account">账密登录</li>
|
||||
<li lay-id="account">账密登录</li>
|
||||
<!-- <li lay-id="phone">手机验证码</li> -->
|
||||
<li lay-id="wechat">微信登录</li>
|
||||
<li class="layui-this" lay-id="wechat">微信登录</li>
|
||||
</ul>
|
||||
<div class="layui-tab-content">
|
||||
<div class="layui-tab-item layui-show" id="account">
|
||||
<div class="layui-tab-item" id="account">
|
||||
<form action="#" method="post" class="layui-form login-form">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-block" style="margin-left: 0;">
|
||||
@@ -270,7 +270,7 @@
|
||||
</div>
|
||||
</form>
|
||||
</div> -->
|
||||
<div class="layui-tab-item" id="wechat">
|
||||
<div class="layui-tab-item layui-show" id="wechat">
|
||||
<div class="wechat-login">
|
||||
<div class="container">
|
||||
<h2>微信扫码登录</h2>
|
||||
@@ -287,130 +287,138 @@
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
layui.use(['form', 'element', 'jquery'], function () {
|
||||
var form = layui.form;
|
||||
var element = layui.element;
|
||||
var $ = layui.jquery;
|
||||
var layer = layui.layer;
|
||||
// 全局变量
|
||||
var checkLoginTimer = null;
|
||||
var currentSceneStr = '';
|
||||
var currentTicket = '';
|
||||
var qrcodeExpireTime = 0;
|
||||
var $ = layui.jquery;
|
||||
|
||||
// 微信登录相关变量
|
||||
var checkLoginTimer = null;
|
||||
var currentSceneStr = '';
|
||||
var currentTicket = '';
|
||||
var qrcodeExpireTime = 0; // 二维码过期时间
|
||||
|
||||
// 获取微信登录二维码
|
||||
function getQrcode() {
|
||||
$.ajax({
|
||||
url: '/index/wechat/getLoginTicket',
|
||||
type: 'GET',
|
||||
success: function(res) {
|
||||
if (res.code === 0) {
|
||||
$('#qrcode').attr('src', res.data.url);
|
||||
currentSceneStr = res.data.scene_str;
|
||||
currentTicket = res.data.ticket;
|
||||
// 设置二维码过期时间（5分钟）
|
||||
qrcodeExpireTime = new Date().getTime() + (res.data.expire_seconds * 1000);
|
||||
$('#status').text('等待扫码...');
|
||||
$('#error').text('');
|
||||
// 开始检查登录状态
|
||||
startCheckLogin();
|
||||
} else {
|
||||
$('#error').text('获取二维码失败：' + res.msg);
|
||||
}
|
||||
},
|
||||
error: function() {
|
||||
$('#error').text('获取二维码失败，请刷新页面重试');
|
||||
// 获取微信登录二维码
|
||||
function getQrcode() {
|
||||
$.ajax({
|
||||
url: '/index/wechat/getLoginTicket',
|
||||
type: 'GET',
|
||||
success: function(res) {
|
||||
if (res.code === 0) {
|
||||
$('#qrcode').attr('src', res.data.url);
|
||||
currentSceneStr = res.data.scene_str;
|
||||
currentTicket = res.data.ticket;
|
||||
// 设置二维码过期时间（5分钟）
|
||||
qrcodeExpireTime = new Date().getTime() + (res.data.expire_seconds * 1000);
|
||||
$('#status').text('等待扫码...');
|
||||
$('#error').text('');
|
||||
// 开始检查登录状态
|
||||
startCheckLogin();
|
||||
} else {
|
||||
$('#error').text('获取二维码失败：' + res.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
error: function() {
|
||||
$('#error').text('获取二维码失败，请刷新页面重试');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 重新生成二维码
|
||||
function reGenerateQrcode() {
|
||||
if (!currentSceneStr) {
|
||||
getQrcode();
|
||||
// 开始检查登录状态
|
||||
function startCheckLogin() {
|
||||
if (checkLoginTimer) {
|
||||
clearInterval(checkLoginTimer);
|
||||
}
|
||||
|
||||
checkLoginTimer = setInterval(function() {
|
||||
// 检查二维码是否过期
|
||||
if (new Date().getTime() > qrcodeExpireTime) {
|
||||
clearInterval(checkLoginTimer);
|
||||
$('#status').text('二维码已过期，请点击刷新');
|
||||
$('#qrcode').css('opacity', '0.5');
|
||||
return;
|
||||
}
|
||||
|
||||
// 清除之前的定时器
|
||||
if (checkLoginTimer) {
|
||||
clearInterval(checkLoginTimer);
|
||||
checkLoginTimer = null;
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
url: '/index/wechat/reGenerateQrcode',
|
||||
url: '/index/wechat/checkLoginStatus',
|
||||
type: 'POST',
|
||||
data: {
|
||||
scene_str: currentSceneStr
|
||||
scene_str: currentSceneStr,
|
||||
ticket: currentTicket
|
||||
},
|
||||
success: function(res) {
|
||||
if (res.code === 0) {
|
||||
$('#qrcode').attr('src', res.data.url);
|
||||
currentSceneStr = res.data.scene_str;
|
||||
currentTicket = res.data.ticket;
|
||||
// 设置新的二维码过期时间（5分钟）
|
||||
qrcodeExpireTime = new Date().getTime() + (res.data.expire_seconds * 1000);
|
||||
$('#status').text('等待扫码...');
|
||||
$('#error').text('');
|
||||
// 开始检查登录状态
|
||||
startCheckLogin();
|
||||
} else {
|
||||
$('#error').text('刷新二维码失败：' + res.msg);
|
||||
if (res.code === 1) {
|
||||
// 登录成功
|
||||
clearInterval(checkLoginTimer);
|
||||
$('#status').text('登录成功，正在跳转...');
|
||||
// 保存用户信息到localStorage
|
||||
if (res.data) {
|
||||
localStorage.setItem('user_account', res.data.user_account);
|
||||
localStorage.setItem('expire_time', res.data.expire_time);
|
||||
localStorage.setItem('is_auto_login', res.data.is_auto_login);
|
||||
}
|
||||
// 设置cookie
|
||||
document.cookie = `user_account=${res.data.user_account}; path=/; max-age=${7*24*3600}`;
|
||||
document.cookie = `user_avatar=${res.data.avatar}; path=/; max-age=${7*24*3600}`;
|
||||
document.cookie = `user_name=${res.data.name}; path=/; max-age=${7*24*3600}`;
|
||||
document.cookie = `open_id=${res.data.openid}; path=/; max-age=${7*24*3600}`;
|
||||
|
||||
// 跳转到首页或其他页面
|
||||
setTimeout(function() {
|
||||
window.location.href = '/';
|
||||
}, 1000);
|
||||
} else if (res.code === 0) {
|
||||
// 更新状态信息
|
||||
$('#status').text(res.msg);
|
||||
}
|
||||
},
|
||||
error: function() {
|
||||
$('#error').text('刷新二维码失败，请重试');
|
||||
$('#error').text('检查登录状态失败，请重试');
|
||||
}
|
||||
});
|
||||
}, 2000); // 每2秒检查一次
|
||||
}
|
||||
|
||||
// 重新生成二维码的全局函数
|
||||
function reGenerateQrcode() {
|
||||
if (!currentSceneStr) {
|
||||
getQrcode();
|
||||
return;
|
||||
}
|
||||
|
||||
// 开始检查登录状态
|
||||
function startCheckLogin() {
|
||||
if (checkLoginTimer) {
|
||||
clearInterval(checkLoginTimer);
|
||||
}
|
||||
|
||||
checkLoginTimer = setInterval(function() {
|
||||
// 检查二维码是否过期
|
||||
if (new Date().getTime() > qrcodeExpireTime) {
|
||||
clearInterval(checkLoginTimer);
|
||||
$('#status').text('二维码已过期，请点击刷新');
|
||||
$('#qrcode').css('opacity', '0.5');
|
||||
return;
|
||||
// 清除之前的定时器
|
||||
if (checkLoginTimer) {
|
||||
clearInterval(checkLoginTimer);
|
||||
checkLoginTimer = null;
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
url: '/index/wechat/reGenerateQrcode',
|
||||
type: 'POST',
|
||||
data: {
|
||||
scene_str: currentSceneStr
|
||||
},
|
||||
success: function(res) {
|
||||
if (res.code === 0) {
|
||||
$('#qrcode').attr('src', res.data.url);
|
||||
currentSceneStr = res.data.scene_str;
|
||||
currentTicket = res.data.ticket;
|
||||
// 设置新的二维码过期时间（5分钟）
|
||||
qrcodeExpireTime = new Date().getTime() + (res.data.expire_seconds * 1000);
|
||||
$('#status').text('等待扫码...');
|
||||
$('#error').text('');
|
||||
// 开始检查登录状态
|
||||
startCheckLogin();
|
||||
} else {
|
||||
$('#error').text('刷新二维码失败：' + res.msg);
|
||||
}
|
||||
},
|
||||
error: function() {
|
||||
$('#error').text('刷新二维码失败，请重试');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
url: '/index/wechat/checkLoginStatus',
|
||||
type: 'POST',
|
||||
data: {
|
||||
scene_str: currentSceneStr,
|
||||
ticket: currentTicket
|
||||
},
|
||||
success: function(res) {
|
||||
if (res.code === 1) {
|
||||
// 登录成功
|
||||
clearInterval(checkLoginTimer);
|
||||
$('#status').text('登录成功，正在跳转...');
|
||||
// 保存用户信息到localStorage
|
||||
if (res.data && res.data.user_info) {
|
||||
localStorage.setItem('user_info', JSON.stringify(res.data.user_info));
|
||||
}
|
||||
// 跳转到首页或其他页面
|
||||
setTimeout(function() {
|
||||
window.location.href = '/';
|
||||
}, 1000);
|
||||
} else if (res.code === 0) {
|
||||
// 更新状态信息
|
||||
$('#status').text(res.msg);
|
||||
}
|
||||
},
|
||||
error: function() {
|
||||
$('#error').text('检查登录状态失败，请重试');
|
||||
}
|
||||
});
|
||||
}, 2000); // 每2秒检查一次
|
||||
}
|
||||
layui.use(['form', 'element', 'jquery'], function () {
|
||||
var form = layui.form;
|
||||
var element = layui.element;
|
||||
var layer = layui.layer;
|
||||
|
||||
// 页面加载完成后获取二维码
|
||||
$(document).ready(function() {
|
||||
|
||||
Reference in New Issue
Block a user