Melakukan Autentikasi Menggunakan SAML di aplikasi web

Jika telah mengupgrade ke Firebase Authentication dengan Identity Platform, Anda dapat mengautentikasi pengguna dengan Firebase menggunakan penyedia identitas SAML pilihan Anda. Hal ini memungkinkan Anda untuk menggunakan solusi SSO berbasis SAML untuk memproses login pengguna ke aplikasi Firebase Anda.

Firebase Authentication hanya mendukung alur SAML yang dimulai oleh penyedia layanan.

Sebelum memulai

Untuk memproses login pengguna menggunakan penyedia identitas SAML, Anda harus terlebih dahulu mengumpulkan sejumlah informasi dari penyedia:

• ID Entitas penyedia: URI yang mengidentifikasi penyedia identitas.
• URL SSO SAML penyedia: URL halaman login penyedia identitas.
• Public key certificate penyedia: Sertifikat yang digunakan untuk memvalidasi token yang ditandatangani oleh penyedia identitas.
• ID Entitas aplikasi Anda: URI yang mengidentifikasi aplikasi Anda, "penyedia layanan".

Setelah memiliki informasi di atas, aktifkan SAML sebagai penyedia login untuk project Firebase Anda:

1. Tambahkan Firebase ke project JavaScript.

2. Jika Anda belum mengupgrade ke Firebase Authentication dengan Identity Platform, lakukan hal tersebut terlebih dahulu. Autentikasi SAML hanya tersedia di project yang telah diupgrade.

3. Pada halaman Sign-in providers di Firebase console, klik Add new provider, lalu klik SAML.

4. Beri nama untuk penyedia ini. Catat ID penyedia yang dibuat: seperti saml.example-provider. Anda akan memerlukan ID ini saat menambahkan kode login ke aplikasi.

5. Tentukan ID entitas penyedia identitas, URL SSO, dan public key certificate. Tentukan juga ID entitas aplikasi Anda (penyedia layanan). Nilai ini harus sama persis dengan nilai yang ditetapkan penyedia untuk Anda.

6. Simpan perubahan Anda.

7. Jika Anda belum memberikan otorisasi pada domain aplikasi, tambahkan domain tersebut ke daftar yang diizinkan di halaman Authentication > Settings di Firebase console.

Menangani alur login dengan Firebase SDK

Untuk menangani alur login dengan Firebase JavaScript SDK, ikuti langkah-langkah berikut:

1. Buat instance SAMLAuthProvider menggunakan ID penyedia yang Anda dapatkan di Firebase console.

   API modular web

   import { SAMLAuthProvider } from "firebase/auth";
   
   const provider = new SAMLAuthProvider('saml.example-provider');
   

   API dengan namespace web

   var provider = new firebase.auth.SAMLAuthProvider('saml.example-provider');
   ``
   

1. Lakukan autentikasi dengan Firebase menggunakan objek penyedia SAML.

   Anda dapat mengalihkan pengguna ke halaman login penyedia atau membuka halaman login di jendela browser pop-up.

   Alur pengalihan

   Alihkan ke halaman login penyedia dengan memanggil signInWithRedirect():

   API modular web

   import { getAuth, signInWithRedirect } from "firebase/auth";
   
   const auth = getAuth();
   signInWithRedirect(auth, provider);
   

   API dengan namespace web

   firebase.auth().signInWithRedirect(provider);
   

   Setelah pengguna menyelesaikan proses login dan kembali ke aplikasi Anda, Anda bisa mendapatkan hasil login dengan memanggil getRedirectResult().

   API modular web

   import { getAuth, getRedirectResult, SAMLAuthProvider } from "firebase/auth";
   
   const auth = getAuth();
   getRedirectResult(auth)
     .then((result) => {
       // User is signed in.
   
       // Provider data available using getAdditionalUserInfo()
     })
     .catch((error) => {
       // Handle error.
     });
   

   API dengan namespace web

   firebase.auth().getRedirectResult()
     .then((result) => {
       // User is signed in.
   
       // Provider data available in result.additionalUserInfo.profile,
       // or from the user's ID token obtained from result.user.getIdToken()
       // as an object in the firebase.sign_in_attributes custom claim.
     })
     .catch((error) => {
       // Handle error.
     });
   

   Alur pop-up

   API modular web

   import { getAuth, signInWithPopup, OAuthProvider } from "firebase/auth";
   
   const auth = getAuth();
   signInWithPopup(auth, provider)
     .then((result) => {
       // User is signed in.
   
       // Provider data available in result.additionalUserInfo.profile,
       // or from the user's ID token obtained from result.user.getIdToken()
       // as an object in the firebase.sign_in_attributes custom claim.
     })
     .catch((error) => {
       // Handle error.
     });
   

   API dengan namespace web

   firebase.auth().signInWithPopup(provider)
     .then((result) => {
       // User is signed in.
   
       // Provider data available in result.additionalUserInfo.profile,
       // or from the user's ID token obtained from result.user.getIdToken()
       // as an object in the firebase.sign_in_attributes custom claim.
     })
     .catch((error) => {
       // Handle error.
     });
   

   Token ID dan objek UserInfo berisi alamat email pengguna hanya jika diberikan dalam atribut NameID pernyataan SAML dari penyedia identitas:

   <Subject>
     <NameID Format="urn:oasis:names:tc:SAML:1.1:nameid-format:emailAddress">[e-mail]</NameID>
   </Subject>
   

2. Meskipun contoh di atas berfokus pada alur login, Anda dapat menggunakan pola yang sama untuk menautkan penyedia SAML kepada pengguna yang ada menggunakan linkWithRedirect() dan linkWithPopup(), lalu mengautentikasi ulang pengguna dengan reauthenticateWithRedirect() dan reauthenticateWithPopup(), yang dapat digunakan untuk mengambil kredensial baru untuk operasi sensitif yang memerlukan login terbaru.