Partager via


Tutoriel : Prise en charge de la secours web dans le Kit de développement logiciel (SDK) JavaScript d’authentification native

S’applique à : cercle vert avec un symbole de coche blanc qui indique que le contenu suivant s’applique aux locataires externes. Locataires externes (en savoir plus)

Ce tutoriel montre comment acquérir des jetons de sécurité via une authentification basée sur un navigateur où l’authentification native n’est pas suffisante pour terminer le flux d’authentification à l’aide d’un mécanisme appelé secours web.

La secours web permet à une application cliente qui utilise l’authentification native pour utiliser l’authentification déléguée par le navigateur comme mécanisme de secours pour améliorer la résilience. Ce scénario se produit quand l’authentification native n’est pas suffisante pour effectuer le flux d’authentification. Par exemple, si le serveur d’autorisation nécessite des fonctionnalités que le client ne peut pas fournir. En savoir plus sur la secours web.

Dans ce tutoriel, vous allez :

  • Vérifiez l’erreur isRedirectRequired .
  • Gérer l’erreur isRedirectRequired .

Conditions préalables

Vérifier et gérer la secours web

L’une des erreurs que vous pouvez rencontrer lorsque vous utilisez le Kit de signIn() développement logiciel (SDK) JavaScript ou SignUp() la méthode est result.error?.isRedirectRequired(). La méthode isRedirectRequired() utilitaire vérifie la nécessité de revenir à l’authentification déléguée par navigateur. Utilisez l’extrait de code suivant pour prendre en charge la secours 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}`);
   }
}

Lorsque l’application utilise le mécanisme de secours, l’application acquiert des jetons de sécurité à l’aide de la loginPopup() méthode.