mirror of
https://gitee.com/dromara/sa-token.git
synced 2025-04-05 17:37:53 +08:00
feat(oauth2): 新增 oauth2 server 端前后台分离示例
This commit is contained in:
click33
parent
59253dc6f0
commit
c91412e542
@ -0,0 +1,48 @@
|
||||
*{margin: 0; padding: 0;}
|
||||
body{font-family: Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif;}
|
||||
::-webkit-input-placeholder{color: #ccc;}
|
||||
|
||||
/* 视图盒子 */
|
||||
.view-box{position: relative; width: 100vw; height: 100vh; overflow: hidden;}
|
||||
/* 背景 EAEFF3 */
|
||||
.bg-1{height: 100%; background: #E4B17F;}
|
||||
|
||||
/* 内容盒子 */
|
||||
.content-box{position: absolute; width: 100vw; height: 100vh; top: 0px;}
|
||||
.content-box{display: none;}
|
||||
.region-default{display: block;}
|
||||
.message-box{width: 100%;; text-align: center;}
|
||||
|
||||
/* 登录盒子 */
|
||||
/* .login-box{width: 400px; height: 400px; position: absolute; left: calc(50% - 200px); top: calc(50% - 200px); max-width: 90%; } */
|
||||
.login-box{width: 450px; margin: auto; max-width: 90%; height: 100%;}
|
||||
.login-box{display: flex; align-items: center; text-align: center;}
|
||||
|
||||
/* 表单 */
|
||||
.from-box{flex: 1; padding: 20px 50px; background-color: #FFF;}
|
||||
.from-box{border-radius: 1px; box-shadow: 1px 1px 20px #666;}
|
||||
.from-title{margin-top: 20px; margin-bottom: 30px; text-align: center;}
|
||||
|
||||
/* 输入框 */
|
||||
.from-item{border: 0px #000 solid; margin-bottom: 15px;}
|
||||
.s-input{width: 100%; line-height: 32px; height: 32px; text-indent: 1em; outline: 0; border: 1px #ccc solid; border-radius: 3px; transition: all 0.2s;}
|
||||
.s-input{font-size: 12px;}
|
||||
.s-input:focus{border-color: #409eff}
|
||||
|
||||
/* 登录按钮 */
|
||||
.s-btn{ text-indent: 0; cursor: pointer; background-color: #409EFF; border-color: #409EFF; color: #FFF;}
|
||||
.s-btn:hover{background-color: #50aEFF;}
|
||||
|
||||
/* 重置按钮 */
|
||||
.reset-box{text-align: left; font-size: 12px;}
|
||||
.reset-box a{text-decoration: none;}
|
||||
.reset-box a:hover{text-decoration: underline;}
|
||||
|
||||
/* 确认授权按钮 */
|
||||
.confirm-btn{text-indent: 0; cursor: pointer; background-color: #409EFF; border: 1px #409EFF solid; color: #FFF; padding: 5px 15px;}
|
||||
.confirm-btn:hover{background-color: #50aEFF;}
|
||||
|
||||
/* loading框样式 */
|
||||
.ajax-layer-load.layui-layer-dialog{min-width: 0px !important; background-color: rgba(0,0,0,0.85);}
|
||||
.ajax-layer-load.layui-layer-dialog .layui-layer-content{padding: 10px 20px 10px 40px; color: #FFF;}
|
||||
.ajax-layer-load.layui-layer-dialog .layui-layer-content .layui-layer-ico{width: 20px; height: 20px; background-size: 20px 20px; top: 12px; }
|
||||
@ -0,0 +1,194 @@
|
||||
// OAuth-Server 后端 接口地址
|
||||
var baseUrl = "http://sa-oauth-server.com:8000";
|
||||
|
||||
|
||||
// ----------------------------------- 相关事件 -----------------------------------
|
||||
|
||||
// 显示默认区域
|
||||
function showDefaultRegion(){
|
||||
$('.content-box').hide();
|
||||
$('.region-default').show();
|
||||
}
|
||||
// 显示登录框区域
|
||||
function showLoginRegion(){
|
||||
$('.content-box').hide();
|
||||
$('.region-login').show();
|
||||
}
|
||||
// 显示确认授权框区域
|
||||
function showConfirmRegion(){
|
||||
$('.content-box').hide();
|
||||
$('.region-confirm').show();
|
||||
$('.show-clientId').text(getParam('client_id'));
|
||||
$('.show-scope').text(getParam('scope'));
|
||||
}
|
||||
|
||||
// 检查当前是否已经登录，如果已登录则直接开始跳转，如果未登录则等待用户输入账号密码
|
||||
function tryJump(){
|
||||
var data = location.search.substr(1);
|
||||
sa.ajax("/oauth2/getRedirectUri", data, function(res) {
|
||||
// 情况1：客户端未登录，返回 code=401，提示用户登录
|
||||
if(res.code === 401) {
|
||||
showLoginRegion();
|
||||
return;
|
||||
}
|
||||
|
||||
// 情况2：请求的 scope 需要客户端手动确认授权，返回 code=411，提示用户手动确认
|
||||
if(res.code === 411) {
|
||||
showConfirmRegion();
|
||||
return;
|
||||
}
|
||||
|
||||
// 情况3：已登录且请求的 scope 已确认授权，返回 code=200，data=最终重定向 url 地址(携带code码参数)
|
||||
if(res.code == 200) {
|
||||
console.log('跳转：', res.redirect_uri);
|
||||
location.href = res.redirect_uri;
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('未知状态码，', res.code, res);
|
||||
layer.alert('错误：' + JSON.stringify(res))
|
||||
})
|
||||
}
|
||||
|
||||
// 登录事件
|
||||
function doLogin() {
|
||||
// 开始登录
|
||||
var data = {
|
||||
name: $('[name=name]').val(),
|
||||
pwd: $('[name=pwd]').val()
|
||||
};
|
||||
sa.ajax("/oauth2/doLogin", data, function(res) {
|
||||
if(res.code == 200) {
|
||||
localStorage.setItem('satoken', res.satoken);
|
||||
layer.msg('登录成功', {anim: 0, icon: 6 });
|
||||
setTimeout(function() {
|
||||
location.reload();
|
||||
}, 800);
|
||||
} else {
|
||||
layer.msg(res.msg, {anim: 6, icon: 2 });
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 确认授权事件
|
||||
function yes() {
|
||||
var data = location.search.substr(1) + '&build_redirect_uri=true';
|
||||
sa.ajax("/oauth2/doConfirm", data, function(res) {
|
||||
if(res.code == 200) {
|
||||
layer.msg('确认授权成功，即将跳转...', {anim: 0, icon: 6 });
|
||||
setTimeout(function() {
|
||||
console.log('跳转：', res.redirect_uri);
|
||||
location.href = res.redirect_uri;
|
||||
}, 800);
|
||||
} else {
|
||||
layer.msg(res.msg, {anim: 6, icon: 2 });
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 拒绝授权事件
|
||||
function no() {
|
||||
var url = joinParam(getParam('redirect_uri'), "handle=refuse&msg=用户拒绝了授权");
|
||||
location.href = url;
|
||||
}
|
||||
|
||||
// 页面加载完毕后触发
|
||||
window.onload = function() {
|
||||
tryJump();
|
||||
|
||||
// 绑定回车事件
|
||||
$('[name=name],[name=pwd]').bind('keypress', function(event){
|
||||
if(event.keyCode == "13") {
|
||||
$('.login-btn').click();
|
||||
}
|
||||
});
|
||||
|
||||
// 输入框获取焦点
|
||||
$("[name=name]").focus();
|
||||
}
|
||||
|
||||
|
||||
|
||||
// ----------------------------------- 工具函数封装 -----------------------------------
|
||||
|
||||
// sa
|
||||
var sa = {};
|
||||
|
||||
// 打开loading
|
||||
sa.loading = function(msg) {
|
||||
layer.closeAll(); // 开始前先把所有弹窗关了
|
||||
return layer.msg(msg, {icon: 16, shade: 0.3, time: 1000 * 20, skin: 'ajax-layer-load'});
|
||||
};
|
||||
|
||||
// 隐藏loading
|
||||
sa.hideLoading = function() {
|
||||
layer.closeAll();
|
||||
};
|
||||
|
||||
// 封装一下Ajax
|
||||
sa.ajax = function(url, data, successFn) {
|
||||
sa.loading("加载中...");
|
||||
$.ajax({
|
||||
url: baseUrl + url,
|
||||
type: "post",
|
||||
data: data,
|
||||
dataType: 'json',
|
||||
headers: {
|
||||
'X-Requested-With': 'XMLHttpRequest',
|
||||
'satoken': localStorage.getItem('satoken')
|
||||
},
|
||||
success: function(res){
|
||||
sa.hideLoading();
|
||||
console.log('返回数据：', res);
|
||||
successFn(res);
|
||||
},
|
||||
error: function(xhr, type, errorThrown){
|
||||
sa.hideLoading();
|
||||
if(xhr.status == 0){
|
||||
return alert('无法连接到服务器，请检查网络');
|
||||
}
|
||||
return alert("异常：" + JSON.stringify(xhr));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 从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] + (pair[2] ? '=' + pair[2] : '');}
|
||||
}
|
||||
return(defaultValue == undefined ? null : defaultValue);
|
||||
}
|
||||
|
||||
// 在url上拼接上kv参数并返回
|
||||
function joinParam(url, parameStr) {
|
||||
if(parameStr == null || parameStr.length == 0) {
|
||||
return url;
|
||||
}
|
||||
var index = url.indexOf('?');
|
||||
// ? 不存在
|
||||
if(index == -1) {
|
||||
return url + '?' + parameStr;
|
||||
}
|
||||
// ? 是最后一位
|
||||
if(index == url.length - 1) {
|
||||
return url + parameStr;
|
||||
}
|
||||
// ? 是其中一位
|
||||
if(index > -1 && index < url.length - 1) {
|
||||
// 如果最后一位是 不是&, 且 parameStr 第一位不是 &, 就增送一个 &
|
||||
if(url.lastIndexOf('&') != url.length - 1 && parameStrindexOf('&') != 0) {
|
||||
return url + '&' + parameStr;
|
||||
} else {
|
||||
return url + parameStr;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 打印信息
|
||||
var str = "This page is provided by Sa-Token, Please refer to: " + "https://sa-token.cc/";
|
||||
console.log(str);
|
||||
|
||||
@ -0,0 +1,81 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<title>Sa-OAuth2-Server 认证中心（前后端分离版）</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<link rel="stylesheet" href="./login.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="view-box">
|
||||
<div class="bg-1"></div>
|
||||
|
||||
<!--
|
||||
将页面分为三块区域：
|
||||
- 未登录时显示区域2：登录框。
|
||||
- 已登录但请求的 scope 尚未手动确认授权，显示区域3：确认授权框。
|
||||
- 默认显示区域1：提示文字。
|
||||
-->
|
||||
|
||||
<!-- 区域1：默认显示 -->
|
||||
<div class="content-box region-default">
|
||||
<div class="login-box">
|
||||
<div class="message-box">
|
||||
加载中...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 区域2：登录框 -->
|
||||
<div class="content-box region-login">
|
||||
<div class="login-box">
|
||||
<div class="from-box">
|
||||
<h2 class="from-title">Sa-OAuth2-Server 认证中心（前后端分离版）</h2>
|
||||
<div class="from-item">
|
||||
<input class="s-input" name="name" placeholder="请输入账号" />
|
||||
</div>
|
||||
<div class="from-item">
|
||||
<input class="s-input" name="pwd" type="password" placeholder="请输入密码" />
|
||||
</div>
|
||||
<div class="from-item">
|
||||
<button class="s-input s-btn login-btn" onclick="doLogin()">登录</button>
|
||||
</div>
|
||||
<div class="from-item reset-box">
|
||||
<a href="javascript: location.reload();" >刷新</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 区域3：确认授权框 -->
|
||||
<div class="content-box region-confirm">
|
||||
<div class="login-box">
|
||||
<div class="from-box">
|
||||
<h2 class="from-title">Sa-OAuth2-Server 认证中心（前后端分离版）</h2><br>
|
||||
<div>
|
||||
<div><b>应用ID：</b><span class="show-clientId"></span></div>
|
||||
<div><b>请求授权：</b><span class="show-scope"></span></div>
|
||||
<br><br><div>------------- 是否同意授权 -------------</div><br>
|
||||
<div>
|
||||
<button class="confirm-btn" onclick="yes()">同意</button>
|
||||
<button class="confirm-btn" onclick="no()">拒绝</button>
|
||||
</div>
|
||||
<div style="height: 10px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部 版权 -->
|
||||
<div style="position: absolute; bottom: 40px; width: 100%; text-align: center; color: #666;">
|
||||
This page is provided by Sa-Token-OAuth2
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- scripts -->
|
||||
<script src="https://unpkg.zhimg.com/jquery@3.4.1/dist/jquery.min.js"></script>
|
||||
<script src="https://www.layuicdn.com/layer-v3.1.1/layer.js"></script>
|
||||
<script src="./login.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -40,7 +40,7 @@ public class SaOAuth2ServerController {
|
||||
oauth2Server.doLoginHandle = (name, pwd) -> {
|
||||
if("sa".equals(name) && "123456".equals(pwd)) {
|
||||
StpUtil.login(10001);
|
||||
return SaResult.ok();
|
||||
return SaResult.ok().set("satoken", StpUtil.getTokenValue());
|
||||
}
|
||||
return SaResult.error("账号名或密码错误");
|
||||
};
|
||||
|
||||
@ -0,0 +1,89 @@
|
||||
package com.pj.oauth2.h5;
|
||||
|
||||
import cn.dev33.satoken.context.SaHolder;
|
||||
import cn.dev33.satoken.context.model.SaRequest;
|
||||
import cn.dev33.satoken.oauth2.SaOAuth2Manager;
|
||||
import cn.dev33.satoken.oauth2.config.SaOAuth2ServerConfig;
|
||||
import cn.dev33.satoken.oauth2.consts.SaOAuth2Consts;
|
||||
import cn.dev33.satoken.oauth2.data.generate.SaOAuth2DataGenerate;
|
||||
import cn.dev33.satoken.oauth2.data.model.AccessTokenModel;
|
||||
import cn.dev33.satoken.oauth2.data.model.CodeModel;
|
||||
import cn.dev33.satoken.oauth2.data.model.request.RequestAuthModel;
|
||||
import cn.dev33.satoken.oauth2.error.SaOAuth2ErrorCode;
|
||||
import cn.dev33.satoken.oauth2.exception.SaOAuth2Exception;
|
||||
import cn.dev33.satoken.oauth2.processor.SaOAuth2ServerProcessor;
|
||||
import cn.dev33.satoken.oauth2.template.SaOAuth2Template;
|
||||
import cn.dev33.satoken.util.SaResult;
|
||||
import org.springframework.web.bind.annotation.PostMapping;
|
||||
import org.springframework.web.bind.annotation.RestController;
|
||||
|
||||
/**
|
||||
* Sa-Token OAuth2 Server端 控制器 (前后端分离情形下所需要的接口)
|
||||
*/
|
||||
@RestController
|
||||
public class SaOAuth2ServerH5Controller {
|
||||
|
||||
/**
|
||||
* 获取最终授权重定向地址，形如：http://xxx.com/xxx?code=xxxxx
|
||||
*
|
||||
* <p> 情况1：客户端未登录，返回 code=401，提示用户登录 <p/>
|
||||
* <p> 情况2：请求的 scope 需要客户端手动确认授权，返回 code=411，提示用户手动确认 <p/>
|
||||
* <p> 情况3：已登录且请求的 scope 已确认授权，返回 code=200，redirect_uri=最终重定向 url 地址(携带code码参数) <p/>
|
||||
*
|
||||
* @return /
|
||||
*/
|
||||
@PostMapping("/oauth2/getRedirectUri")
|
||||
public Object getRedirectUri() {
|
||||
|
||||
// 获取变量
|
||||
SaRequest req = SaHolder.getRequest();
|
||||
SaOAuth2ServerConfig cfg = SaOAuth2Manager.getServerConfig();
|
||||
SaOAuth2DataGenerate dataGenerate = SaOAuth2Manager.getDataGenerate();
|
||||
SaOAuth2Template oauth2Template = SaOAuth2Manager.getTemplate();
|
||||
String responseType = req.getParamNotNull(SaOAuth2Consts.Param.response_type);
|
||||
|
||||
// 1、先判断是否开启了指定的授权模式
|
||||
SaOAuth2ServerProcessor.instance.checkAuthorizeResponseType(responseType, req, cfg);
|
||||
|
||||
// 2、如果尚未登录, 则先去登录
|
||||
long loginId = SaOAuth2Manager.getStpLogic().getLoginId(0L);
|
||||
if(loginId == 0L) {
|
||||
return SaResult.get(401, "need login", null);
|
||||
}
|
||||
|
||||
// 3、构建请求 Model
|
||||
RequestAuthModel ra = SaOAuth2Manager.getDataResolver().readRequestAuthModel(req, loginId);
|
||||
|
||||
// 4、校验：重定向域名是否合法
|
||||
oauth2Template.checkRedirectUri(ra.clientId, ra.redirectUri);
|
||||
|
||||
// 5、校验：此次申请的Scope，该Client是否已经签约
|
||||
oauth2Template.checkContractScope(ra.clientId, ra.scopes);
|
||||
|
||||
// 6、判断：如果此次申请的Scope，该用户尚未授权，则转到授权页面
|
||||
boolean isNeedCarefulConfirm = oauth2Template.isNeedCarefulConfirm(ra.loginId, ra.clientId, ra.scopes);
|
||||
if(isNeedCarefulConfirm) {
|
||||
// code=411，需要用户手动确认授权
|
||||
return SaResult.get(411, "need confirm", null);
|
||||
}
|
||||
|
||||
// 7、判断授权类型，重定向到不同地址
|
||||
// 如果是 授权码式，则：开始重定向授权，下放code
|
||||
if(SaOAuth2Consts.ResponseType.code.equals(ra.responseType)) {
|
||||
CodeModel codeModel = dataGenerate.generateCode(ra);
|
||||
String redirectUri = dataGenerate.buildRedirectUri(ra.redirectUri, codeModel.code, ra.state);
|
||||
return SaResult.ok().set("redirect_uri", redirectUri);
|
||||
}
|
||||
|
||||
// 如果是 隐藏式，则：开始重定向授权，下放 token
|
||||
if(SaOAuth2Consts.ResponseType.token.equals(ra.responseType)) {
|
||||
AccessTokenModel at = dataGenerate.generateAccessToken(ra, false, null);
|
||||
String redirectUri = dataGenerate.buildImplicitRedirectUri(ra.redirectUri, at.accessToken, ra.state);
|
||||
return SaResult.ok().set("redirect_uri", redirectUri);
|
||||
}
|
||||
|
||||
// 默认返回
|
||||
throw new SaOAuth2Exception("无效 response_type: " + ra.responseType).setCode(SaOAuth2ErrorCode.CODE_30125);
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user