Join us in person and online for Firebase Summit on October 18, 2022. Learn how Firebase can help you accelerate app development, release your app with confidence, and scale with ease. Register now

在 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的實例。

    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. 使用 SAML 提供程序對象向 Firebase 進行身份驗證。

    您可以將用戶重定向到提供商的登錄頁面或在彈出式瀏覽器窗口中打開登錄頁面。

    重定向流

    通過調用signInWithRedirect()重定向到提供者登錄頁面:

    Web version 9

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

    Web version 8

    firebase.auth().signInWithRedirect(provider);
    

    用戶完成登錄並返回您的應用後,您可以通過調用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.
      });
    

    彈出流

    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. 雖然上述示例側重於登錄流程,但您可以使用相同的模式使用linkWithRedirect()linkWithPopup()將 SAML 提供程序鏈接到現有用戶,並使用 reauthenticateWithRedirect( reauthenticateWithRedirect()reauthenticateWithPopup() () 重新驗證用戶,可用於檢索需要最近登錄的敏感操作的新憑據。