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

Question

我有一个Spring Boot应用程序作为后端和Angular 6前端。它们分开工作非常好，我以this guide为起点。现在到了要使用外部OAuth验证用户身份以访问其某些WoW角色数据的地步。

对于如何使用OAuth限制对后端的访问，我有一个不错的主意，因为Spring Security使这很容易。我正在苦苦挣扎的是，如果我的用户已通过身份验证并获得访问角色A的授权，我该如何在前端和后端上处理此问题？

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

Answer 1

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

现在，答案很长：

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

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

现在答案更长：

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