mirror of
https://gitee.com/dromara/sa-token.git
synced 2025-06-28 13:34:18 +08:00
128 lines
3.3 KiB
HTML
128 lines
3.3 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html>
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8">
|
|||
|
|
<title>客户端-登录页</title>
|
|||
|
|
<style type="text/css">
|
|||
|
|
*{margin: 0px; padding: 0px;}
|
|||
|
|
.login-box{width: 500px; margin: 50px auto;}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="login-box">
|
|||
|
|
<h2>客户端-登录页</h2> <br>
|
|||
|
|
<div>
|
|||
|
|
当前是否登录: <span class="login-info"></span>
|
|||
|
|
<button onclick="logout()">注销登录</button>
|
|||
|
|
</div>
|
|||
|
|
<br/>
|
|||
|
|
点此按钮开始使用OAuth2.0开放平台快捷登录：
|
|||
|
|
<button onclick="requestOAuth2()">快捷登录</button>
|
|||
|
|
</div>
|
|||
|
|
<script src="https://unpkg.zhimg.com/jquery@3.4.1/dist/jquery.min.js"></script>
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
|
|||
|
|
// 获取登录信息
|
|||
|
|
var currUserId = null;
|
|||
|
|
function getLoginInfo() {
|
|||
|
|
$.ajax({
|
|||
|
|
url: '/getLoginInfo',
|
|||
|
|
data: {},
|
|||
|
|
dataType: 'json',
|
|||
|
|
success: function(res) {
|
|||
|
|
if(res.data == null) {
|
|||
|
|
$(".login-info").html('<b style="color: red;">未登录</b>');
|
|||
|
|
// 如果当前未登录，并且此时url中有code参数, 则尝试使用code码进行登录
|
|||
|
|
var code = getParam('code', null);
|
|||
|
|
if(code != null) {
|
|||
|
|
doCodeLogin();
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
$(".login-info").html('<b style="color: green;">已登录, userId=' + res.data + '</b>');
|
|||
|
|
currUserId = res.data;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
error: function(e, ee, eee) {
|
|||
|
|
console.log('error');
|
|||
|
|
alert(eee);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
getLoginInfo();
|
|||
|
|
|
|||
|
|
// 注销登录
|
|||
|
|
function logout() {
|
|||
|
|
$.ajax({
|
|||
|
|
url: '/logout',
|
|||
|
|
dataType: 'json',
|
|||
|
|
success: function(res) {
|
|||
|
|
alert('注销成功');
|
|||
|
|
location.href = "./login.html";
|
|||
|
|
},
|
|||
|
|
error: function(e, ee, eee) {
|
|||
|
|
alert(eee);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 请求OAuth2授权
|
|||
|
|
function requestOAuth2() {
|
|||
|
|
// 如果当前已经登录，则必须先退出
|
|||
|
|
if(currUserId != null) {
|
|||
|
|
alert('当前已经登录, 请先注销');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
// 拼接地址
|
|||
|
|
var url = "http://localhost:8001/oauth2/authorize" +
|
|||
|
|
"?client_id=123123123" + // 应用id
|
|||
|
|
"&scope=userinfo" + // 授权范围
|
|||
|
|
// "&redirect_uri=" + encodeURIComponent(location.href) // 重定向地址
|
|||
|
|
"&redirect_uri=" + encodeURIComponent("http://localhost:8002/login.html") // 重定向地址
|
|||
|
|
"&response_type=code" + // 返回格式
|
|||
|
|
"&state=123456789"; // 授权范围
|
|||
|
|
console.log(url);
|
|||
|
|
location.href = url;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 使用code进行 (从url中获取code码进行登录)
|
|||
|
|
function doCodeLogin() {
|
|||
|
|
var code = getParam('code');
|
|||
|
|
$.ajax({
|
|||
|
|
url: '/doCodeLogin',
|
|||
|
|
data: {
|
|||
|
|
code: code
|
|||
|
|
},
|
|||
|
|
dataType: 'json',
|
|||
|
|
success: function(res) {
|
|||
|
|
if(res.code == 200) {
|
|||
|
|
alert('OAuth2登录成功');
|
|||
|
|
getLoginInfo(); // 刷新user信息
|
|||
|
|
} else {
|
|||
|
|
alert("登录失败：" + res.msg);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
error: function(e, ee, eee) {
|
|||
|
|
alert(eee);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 从url中查询到指定名称的参数值
|
|||
|
|
function getParam(name, defaultValue){
|
|||
|
|
var query = window.location.search.substring(1);
|
|||
|
|
var vars = query.split("&");
|
|||
|
|
for (var i=0;i<vars.length;i++) {
|
|||
|
|
var pair = vars[i].split("=");
|
|||
|
|
if(pair[0] == name){return pair[1];}
|
|||
|
|
}
|
|||
|
|
return(defaultValue == undefined ? null : defaultValue);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|