Tutorial: Mendukung fallback web dalam SDK JavaScript autentikasi asli

Berlaku untuk: Penyewa eksternal (pelajari selengkapnya)

Tutorial ini menunjukkan cara memperoleh token keamanan melalui autentikasi berbasis browser di mana autentikasi asli tidak cukup untuk menyelesaikan alur autentikasi dengan menggunakan mekanisme yang disebut web fallback.

Fallback web memungkinkan aplikasi klien yang menggunakan autentikasi asli untuk menggunakan autentikasi yang didelegasikan browser sebagai mekanisme fallback untuk meningkatkan ketahanan. Skenario ini terjadi ketika autentikasi asli tidak cukup untuk menyelesaikan alur autentikasi. Misalnya, jika server otorisasi memerlukan kemampuan yang tidak dapat disediakan klien. Pelajari selengkapnya tentang fallback web.

Di tutorial ini, Anda akan:

• Periksa isRedirectRequired kesalahan.
• Menangani isRedirectRequired kesalahan.

Prasyarat

React

• Selesaikan langkah-langkah dalam Tutorial: Memasukkan pengguna ke aplikasi satu halaman React dengan menggunakan SDK JavaScript autentikasi asli.

Angular

• Selesaikan langkah-langkah dalam Tutorial: Memasukkan pengguna ke aplikasi satu halaman Angular dengan menggunakan SDK JavaScript autentikasi asli.

Memeriksa dan menangani fallback web

Salah satu kesalahan yang dapat Anda temui saat menggunakan JavaScript SDK signIn() atau SignUp() metode adalah result.error?.isRedirectRequired(). Metode utilitas isRedirectRequired() memeriksa kebutuhan untuk menggunakan kembali autentikasi yang didelegasikan peramban. Gunakan cuplikan kode berikut untuk mendukung 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}`);
   }
}

Saat aplikasi menggunakan mekanisme fallback, aplikasi memperoleh token keamanan dengan menggunakan metode .loginPopup()

Konten terkait

• Pelajari selengkapnya tentang fallback web.
• Pelajari selengkapnya tentang jenis tantangan autentikasi asli.