在網頁應用程式中使用 SAML 進行驗證

如果您已升級至 Firebase Authentication with Identity Platform，可以透過 Firebase 驗證使用者 使用您選擇的 SAML 識別資訊提供者因此您可以使用 透過 SAML 式單一登入 (SSO) 解決方案，讓使用者登入 Firebase 應用程式。

Firebase Authentication 僅支援服務供應商啟動的 SAML 流程。

事前準備

如要透過 SAML 識別資訊提供者登入使用者，您必須先收集 供應商提供的資訊：

  • 供應器的實體 ID：用於識別識別資訊提供者的 URI。
  • 供應商的 SAML 單一登入 (SSO) 網址：識別資訊提供者的登入網址 頁面。
  • 供應商的公用金鑰憑證：用於驗證的憑證 取得憑證
  • 應用程式的實體 ID：用來識別應用程式的 URI (「service」) 。

備妥上述資訊後，請啟用 SAML 做為登入提供者： Firebase 專案：

  1. 將 Firebase 新增至您的 JavaScript 專案。

  2. 如果您尚未升級至 Firebase Authentication with Identity Platform，請進行更新。只有 SAML 驗證 適用於已升級的專案。

  3. 登入供應商頁面 在 Firebase 控制台的頁面中，依序點選「新增供應商」和 「SAML」。

  4. 為這個供應商命名。記下產生的提供者 ID： 例如 saml.example-provider。新增 登入程式碼

  5. 指定識別資訊提供者的實體 ID、單一登入 (SSO) 網址和公開金鑰 憑證並指定應用程式的實體 ID (服務供應商)。 這些值必須與供應商指派給您的值完全相符。

  6. 儲存變更。

  7. 如果您尚未授權應用程式的網域，請將網域新增至允許清單 [驗證] > 中的清單設定 Firebase控制台中的頁面。

使用 Firebase SDK 處理登入流程

如要使用 Firebase JavaScript SDK 處理登入流程，請按照下列步驟操作： 步驟：

  1. 使用您取得的提供者 ID 建立 SAMLAuthProvider 的執行個體 也可前往 Firebase 控制台

    Web 

    import { SAMLAuthProvider } from "firebase/auth";

const provider = new SAMLAuthProvider('saml.example-provider');

    Web 

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

  1. 使用 SAML 提供者物件向 Firebase 進行驗證。

    您可以將使用者重新導向至提供者的登入頁面，也可以直接開啟 彈出式視窗中的登入頁面。

    重新導向流程

    呼叫 signInWithRedirect() 以重新導向至供應商登入頁面：

    Web 

    import { getAuth, signInWithRedirect } from "firebase/auth";

const auth = getAuth();
signInWithRedirect(auth, provider);

    Web 

    firebase.auth().signInWithRedirect(provider);

    使用者完成登入並返回應用程式後，您就可以取得 呼叫 getRedirectResult() 取得登入結果。

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

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

    彈出式視窗流程

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

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

    ID 權杖和 UserInfo 物件會包含使用者的電子郵件地址，前提是 來自識別資訊提供者的 SAML 宣告的 NameID 屬性：

    <Subject>
  <NameID Format="urn:oasis:names:tc:SAML:1.1:nameid-format:emailAddress">test@email.com</NameID>
</Subject>

  2. 上述範例著重於登入流程，您可以 模式，使用以下模式將 SAML 提供者連結至現有使用者 linkWithRedirect() 和 linkWithPopup()，並透過 reauthenticateWithRedirect() 和 reauthenticateWithPopup()，可分為 用來為需要修改的敏感作業擷取新憑證 近期登入的資訊。