チュートリアル: ネイティブ認証 JavaScript SDK での Web フォールバックのサポート

適用対象: 外部テナント (詳細)

このチュートリアルでは、 Web フォールバックと呼ばれるメカニズムを使用して、ネイティブ認証では認証フローを完了するのに十分ではないブラウザー ベースの認証を使用してセキュリティ トークンを取得する方法について説明します。

Web フォールバックを使用すると、ネイティブ認証を使用するクライアント アプリで、回復性を向上させるためのフォールバック メカニズムとしてブラウザー委任認証を使用できます。 このシナリオは、認証フローを完了するのにネイティブ認証だけでは十分ではない場合に発生します。 たとえば、承認サーバーにクライアントが提供できない機能が必要な場合です。 Web フォールバックの詳細を確認します。

このチュートリアルでは、次の操作を行います。

[前提条件]

Web フォールバックの確認と処理

JavaScript SDK の signIn() または SignUp() メソッドを使用するときに発生する可能性があるエラーの 1 つが result.error?.isRedirectRequired()。 ユーティリティメソッド isRedirectRequired() は、ブラウザーによって委任された認証にフォールバックする必要性をチェックします。 Web フォールバックをサポートするには、次のコード スニペットを使用します。

const result = await authClient.signIn({
         username,
     });

if (result.isFailed()) {
   if (result.error?.isRedirectRequired()) {
      // Fallback to the delegated authentication flow.
      const popUpRequest: PopupRequest = {
         authority: customAuthConfig.auth.authority,
         scopes: [],
         redirectUri: customAuthConfig.auth.redirectUri || "",
         prompt: "login", // Forces the user to enter their credentials on that request, negating single-sign on.
      };

      try {
         await authClient.loginPopup(popUpRequest);

         const accountResult = authClient.getCurrentAccount();

         if (accountResult.isFailed()) {
            setError(
                  accountResult.error?.errorData?.errorDescription ??
                     "An error occurred while getting the account from cache"
            );
         }

         if (accountResult.isCompleted()) {
            result.state = new SignInCompletedState();
            result.data = accountResult.data;
         }
      } catch (error) {
         if (error instanceof Error) {
            setError(error.message);
         } else {
            setError("An unexpected error occurred while logging in with popup");
         }
      }
   } else {
         setError(`An error occurred: ${result.error?.errorData?.errorDescription}`);
   }
}

アプリがフォールバック メカニズムを使用する場合、アプリは loginPopup() メソッドを使用してセキュリティ トークンを取得します。

関連コンテンツ

• Web フォールバックの詳細を確認します。
• ネイティブ認証チャレンジの種類について詳しくは、こちらをご覧ください。