OAuth 2.0（SSO 单点登录)

OAuth 2.0 的概念讲解，可以阅读如下三篇文章：

重点是理解 授权码模式 和 密码模式，它们是最常用的两种授权模式。

本文，我们也会基于它们，分别实现 SSO 单点登录。

授权模式的选择，其实非常简单，总结起来就是一张图：

问题一：什么场景下，使用客户端模式（Client Credentials）？

如果令牌拥有者是机器的情况下，那就使用客户端模式。 例如说：

实际的案例，我们接入微信公众号时，会使用 appid 和 secret 参数，获取 Access token (opens new window) 访问令牌。

问题二：什么场景下，使用密码模式（Resource Owner Password Credentials）？

接入的 Client 客户端，是属于自己的情况下，可以使用密码模式。 例如说：

不过，如果客户端是第三方的情况下，使用密码模式的话，该客户端是可以拿到用户的账号、密码，存在安全的风险，此时可以考虑使用授权码或简化模式。

问题三：什么场景下，使用授权码模式（Authorization Code）？

接入的 Client 客户端，是属于第三方的情况下，可以使用授权码模式。例如说：

当然，如果客户端是自己的情况下，也可以采用授权码模式。例如说：

问题四：什么场景下，使用简化模式（Implicit）？

简化模式，简化 的是授权码模式的流程的 第二步，差异在于：

暂时没有特别好的案例，感兴趣可以看看如下文档，也可以不看：

问题五：该项目中，使用了哪些授权模式？

如上图所示，分成 外部授权 和 内部登录 两种方式。

① 红色的“外部授权”：基于【授权码模式】，实现 SSO 单点登录，将用户授权给接入的客户端。客户端可以是内部的其它管理系统，也可以是外部的第三方。

② 绿色的“内部登录”：管理后台的登录接口，还是采用传统的 /admin-api/system/auth/login (opens new window) 账号密码登录，并没有使用【密码模式】，主要考虑降低大家的学习成本，如果没有将用户授权给其它系统的情况下，这样做已经可以很好的满足业务的需要。当然，这里也可以将管理后台作为一个客户端，使用【密码模式】进行授权。

另外，考虑到 OAuth 2.0 使用的访问令牌 + 刷新令牌可以提供更好的安全性，所以即使是传统的账号密码登录，也复用了它作为令牌的实现。

实现 OAuth 2.0 的功能，一般采用 Spring Security OAuth (opens new window) 或 Spring Authorization Server (opens new window)(SAS) 框架，前者已废弃，被后者所替代。但是使用它们，会面临三大问题：

⚔ 因此，项目参考多个 OAuth 2.0 框架，自研实现 OAuth 2.0 的功能，具备学习成本小、排查问题容易、定制成本低的优点，支持多种授权模式，并内置 SSO 单点登录的功能。

友情提示：具备一定规模的互联网公司，基本不会直接采用 Spring Security OAuth 或 Spring Authorization Server 框架，也是采用自研的方式，更好的满足自身的业务需求与技术拓展。

🙂 另外，通过学习项目的 OAuth 2.0 实现，可以进一步加深对 OAuth 2.0 的理解，知其然而不知其所以然！

最终实现的整体架构，如下图所示：

详细的代码实现，我们在视频中进行讲解。

示例代码见 https://github.com/YunaiV/ruoyi-vue-pro/tree/master/yudao-example/yudao-sso-demo-by-code (opens new window) 地址，整体流程如下图所示：

具体的使用流程如下：

① 第一步，分别启动 ruoyi-vue-pro 项目的前端和后端。注意，前端需要使用 Vue2 版本，因为 Vue3 版本暂时没有实现 SSO 页面。

② 第二步，访问 系统管理 -> OAuth 2.0 -> 应用管理 (opens new window) 菜单，新增一个应用（客户端），信息如下图：

ps：如果已经有这个客户端，可以不用新增。

③ 第三步，运行 SSODemoApplication (opens new window) 类，启动接入方的项目，它已经包含前端和后端部分。启动成功的日志如下：

④ 第四步，浏览器访问 http://127.0.0.1:18080/index.html (opens new window) 地址，进入接入方的 index.html 首页。因为暂未登录，可以点击「跳转」按钮，跳转到 ruoyi-vue-pro 项目的 SSO 单点登录页。

疑问：为什么没有跳转到 SSO 单点登录页，而是跳转到 ruoyi-vue-pro 项目的登录页？

因为在 ruoyi-vue-pro 项目也未登录，所以先跳转到该项目的登录页，使用账号密码进行登录。登录完成后，会跳转回 SSO 单点登录页，继续完成 OAuth 2.0 的授权流程。

⑤ 第五步，勾选 "访问你的个人信息" 和 "修改你的个人信息"，点击「同意授权」按钮，完成 code 授权码的申请。

⑥ 第六步，完成授权后，会跳转到接入方的 callback.html 回调页，并在 URL 上可以看到 code 授权码。

⑦ 第七步，点击「确认」按钮，接入方的前端会使用 code 授权码，向接入方的后端获取 accessToken 访问令牌。

而接入方的后端，使用接收到的 code 授权码，通过调用 ruoyi-vue-pro 项目的后端，获取到 accessToken 访问令牌，并最终返回给接入方的前端。

⑧ 第八步，在接入方的前端拿到 accessToken 访问令牌后，跳转回自己的 index.html 首页，并进一步从 ruoyi-vue-pro 项目获取到该用户的昵称等个人信息。后续，你可以执行「修改昵称」、「刷新令牌」、「退出登录」等操作。

示例代码的具体实现，与详细的解析，可以观看如下视频：

示例代码见 https://github.com/YunaiV/ruoyi-vue-pro/tree/master/yudao-example/yudao-sso-demo-by-password (opens new window) 地址，整体流程如下图所示：

具体的使用流程如下：

① 第一步，分别启动 ruoyi-vue-pro 项目的前端和后端。注意，前端需要使用 Vue2 版本，因为 Vue3 版本暂时没有实现 SSO 页面。

② 第二步，访问 系统管理 -> OAuth 2.0 -> 应用管理 (opens new window) 菜单，新增一个应用（客户端），信息如下图：

ps：如果已经有这个客户端，可以不用新增。

③ 第三步，运行 SSODemoApplication (opens new window) 类，启动接入方的项目，它已经包含前端和后端部分。启动成功的日志如下：

④ 第四步，浏览器访问 http://127.0.0.1:18080/index.html (opens new window) 地址，进入接入方的 index.html 首页。因为暂未登录，可以点击「跳转」按钮，跳转到 login.html 登录页。

⑤ 第五步，点击「登录」按钮，调用 ruoyi-vue-pro 项目的后端，获取到 accessToken 访问令牌，完成登录操作。

⑥ 第六步，登录完成后，跳转回自己的 index.html 首页，并进一步从 ruoyi-vue-pro 项目获取到该用户的昵称等个人信息。后续，你可以执行「修改昵称」、「刷新令牌」、「退出登录」等操作。

示例代码的具体实现，与详细的解析，可以观看如下视频：

每个表的具体设计，与详细的解析，可以观看如下视频：