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

时间:2019-02-13 11:49:14

标签: angular session oauth-2.0 authorization access

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

该应用程序是用Angular 4编写的。我以前从未在客户端项目上工作过,因此很困惑。

我只需要有关如何执行此操作的简短要点/代码段。

3 个答案:

答案 0 :(得分:1)

我不是该领域的专家,但我会尽力为您提供帮助。

不确定,但我认为对于Angular应用程序(或任何其他SPA),您应该使用隐式授予流

  

如何在客户端维护会话

网络是无状态的,因此实际上没有会话。当您使用令牌(如JWT的令牌)时,应在令牌过期之前对其进行更新。

  

我需要与交换验证码并访问令牌,并将其用于   随后的服务器API调用。那么我该如何实现并发送   令牌作为标头?

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

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

答案 1 :(得分:1)

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

SPA {更多,here。}

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

答案 2 :(得分:0)

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