如何使用 Spring Boot + Angular 处理外部 OAuth2 身份验证

Question

我有一个 Spring Boot 应用程序作为后端和一个 Angular 6 前端。它们分别工作得很好，我使用this guide 作为起点。我现在要使用外部 OAuth 对我的用户进行身份验证，以访问他们的一些《魔兽世界》角色数据。

我对如何使用 OAuth 限制对后端的访问有一个不错的想法，因为 Spring Security 使这非常容易。我正在努力解决的问题是，如果我的用户经过身份验证 + 有权访问字符 A，我该如何在前端 和 后端处理这个问题？

由于 Angular 正在处理 HTML 页面的路由，并且这些 HTML 页面调用我的后端，我不确定如何将授权扩展到 Angular。我可以展示代码，但我认为这更像是一个概念问题而不是代码问题。

Answer 1

你需要给你的前端代码一些 OAuth 的爱。例如this 是一个很好的库（我使用它），但是 YMMW。

现在，长答案：

OAuth 规范定义了几种不同的“流”，客户端应用程序常用的一种是隐式流。这意味着，如果您想使用 vanilla，请自己实现，您需要执行以下操作：

1. 页面加载时：检查 URL 状态。如果找到令牌和数据，请将它们存储在 sessionStorage 中。
2. 如果 URL 中没有令牌，请检查 sessionStorage 中的令牌。
3. 对您的后端的每个 HTTP 请求，您都将 accessToken 附加到标头中。
4. 对于登录/注销，您需要使用专门设计的 URL 和参数将用户重定向到 OAuth 服务器。

现在更长的答案：

1. 在页面加载时，检查您是否有一些状态，例如 sessionStorage。比如，保存的accessToken 或类似的东西。 （不完全是，但请继续阅读）。
2. 如果是，您可能想在 OAuth 服务器上验证此令牌（有时您还会将过期时间戳保存在存储中，您也可以检查那个）。
3. 在对后端的任何 Http 请求中，将此令牌（accessToken 或有时是 id_token，或者它可能是 jwt、不记名等，我们只是说令牌）附加到 headers每一个请求。通常它类似于Authentication 标头，其值为Bearer ${ token }。
   • 后端现在可以检查此令牌，如果有效，则返回您的数据，如果无效或丢失，则返回 401。（它也可以重定向到身份验证服务器，但请不要这样做）。李>
4. 如果页面加载时没有 标记，您可以向用户指出这一点。比如，请他们登录。
5. 此登录按钮将将用户重定向到 OAuth 登录页面。他们离开你的页面。这是一个特制的 URL，提供您的应用数据，例如 http://server/auth/your-app-name?clientId=your-client-id&redirectUrl=http://your-angular-page/where-you-wanna-land。这看起来如何，取决于服务器到服务器，实施到实施。
   • 现在用户登陆他们的登录页面，提供他的用户名/密码/权限等（或者如果他们已经在那里登录，mgiht 立即重定向回来）。在他们登录并授予您的应用权限后，身份验证服务器将用户重定向回来。
6. 现在您回到了第 1 步。但您首先要检查 URL，而不是检查 sessionStorage。 因为 url 看起来像：http://your-angular-page/your-route?accessToken=<some_token>&... 和其他类似的东西。现在您读取 accessToken 并将其存储在本地，您就完成了。