在 Angular 中实现 OAuth 2.0 授权代码授予

Posted 2023-03-04

【中文标题】在 Angular 中实现 OAuth 2.0 授权代码授予

【英文标题】：Implementing OAuth 2.0 Authorization code grant in Angular

【发布时间】：2019-07-07 05:53:42

【问题描述】：

我们必须在我的客户项目中集成 OAuth 2.0 授权码授予。目前，该应用程序使用本机登录页面。我们需要删除该页面并将未登录的用户重定向到 AS 登录页面，https://as.com/as/authorization.oauth2?client_id=UoM&response_type=code。在AS端登录成功后，我们被重定向到配置的redirect_uri。此时，我的客户端应用程序如何知道用户已在 AS 上登录？如何在客户端维护会话？此外，我需要交换身份验证代码并访问令牌，并将其用于后续服务器 API 调用。那么如何实现这一点并将令牌作为标头发送？

该应用程序是用 Angular 4 编写的。我以前从未参与过客户端项目，因此很困惑。

我只需要简要说明如何做到这一点/code-sn-ps。

【问题讨论】：

如果有帮助请告诉我：***.com/a/54011649/1235935

【参考方案1】：

您可以使用this 库在您的站点上实现 OAuth2/OpenID Connect 登录。

SPA 不应使用隐式授权流，更多 here。

OAuth2 标准是一种无状态的授权框架。这意味着每次您想从资源服务器访问资源时，您都需要提供有效的访问令牌 - 它应该作为“授权”标头提供。访问令牌是一种短命的令牌。有这种东西的主要原因是即使令牌在连接过程中被盗，攻击者将来也无法使用它。还有一个刷新令牌。这种令牌允许您检索访问令牌而无需再次显示登录页面，直到它过期。

【参考方案2】：

我不是该领域的专家，但我会尽力帮助您。

不完全确定，但我认为对于 Angular 应用程序（或任何其他 SPA），您应该使用隐式授权流程。

如何在客户端维护会话

网络是无状态的，因此实际上没有会话。当您使用令牌（如 JWT）时，您应该在它们过期之前更新它们。

我需要与访问令牌交换身份验证码并将其用于 后续服务器 API 调用。那么我怎样才能做到这一点并发送 令牌作为标头？

您应该使用访问令牌调用受保护的 API 资源。在对 API 进行 http 调用时，您可以使用拦截器来放置 auth 标头（如 JWT）。

这里有一个很好的例子来说明如何实现这一点：https://auth0.com/docs/quickstart/spa/angular2/01-login#configure-auth0

【讨论】：

不推荐使用隐式授权流程，而是使用带有 PKCE 的授权代码。 oauth.net/2/grant-types 和 aaronparecki.com/oauth-2-simplified/#authorization

【参考方案3】：

您可以使用 state 参数来维护这些重定向之间的信息。状态可以作为https://as.com/as/authorization.oauth2?client_id=UoM&response_type=code 中的查询字符串传递。在您收到重定向 url 中的代码后，我认为在您的情况下这是一些角度组件，您可以使用 ngOnInit 中的activatedRoute.queryParams 访问该代码，并可以使用它来获取访问令牌并将其存储在某些会话中的用户 ID 中/本地存储。 为了在标头中发送令牌，您可以使用角度拦截器将其注入每个 API 请求的授权标头中。