mirror of
https://gitee.com/dromara/sa-token.git
synced 2025-04-05 17:37:53 +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>
|