Angular 5 + OAuth2:未使用库设置令牌 [angular-oauth2-oidc]

Posted

技术标签:

【中文标题】Angular 5 + OAuth2:未使用库设置令牌 [angular-oauth2-oidc]【英文标题】:Angular 5 + OAuth2: Token not getting set with libary [angular-oauth2-oidc] 【发布时间】:2018-06-30 08:37:48 【问题描述】:

我正在尝试将我的 Angular 应用配置为使用 OAuth2 库 (angular-oauth2-oidc)。

在 auth.service.ts 文件中配置了我的 OAuthService:

this.oauthService.loginUrl = 'https://serverdomain.com/authorization/';
    this.oauthService.redirectUri = 'http://localhost:4200/auth';
    this.oauthService.clientId = '1111-2222-3333-4444-5555-6666-7777';
    this.oauthService.setStorage(localStorage);
    this.oauthService.requireHttps = false;
    this.oauthService.responseType = 'token';
    this.oauthService.tokenEndpoint = 'https://serverdomain.com/token/';
    this.oauthService.oidc = false;
    this.oauthService.issuer = 'https://serverdomain.com/authorization/';
    this.oauthService.tokenValidationHandler = new JwksValidationHandler();
    this.oauthService.requestAccessToken = true;
    this.oauthService.showDebugInformation = true;
    this.oauthService.scope = 'openid profile email';
    this.oauthService.tryLogin(
      onTokenReceived: context => 
        console.log(context);
      
    );

obtainAccessToken() 
    this.oauthService.initImplicitFlow();
  

isLoggedIn() 
    if (this.oauthService.getAccessToken() === null) 
      return false;
    
    return true;
  

  logout() 
    this.oauthService.logOut();
    location.reload();
  

logAuthData() 
    console.log(this.oauthService.hasValidAccessToken());
  

在我的 home 组件中,我添加了一个按钮来触发隐式流程并获取访问令牌。

在初始化隐式流程后,应用重定向到我登录的提供商的正确登录页面,并重定向到我的 OAuth 配置的 redirectUri。

但是

如果我尝试获取一个状态,例如我调用 isLoggedIn 方法,我总是得到错误。此外,在 hasValidAccessToken() 处有错误的返回。

谁能展示如何正确配置 Angular 5 和 oauth2? 我还需要一种可能性来存储我给定的访问令牌,以便在我的休息方法中使用它们来获取数据。

【问题讨论】:

同样的问题,有更新吗? 同样的问题。有人找到问题的根源了吗? 任何更新,面临同样的问题,Angular 7 和 angular-oauth2-oidc: ^5.0.2。可能的问题可能是我们用于开发的自签名证书,有人可以验证吗? 【参考方案1】:

需要在您的配置中添加 JWKs 令牌验证器。并根据您的响应类型设置 Jwks

this.oauthService.tokenValidationHandler = new JwksValidationHandler();

【讨论】:

以上是关于Angular 5 + OAuth2:未使用库设置令牌 [angular-oauth2-oidc]的主要内容,如果未能解决你的问题,请参考以下文章

在外部 JavaScript 库中定义函数时如何检查未定义? (Angular4/5)

春季 Oauth2。 DaoAuthenticationProvider 中未设置密码编码器

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

带有oauth2 sso和angular 2 CORS问题的spring zuul网关

API 未获取 oAuth2 令牌

Angular 6 Schematics 无效源(未定义)