Angularアプリケーションとmsal.jsからAzure AD B2Cを使用しているユーザーをリダイレクト

Question

Azure AD B2Cで暗黙の認証を正しく行うためにAngular 4アプリケーションを取得しようとしています。私はmsal.jsを使って動作させようとしています。私は非常に限られたofficial sample codeをチェックしましたが、ログインにポップアップを使用しており、リダイレクトをしたいので実際の使用はありません。

私が今使っているのは、私が自分のアプリケーションに注入しているすべての認証を処理する認証サービスです。

import { Injectable } from '@angular/core'; 
import * as Msal from 'msal'; 

@Injectable() 
export class AuthenticationService { 

    private tenantConfig = { 
     tenant: "example.onmicrosoft.com", 
     clientID: 'redacted (guid of the client), 
     signUpSignInPolicy: "b2c_1_signup", 
     b2cScopes: ["https://example.onmicrosoft.com/demo/read", "openid"] 
    } 

    private authority = "https://login.microsoftonline.com/tfp/" + this.tenantConfig.tenant + "/" + this.tenantConfig.signUpSignInPolicy; 

    private clientApplication: Msal.UserAgentApplication; 

    constructor() { 
     this.clientApplication = new Msal.UserAgentApplication(this.tenantConfig.clientID, this.authority, this.authCallback); 
    } 

    public login(): void { 
     this.clientApplication.loginRedirect(this.tenantConfig.b2cScopes); 
    } 

    public logout(): void { 
     this.clientApplication.logout(); 
    } 

    public isOnline(): boolean { 
     return this.clientApplication.getUser() != null; 
    } 

    public getUser(): Msal.User { 
     return this.clientApplication.getUser(); 
    } 

    public getAuthenticationToken(): Promise<string> { 
     return this.clientApplication.acquireTokenSilent(this.tenantConfig.b2cScopes) 
      .then(token => { 
       console.log("Got silent access token: ", token); 
       return token; 
      }).catch(error => { 
       console.log("Could not silently retrieve token from storage.", error); 
       return this.clientApplication.acquireTokenPopup(this.tenantConfig.b2cScopes) 
        .then(token => { 
         console.log("Got popup access token: ", token); 
         return token; 
        }).catch(error => { 
         console.log("Could not retrieve token from popup.", error); 
         this.clientApplication.acquireTokenRedirect(this.tenantConfig.b2cScopes); 
         return Promise.resolve(""); 
        }); 
      }); 
    } 

    private authCallback(errorDesc: any, token: any, error: any, tokenType: any) { 
     console.log(Callback') 

     if (token) { 
      console.log("Id token", token); 
     } 
     else { 
      console.log(error + ":" + errorDesc); 
     } 

     this.getAuthenticationToken(); 
    } 
} 

しかし、動作しません。私はIDトークンを正しく取得し、それは有効なので、 "IDトークン"は私が使用できる値を限られた時間だけ受け取ります。

問題は、認証トークンを取得しようとしたときです。最初の呼び出しで​​には、Token renewal operation failed due to timeout: nullというエラーが返されます。

次に、ユーザ名とパスワードを尋ねるポップアップが表示されます。これはしばらくしてから消えて、User does not have an existing session and request prompt parameter has a value of 'None'.というエラーが表示されます。

編集：

だから、私は正確に何が起こっているかを理解すると思うし、あなたがここに来ることができますサンプルアプリケーションで問題を再現するために：あなたはホームページから接続する場合はhttps://github.com/Gimly/NetCoreAngularAzureB2CMsal

とfetchDataページ（天気予報のあ​​るもの）に行くと、認証トークンが​​（ブラウザコンソールを開いてすべてのログを取得する）で正しく利用されていることがわかります。しかし、fetchDataで直接ページをリフレッシュすると、私が記述したのと同じ振る舞いを見ることができます。​​はタイムアウトに関するエラーで失敗します。

getUserが正しい値を返すにもかかわらず、私はgetAuthenticationTokenを呼び出す前にmsalが完全に初期化されていないため、完全に失敗する理由があります。

本当の質問...トークンを取得する前に完全に初期化されていることを確認するにはどうすればよいですか？

Answer 1

OK、私は直面していた問題は2つのことによって引き起こされた：

1）完全コンストラクタ呼び出しの末に終了しないために、初期化プロセスを引き起こしmsal.jsのバグ、およびIそれが完全に初期化される前にacquireTokenSilent()と呼ばれていました。これは最新版で修正されました（まだ書いてありますが、まだプロジェクトのdevブランチにあります）。 See this GitHub issue for more info。

2）私はリダイレクトURIを修正していないため、ライブラリは現在のURLをリダイレクトURIとして受け取り、許可されたリダイレクトURIのリストにないために失敗します。

これらの2つの問題が修正された後、私の質問に投稿したコードは期待どおりに機能しています。

Answer 2

MSAL jsのsource codeを見ると、acquireTokenPopupの代わりにacquireTokenRedirectを使用できるはずです。