如何使用 IdentityServer4 为 Angular 应用程序实现隐式流程答案

【问题标题】：How to implement Implicit Flow for Angular application using IdentityServer4如何使用 IdentityServer4 为 Angular 应用程序实现隐式流程
【发布时间】：2019-03-06 03:45:29
【问题描述】：

我一直在阅读 IdentityServer4 的快速入门，但对于如何为 SPA 实现隐式流程仍有一些疑问。

我的设置如下：

IdentityServer4 作为令牌服务器需要保护的 API（使用 WebAPICore）使用 Angular 的 SPA

我的问题很简单：用户输入用户名和密码的登录屏幕是 IdentityServer 提供的，还是 Angular 应用程序提供了这个登录窗口？如果我们要使用 IdentityServer 提供的登录窗口，最佳做法是直接重定向到它，还是应该在 Angular 应用程序的 iframe 中显示？

【问题讨论】：

首先不要在angular6中使用iframe。我假设您的 api 路由在您的令牌服务器上，因此您可以在 angular 6 上拥有一个登录表单，只需使用 angular 6 附带的 HttpModule 和 HttpClient 来执行您的获取或发布请求并相应地订阅响应
api 路由（webapi 核心）和令牌服务器运行在不同的服务器上。按照设计，令牌服务器被创建为一个完全独立于它要保护的资源的应用程序。

标签： angular login identityserver4 implicit flow

【解决方案1】：

如果使用隐式（或任何其他基于浏览器的流程，如混合或授权代码），则登录 UI 位于 IDP 上，您将执行完整的浏览器重定向以执行交互式身份验证。建立 IDP 会话后，用于调用后端的访问令牌可以在后台静默刷新。

还值得注意的是，JavaScript 客户端的隐式流现在已被弃用，您应该将混合与 PKCE 一起使用。 oidc-client-js 的最新版本支持开箱即用的混合以及自动静默令牌更新和会话监控。

【讨论】：

感谢您的清晰解释。我正在查看最近的 OAuth 规范草案，显然他们说不要使用隐式，但他们建议使用 PKCE 的授权代码，而不是混合的。 Hybrid 比授权码更适合 Angular SPA 吗？
这里是 OAuth 草案的链接
tools.ietf.org/html/…
你说得对，推荐确实是使用授权码。混合和授权码非常相似——混合只包含一个 id_token 而授权码没有，但获取访问令牌的过程是相同的。