OAuth2 和 angular-auth2-oidc 库的问题 - PKCE 代码流程

Question

我是 OAuth2 和 angular-auth2-oidc 库的新手，所以如果我犯了一些新手错误，请耐心等待。

我想要实现的目标： 用户单击主页中的登录链接，他将被发送到提供商的站点进行登录，然后使用令牌重定向回主页。

到目前为止的结果： 用户被发送到提供商的站点进行登录并成功发送回我的站点主页，但我没有获得任何令牌。 我在

ngOnit()

的控制台中输出了一些数据，它们都是 null、未定义或 false。

在

ngOnit()

函数内，我还输出一些事件，我在控制台中得到的事件是

token_refresh_error

。我没有在代码中明确执行任何令牌刷新，但我仍然收到此错误。

在本文的Error小标题下，我添加了有关错误的屏幕截图。

这是我的配置和实现：

这是我的 OAuth2 提供商的 openid 配置：

authorization_endpoint                  "https://DOMAIN_PROVIDER/op/v1/auth"
code_challenge_methods_supported    
    0                                   "plain"
    1                                   "S256"
end_session_endpoint                    "https://DOMAIN_PROVIDER/op/v1/logout"
grant_types_supported   
    0                                    "authorization_code"
id_token_signing_alg_values_supported   
    0                                    "RS256"
issuer                                   "https://DOMAIN_PROVIDER/op"
jwks_uri                                 "https://DOMAIN_PROVIDER/op/v1/keys"
response_modes_supported    
    0                                    "query"
    1                                    "fragment"
    2                                    "form_post"
response_types_supported    
    0                                    "code"
scopes_supported    
    0                                    "openid"
subject_types_supported 
    0                                    "public"
token_endpoint                           "https://DOMAIN_PROVIDER/op/v1/token"
token_endpoint_auth_methods_supported   
    0                                    "client_secret_basic"
    1                                    "client_secret_post"
userinfo_endpoint                        "https://DOMAIN_PROVIDER/op/v1/userinfo"

这是我的实现：

//首页组件

export class HomeComponent implements OnInit {

  private oAuthConfig: AuthConfig;

  constructor(private oAuthService: OAuthService) { }

   ngOnInit() {

     // IN THIS METHOD I'M OUTPUTTING ALOT OF STUFF TO THE CONSOLE TO SEE IF IT IS WORKING

      if (!this.oAuthService.getAccessToken()) {
         this.initOAuthConfig();
         console.log('__________ACCESS-TOKEN IS NOT SET___________');
      } else {
         console.log('___ACCESS-TOKEN IS SET:', this.oAuthService.getAccessToken());
      }

      console.log('_____GRANTED-SCOPE:', this.oAuthService.getGrantedScopes());
      console.log('______IDENTITY-CLAIMS:', this.oAuthService.getIdentityClaims());
      console.log('______HAS-ACCESS-TOKEN?:', this.oAuthService.hasValidAccessToken());
      console.log('_____HAS-ACCESS-TOKEN?:', this.oAuthService.hasValidIdToken());
      
    // HERE I'M OUTPUTTNG THE EVENTS TO SEE WHAT IS GOING ON
    this.oAuthService.events.subscribe((e: OAuthErrorEvent) => {
      if (e.type === 'token_received') {
        this.logger.log('____________TOKEN RECEIVED');
      }
      this.logger.log('______====================EVENT-TYPE:', e.type);
      this.logger.log('______====================EVENT-REASON:', e.reason);
      this.logger.log('______====================EVENT-PARAMS:', e.params);
    });

  
    if (this.oAuthService.hasValidAccessToken()) {
      this.oAuthService.loadUserProfile().then((t) => {
        console.log('----USER-PROFILE:', t);
      });
    } else {
      this.logger.log('----HAS VALID ACCESS TOKEN');
    }

   }

  
   
   private initOAuthConfig(): void {
    this.oAuthConfig = {
      redirectUri: window.location.origin + '/login/oauth2/myapp',
      postLogoutRedirectUri: window.location.origin + '/logout',
      clientId: 'CLIENT-ID',
      scope: 'openid, rrn, profile',
      oidc: true,
      issuer: 'https://DOMAIN_PROVIDER/op',
      responseType: 'code',
      showDebugInformation: true,
      tokenEndpoint: 'DOMAIN_PROVIDER/op/v1/token',
      jwks: {'keys': ['DOMAIN_PROVIDER/op/v1/keys']}
    };

    this.oAuthService.setStorage(sessionStorage);
    this.oAuthService.configure(this.oAuthConfig);
    this.oAuthService.loadDiscoveryDocumentAndTryLogin();

}

//包含登录功能的类

export class HeaderComponent {

    
   constructor(private oAuthService: OAuthService) { }


    public login() {
     this.oAuthService.initCodeFlow();
    }

    public logout() {
      this.oAuthService.logOut();
    }

}



// The html of the header component which contains the login link

    <a (click)="login()" title="Login">
       Login
    </a>

//错误/错误截图

以下是用户重定向回主页时控制台中出现的错误

1) 在此屏幕截图中，除非加载发现文档，否则值为 null、false 或未定义：

2) 在下面的屏幕截图中，您将看到其中一个 EVENT-TYPE 是

token_refresh_error

。 事件原因是

BAD REQUEST

。它试图向

https//DOMAIN_PROVIDER/op/v1/token

发出请求，但在 de initOAuthConfig() 方法中失败，我添加了

tokenEndPoint

属性。 您还可以看到错误是

error: "invalid_grant"

。 屏幕截图的第二行显示获取令牌时出错

我将

jwks: {'keys': ['https://DOMAIN_PROVIDER/op/v1/keys']}

添加到 initOAuthConfig() 以为这会解决问题，但事实并非如此。

//控制台应用选项卡：会话存储

从控制台的应用程序选项卡中我可以看到会话存储中有一些键值对的数据（本地存储中没有数据）参见下一个屏幕截图：

Answer 1

我的目标是分两个阶段实施您的解决方案：

• 首先了解 OAuth 和 Open Id Connect 设计模式 - 请参阅我的简单 TypeScript 代码示例
• 考虑将示例转换为 Angular 的最佳方法，我相信您可以轻松完成

配置文件

我喜欢通过 JSON 配置表达 OAuth 设置 - 请参阅此文件。您可以更新文件以匹配您的配置，运行我的示例，然后希望您会看到令牌回来。

API 客户责任

当 UI 调用 API 时，它必须首先获取访问令牌，并且 UI 还必须处理过期/401 响应 - 请参阅此类。

OAUTH 客户责任

API 客户端调用此类来获取令牌，该令牌使用 OIDC 客户端库来管理重定向、响应和返回令牌。

解释性博客文章

另请参阅这些文章，我的目的是保持直观且易于阅读：

• 概述
• OAuth 消息
• 编码要点