Google berkomitmen untuk mendorong terwujudnya keadilan ras bagi komunitas Kulit Hitam. Lihat caranya.

Mengautentikasi Menggunakan SAML di aplikasi web

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

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

Sebelum kamu memulai

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

  • ID Entitas penyedia : URI yang mengidentifikasi penyedia identitas.
  • URL SSO SAML penyedia : URL laman masuk penyedia identitas.
  • Sertifikat kunci publik penyedia : Sertifikat yang digunakan untuk memvalidasi token yang ditandatangani oleh penyedia identitas.
  • ID Entitas aplikasi Anda : URI yang mengidentifikasi aplikasi Anda, "penyedia layanan".

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

  1. Tambahkan Firebase ke proyek JavaScript Anda .

  2. Jika Anda belum mengupgrade ke Firebase Authentication dengan Identity Platform, lakukanlah. Autentikasi SAML hanya tersedia di proyek yang ditingkatkan versinya.

  3. Di halaman Penyedia login di Firebase console, klik Tambahkan penyedia baru , lalu klik SAML .

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

  5. Tentukan ID entitas, URL SSO, dan sertifikat kunci publik penyedia identitas Anda. Tentukan juga ID entitas aplikasi Anda (penyedia layanan). Nilai-nilai ini harus sama persis dengan nilai yang diberikan penyedia Anda kepada Anda.

  6. Simpan perubahan Anda.

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

Tangani alur masuk dengan Firebase SDK

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

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

    Web version 9

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

    Web version 8

    var provider = new firebase.auth.SAMLAuthProvider('saml.example-provider');
    ``
    
  1. Mengautentikasi dengan Firebase menggunakan objek penyedia SAML.

    Anda dapat mengarahkan pengguna ke halaman masuk penyedia atau membuka halaman masuk di jendela browser pop-up.

    Arahkan ulang aliran

    Arahkan ulang ke halaman masuk penyedia dengan memanggil signInWithRedirect() :

    Web version 9

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

    Web version 8

    firebase.auth().signInWithRedirect(provider);
    

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

    Web version 9

    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.
      });
    

    Web version 8

    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.
      });
    

    Aliran pop-up

    Web version 9

    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.
      });
    

    Web version 8

    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.
      });
    
  2. Meskipun contoh di atas berfokus pada alur masuk, Anda dapat menggunakan pola yang sama untuk menautkan penyedia SAML ke pengguna yang ada menggunakan linkWithRedirect() dan linkWithPopup() , dan mengautentikasi ulang pengguna dengan reauthenticateWithRedirect( reauthenticateWithRedirect() dan reauthenticateWithPopup( reauthenticateWithPopup() , yang dapat digunakan untuk mengambil kredensial baru untuk operasi sensitif yang memerlukan login terbaru.