mirror of
https://gitee.com/dromara/sa-token.git
synced 2026-05-14 04:42:09 +08:00
docs: 图片地址更换为本地文件 (SSO篇)
This commit is contained in:
click33
@@ -32,7 +32,7 @@ Sa-Token-SSO 由简入难划分为三种模式，解决不同架构下的 SSO
|
||||
2. 后端同Redis：就是指多个系统可以连接同一个Redis。PS：这里并不需要把所有项目的数据都放在同一个Redis中，Sa-Token提供了 **`[权限缓存与业务缓存分离]`** 的解决方案，详情戳： <a href="#/plugin/alone-redis" target="_blank">Alone独立Redis插件</a>。
|
||||
3. 如果既无法做到前端同域，也无法做到后端同Redis，那么只能走模式三，Http请求获取会话（Sa-Token对SSO提供了完整的封装，你只需要按照示例从文档上复制几段代码便可以轻松集成）。
|
||||
|
||||
|
||||
<img src="/big-file/doc/sso/sa-token-sso--white.png" alt="sa-token-jss">
|
||||
|
||||
|
||||
### Sa-Token-SSO 特性
|
||||
|
||||
@@ -44,7 +44,7 @@ public Object logoutByAlone() {
|
||||
7. 整体完成。
|
||||
|
||||
|
||||
<button class="show-img" img-src="https://oss.dev33.cn/sa-token/doc/g/g3--sso3-logout.gif">加载动态演示图</button>
|
||||
<button class="show-img" img-src="/big-file/doc/sso/g3--sso3-logout.gif">加载动态演示图</button>
|
||||
|
||||
|
||||
这些逻辑 Sa-Token 内部已经封装完毕，你只需按照文档步骤集成即可。以模式三 demo 为例：
|
||||
@@ -76,19 +76,19 @@ public String index() {
|
||||
- [http://sa-sso-client2.com:9003/](http://sa-sso-client2.com:9003/)
|
||||
- [http://sa-sso-client3.com:9003/](http://sa-sso-client3.com:9003/)
|
||||
|
||||
|
||||
<img class="s-w-sh" src="/big-file/doc/sso/sso-type3-client-index.png" alt="sso-type3-client-index.png" />
|
||||
|
||||
在任意一个 client 里，点击 **`[注销]`** 按钮，即可单点注销成功（打开另外两个client，刷新一下页面，登录态丢失）。
|
||||
|
||||
<!--  -->
|
||||
|
||||
|
||||
<img class="s-w-sh" src="/big-file/doc/sso/sso-type3-slo-index.png" alt="sso-type3-slo-index.png" />
|
||||
|
||||
PS：这里我们为了方便演示，使用的是超链接跳页面的形式，正式项目中使用 Ajax 调用接口即可做到无刷单点登录退出。
|
||||
|
||||
例如，我们使用 [Apifox 接口测试工具](https://www.apifox.cn/) 可以做到同样的效果：
|
||||
|
||||
|
||||
<img class="s-w-sh" src="/big-file/doc/sso/sso-slo-apifox.png" alt="sso-slo-apifox.png" />
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
|
||||
当不知情的小红被诱导访问了这个URL时，它将被重定向至百度首页：
|
||||
|
||||
|
||||
<img class="s-w-sh" src="/big-file/doc/sso/sso-ticket-jc.png" alt="sso-ticket-jc">
|
||||
|
||||
可以看到，代表着用户身份的 Ticket 码也显现到了 URL 之中，借此漏洞，攻击者完全可以构建一个URL将小红的 Ticket 码自动提交到攻击者自己的服务器，伪造小红身份登录网站
|
||||
|
||||
@@ -41,7 +41,7 @@ sa-token.sso-server.clients.so-client3.allow-url=http://sa-sso-client1.com:9003/
|
||||
|
||||
再次访问上述链接：
|
||||
|
||||
|
||||
<img class="s-w-sh" src="/big-file/doc/sso/sso-feifa-rf.png" alt="sso-feifa-rf">
|
||||
|
||||
域名没有通过校验，拒绝授权！
|
||||
|
||||
|
||||
@@ -293,7 +293,7 @@ function setHtml(select, html) {
|
||||
|
||||
使用前端 ide 导入项目 `/sa-token-demo/sa-token-demo-sso/sa-token-demo-sso-server-h5`，浏览器访问 `sso-auth.html` 页面：
|
||||
|
||||
|
||||
<img class="s-w-sh" src="/big-file/doc/sso/sso-type2-server-h5-auth.png" alt="sso-type2-server-h5-auth.png" />
|
||||
|
||||
复制上述地址，将其配置到 Client 端的配置项 `sa-token.sso-client.auth-url` ，例如：
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
|
||||
有的时候，我们需要把 sso-server 搭建成一个平台中心，效果图大致如下：
|
||||
|
||||
|
||||
<img class="s-w-sh" src="/big-file/doc/sso/sso-home-jump.png" alt="sso-home-jump.png" />
|
||||
|
||||
如图所示，用户先从 sso-server 登录进入平台首页，在首页上有各个子系统的进入链接，用户点击链接进入子系统（免登录）。
|
||||
|
||||
@@ -90,6 +90,6 @@ public class HomeController {
|
||||
|
||||
首次访问，因为我们没有登录，所以会被重定向到 `/sso/auth` 登录页，我们登录上之后，便会跳转到平台中心首页：
|
||||
|
||||
|
||||
<img class="s-w-sh" src="/big-file/doc/sso/sso-home-jump-do.png" alt="sso-home-jump-do.png" />
|
||||
|
||||
依次点击三个链接，便可在跳转的同时自动登录上子系统。
|
||||
|
||||
@@ -288,18 +288,18 @@ public class SaSsoServerApplication {
|
||||
|
||||
启动项目，不出意外的情况下我们将看到如下输出：
|
||||
|
||||
|
||||
<img class="s-w-sh" src="/big-file/doc/sso/sso-server-start.png" alt="sso-server-start">
|
||||
|
||||
访问统一授权地址（仅测试 SSO-Server 是否部署成功，暂时还不需要点击登录）：
|
||||
- [http://localhost:9000/sso/auth](http://localhost:9000/sso/auth)
|
||||
|
||||
|
||||
<img class="s-w-sh" src="/big-file/doc/sso/sso-server-init-login--v43.png" alt="sso-server-init-login.png">
|
||||
|
||||
可以看到这个页面目前非常简陋，这是因为我们以上的代码示例，主要目标是为了带大家从零搭建一个可用的SSO认证服务端，所以就对一些不太必要的步骤做了简化。
|
||||
|
||||
大家可以下载运行一下官方仓库里的示例`/sa-token-demo/sa-token-demo-sso/sa-token-demo-sso-server/`，里面有制作好的登录页面：
|
||||
|
||||
|
||||
<img class="s-w-sh" src="/big-file/doc/sso/sso-server-init-login2.png" alt="sso-server-init-login2.png">
|
||||
|
||||
默认账号密码为：`sa / 123456`，先别着急点击登录，因为我们还没有搭建对应的 Client 端项目，
|
||||
真实项目中我们一般不会直接从浏览器访问 `/sso/auth` 授权地址的，我们需要在 Client 端点击登录按钮重定向而来。
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
而共享Redis，并不需要我们把所有项目的数据都放在同一个Redis中，Sa-Token提供了 **[权限缓存与业务缓存分离]** 的解决方案，详情戳：[Alone独立Redis插件](/plugin/alone-redis)。
|
||||
|
||||
|
||||
<button class="show-img" img-src="https://oss.dev33.cn/sa-token/doc/g/g3--sso1.gif">加载动态演示图</button>
|
||||
<button class="show-img" img-src="/big-file/doc/sso/g3--sso1.gif">加载动态演示图</button>
|
||||
|
||||
|
||||
OK，所有理论就绪，下面开始实战：
|
||||
@@ -252,19 +252,19 @@ public class SaSso1ClientApplication {
|
||||
|
||||
均返回：
|
||||
|
||||
|
||||
<img class="s-w-sh" src="/big-file/doc/sso/sso1--index.png" alt="sso1--index.png" />
|
||||
|
||||
然后点击登录，被重定向至SSO认证中心：
|
||||
|
||||
|
||||
<img class="s-w-sh" src="/big-file/doc/sso/sso1--login-page2--v43.png" alt="sso1--login-page2.png" />
|
||||
|
||||
我们登录之后，然后刷新页面：
|
||||
|
||||
|
||||
<img class="s-w-sh" src="/big-file/doc/sso/sso1-login-ok.png" alt="sso1-login-ok.png" />
|
||||
|
||||
刷新另外两个Client端，均显示已登录
|
||||
|
||||
|
||||
<img class="s-w-sh" src="/big-file/doc/sso/sso1-login-ok2.png" alt="sso1-login-ok2.png" />
|
||||
|
||||
测试完成
|
||||
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
所以第四步也将自动化，也就是单点登录的最终目的 —— 一次登录，处处通行。
|
||||
|
||||
|
||||
<button class="show-img" img-src="https://oss.dev33.cn/sa-token/doc/g/g3--sso2.gif">加载动态演示图</button>
|
||||
<button class="show-img" img-src="/big-file/doc/sso/g3--sso2.gif">加载动态演示图</button>
|
||||
|
||||
|
||||
下面我们按照步骤依次完成上述过程：
|
||||
@@ -299,11 +299,11 @@ public class SaSso2ClientApplication {
|
||||
|
||||
（注：先前版本文档测试demo端口号为9001，后为了方便区分三种模式改为了9002，因此出现文字描述与截图端口号不一致情况，请注意甄别，后不再赘述）
|
||||
|
||||
|
||||
<img class="s-w-sh" src="/big-file/doc/sso/sso-client-index.png" alt="sso-client-index.png" />
|
||||
|
||||
(2) 首次打开，提示当前未登录，我们点击 **`登录`** 按钮，页面会被重定向到登录中心
|
||||
|
||||
|
||||
<img class="s-w-sh" src="/big-file/doc/sso/sso-server-auth--v43.png" alt="sso-server-auth.png" />
|
||||
|
||||
(3) SSO-Server提示我们在认证中心尚未登录，我们点击 **`登录`** 按钮进行模拟登录
|
||||
|
||||
@@ -311,21 +311,21 @@ public class SaSso2ClientApplication {
|
||||
|
||||
(4) SSO-Server认证中心登录成功，系统重定向回 client
|
||||
|
||||
|
||||
<img class="s-w-sh" src="/big-file/doc/sso/sso-client-index-ok.png" alt="sso-client-index-ok.png" />
|
||||
|
||||
(5) 页面被重定向至`Client`端首页，并提示登录成功，至此，`Client1`应用已单点登录成功！
|
||||
|
||||
(6) 我们再次访问`Client2`：[http://sa-sso-client2.com:9002/](http://sa-sso-client2.com:9002/)
|
||||
|
||||
|
||||
<img class="s-w-sh" src="/big-file/doc/sso/sso-client2-index.png" alt="sso-client2-index.png" />
|
||||
|
||||
(7) 提示未登录，我们点击 **`登录`** 按钮，会直接提示登录成功
|
||||
|
||||
|
||||
<img class="s-w-sh" src="/big-file/doc/sso/sso-client2-index-ok.png" alt="sso-client2-index-ok.png" />
|
||||
|
||||
(8) 同样的方式，我们打开`Client3`，也可以直接登录成功：[http://sa-sso-client3.com:9002/](http://sa-sso-client3.com:9002/)
|
||||
|
||||
|
||||
<img class="s-w-sh" src="/big-file/doc/sso/sso-client3-index-ok.png" alt="sso-client3-index-ok.png" />
|
||||
|
||||
至此，测试完毕！
|
||||
|
||||
@@ -333,7 +333,7 @@ public class SaSso2ClientApplication {
|
||||
|
||||
我们可以通过 F12控制台 Network 跟踪整个过程
|
||||
|
||||
|
||||
<img class="s-w-sh" src="/big-file/doc/sso/sso-genzong.png" alt="sso-genzong" />
|
||||
|
||||
<!--
|
||||
### 5、运行官方仓库
|
||||
@@ -347,7 +347,7 @@ public class SaSso2ClientApplication {
|
||||
> 然后访问：
|
||||
> - [http://sa-sso-client1.com:9002/](http://sa-sso-client1.com:9002/)
|
||||
|
||||
|
||||
<img class="s-w-sh" src="/big-file/doc/sso/sso-server-login-hua.png" alt="sso-server-login-hua" />
|
||||
|
||||
默认测试密码：`sa / 123456`，其余流程保持不变
|
||||
-->
|
||||
|
||||
Reference in New Issue
Block a user