Esercitazione: Supportare il fallback Web nell'SDK JavaScript per l'autenticazione nativa

Si applica a: Tenant esterni (altre informazioni)

Questa esercitazione illustra come acquisire token di sicurezza tramite un'autenticazione basata su browser in cui l'autenticazione nativa non è sufficiente per completare il flusso di autenticazione usando un meccanismo denominato fallback Web.

Il fallback Web consente a un'app client che usa l'autenticazione nativa di usare l'autenticazione delegata dal browser come meccanismo di fallback per migliorare la resilienza. Questo scenario si verifica quando l'autenticazione nativa non è sufficiente per completare il flusso di autenticazione. Ad esempio, se il server di autorizzazione richiede funzionalità che il client non può fornire. Altre informazioni sul fallback Web.

In questa esercitazione, farai:

• Controllare l'errore isRedirectRequired .
• Gestire l'errore isRedirectRequired .

Prerequisiti

React

• Completare la procedura descritta in Esercitazione: Consentire agli utenti di accedere a un'app a pagina singola React usando JavaScript SDK per l'autenticazione nativa.

Angular

• Completare la procedura descritta in Esercitazione: Consentire agli utenti di accedere all'app a pagina singola Angular usando JavaScript SDK per l'autenticazione nativa.

Controllare e gestire il fallback Web

Uno degli errori che è possibile riscontrare quando si usa il metodo o signIn() di SignUp() JavaScript SDK è result.error?.isRedirectRequired(). Il metodo isRedirectRequired() di utilità controlla la necessità di eseguire il fallback all'autenticazione delegata dal browser. Usare il frammento di codice seguente per supportare il fallback 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}`);
   }
}

Quando l'app usa il meccanismo di fallback, l'app acquisisce i token di sicurezza usando il loginPopup() metodo .

Contenuti correlati

• Altre informazioni sul fallback Web.
• Altre informazioni sui tipi di richiesta di autenticazione nativa.