在 Web 應用程式中使用 SAML 進行身份驗證

如果您已升級至使用 Identity Platform 進行 Firebase 驗證,則可以使用您選擇的 SAML 身分提供者透過 Firebase 對使用者進行驗證。這使得您可以使用基於 SAML 的 SSO 解決方案將使用者登入您的 Firebase 應用程式。

Firebase 驗證僅支援服務提供者發起的 SAML 流。

在你開始之前

要使用 SAML 身分提供者登入用戶,您必須先從提供者收集一些資訊:

  • 提供者的實體 ID :標識身分提供者的 URI。
  • 提供者的 SAML SSO URL :身分提供者登入頁面的 URL。
  • 提供者的公鑰憑證:用於驗證身分提供者簽署的令牌的憑證。
  • 您的應用程式的實體 ID :標識您的應用程式(「服務提供者」)的 URI。

獲得上述資訊後,啟用 SAML 作為您的 Firebase 專案的登入提供者:

  1. 將 Firebase 新增到您的 JavaScript 專案

  2. 如果您尚未升級到具有 Identity Platform 的 Firebase 驗證,請升級。 SAML 身份驗證僅在升級的項目中可用。

  3. 在 Firebase 控制台的登入提供者頁面上,按一下新增提供者,然後按一下SAML

  4. 為該提供者指定一個名稱。請注意產生的提供者 ID:類似於saml.example-provider 。當您向應用程式新增登入代碼時,您將需要此 ID。

  5. 指定您的身分提供者的實體 ID、SSO URL 和公鑰憑證。也要指定您的應用程式(服務提供者)的實體 ID。這些值必須與您的提供者指派給您的值完全相符。

  6. 儲存您的變更。

  7. 如果您尚未授權套用的網域,請將其新增至 Firebase 控制台的「驗證」>「設定」頁面上的允許清單中。

使用 Firebase SDK 處理登入流程

若要使用 Firebase JavaScript SDK 處理登入流程,請依照下列步驟操作:

  1. 使用您在 Firebase 控制台中取得的提供者 ID 建立SAMLAuthProvider的實例。

    網路模組化API

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

    Web 命名空間 API

    var provider = new firebase.auth.SAMLAuthProvider('saml.example-provider');
    ``
    
  1. 使用 SAML 提供者物件透過 Firebase 進行身份驗證。

    您可以將使用者重新導向至提供者的登入頁面,也可以在彈出的瀏覽器視窗中開啟登入頁面。

    重定向流程

    透過呼叫signInWithRedirect()重定向到提供者登入頁面:

    網路模組化API

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

    Web 命名空間 API

    firebase.auth().signInWithRedirect(provider);
    

    使用者完成登入並傳回應用程式後,您可以透過呼叫getRedirectResult()來取得登入結果。

    網路模組化API

    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 命名空間 API

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

    彈出流程

    網路模組化API

    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 命名空間 API

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

    只有當身分識別提供者的 SAML 斷言的NameID屬性中提供了使用者的電子郵件地址時,ID 令牌和UserInfo物件才包含使用者的電子郵件地址:

    <Subject>
      <NameID Format="urn:oasis:names:tc:SAML:1.1:nameid-format:emailAddress">test@email.com</NameID>
    </Subject>
    
  2. 雖然上面的範例重點介紹登入流程,但您可以使用相同的模式使用linkWithRedirect()linkWithPopup()將 SAML 提供者連結到現有用戶,並使用reauthenticateWithRedirect()reauthenticateWithPopup()重新驗證使用者身份,它可用於檢索需要最近登入的敏感操作的新憑證。