如何在 SPA 中实现 OAuth 隐式流？

Posted 2023-02-27

【中文标题】如何在 SPA 中实现 OAuth 隐式流？

【英文标题】：How do I implement OAuth implicit flow in a SPA?

【发布时间】：2019-06-12 05:43:27

【问题描述】：

我的网络应用程序设置如下：

带有 API 的资源服务器（使用 Spring Security） 托管登录表单页面的授权服务器 (Spring Security OAuth) 一个 SPA 客户端（Angular 6 / 路由 / angular-oauth-oidc 库） 我正在使用隐式流

我正在尝试找出实现登录流程的最佳方式。正如我现在所拥有的，当用户尝试访问受保护的路由并且没有令牌时，他会被重定向到身份验证服务器的登录表单（通过警卫）。如果登录成功，浏览器将重定向回 Angular 应用的受保护路由。由于用户现在拥有令牌，因此守卫允许访问。

问题是我试图弄清楚我的 Angular 应用程序两次：一次是在我登录之前，一次是在我登录之后。现代浏览器会缓存实际的 SPA 资源（.js、.html、.css. 等），因此不会再对服务器造成任何影响。但是 Angular 应用程序需要很长时间才能加载，并且在这个流程中，SPA 加载了两次。

有没有办法让 Angular 应用程序只加载一次？

【问题讨论】：

您可以打开一个登录弹出窗口，然后让登录窗口通知所有者令牌值是什么。您将在弹出窗口中使用window.opener。 developer.mozilla.org/en-US/docs/Web/API/Window/opener

我的用户体验设计不允许弹出窗口；但是，对于可能能够利用它们的其他人来说，这是一个很好的建议。

【参考方案1】：

您可以按照 cgTag 的建议使用弹出窗口，但弹出窗口在小型设备上存在问题，而且根据我的经验，人们通常不喜欢它们，即使在台式计算机上也是如此。您不能使用iframe，因为用户应该会看到身份验证服务器的 URL 和证书。

我认为解决问题的最佳方法是优化您的 SPA 以加快加载速度。无论如何，您都需要它来加载第一页。有几种方法可以加快加载速度——提前 (AOT) 编译、tree-shaking、延迟加载、服务器端预渲染等。如果你使用Angular CLI，它已经内置了对其中一些的支持，所以很容易尝试看看它们是否带来了一些改进。

【讨论】：

弹出窗口不是我的用例的有效解决方案。不过，您关于加快加载速度的建议很好；我会尝试其中一些。