javascript - OAuth2 および angular-auth2-oidc ライブラリの問題 - PKCE コードフロー

Question

私は OAuth2 とangular-auth2-oidcライブラリが初めてなので、初心者の間違いを犯しても我慢してください。

達成したいこと:ユーザーがホームページのログインリンクをクリックすると、プロバイダーのサイトに送られ、ログインしてから、トークンを使用してホームページにリダイレクトされます。

これまでの結果:ユーザーはプロバイダーのサイトに送られ、ログインし、サイトのホームページに正常に戻されましたが、トークンを取得できませんでした。のコンソールにいくつかのデータを出力しましたがngOnit()、それらはすべて null、未定義、または false です。

ngOnit()関数内でもいくつかのイベントを出力し、コンソールで取得するイベントはtoken_refresh_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の 1 つがであることがわかりますtoken_refresh_error。EVENT-REASONはですBAD REQUEST。https//DOMAIN_PROVIDER/op/v1/tokende initOAuthConfig()メソッドにtokenEndPoint属性を追加しましたが、リクエストを送信しようとして失敗しています。エラーがであることもわかりますerror: "invalid_grant"。スクリーンショットの 2 行目は、トークンの取得中にエラーが発生したことを示しています

問題が解決すると考えてinitOAuthConfig()に追加jwks: {'keys': ['https://DOMAIN_PROVIDER/op/v1/keys']}しましたが、解決しませんでした。

// コンソールのアプリケーションタブ: セッションストレージ

コンソールのアプリケーションタブから、セッションストレージにデータのキーと値のペアがいくつかあることがわかります (ローカルストレージにはデータがありません)。次のスクリーンショットを参照してください。

javascript - OAuth2 および angular-auth2-oidc ライブラリの問題 - PKCE コード フロー

1 に答える 1

Related

Reference

javascript - OAuth2 および angular-auth2-oidc ライブラリの問題 - PKCE コードフロー