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

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

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

事前準備

如要使用 SAML 識別資訊提供者登入使用者，請先向提供者收集一些資訊：

• 供應商的實體 ID：用於識別識別資訊提供者的 URI。
• 供應商的 SAML 單一登入 (SSO) 網址：識別資訊提供者的登入頁面網址。
• 提供者的公用金鑰憑證：用於驗證識別資訊提供者簽署的權杖。
• 應用程式的實體 ID：用於識別應用程式 (即「服務供應商」) 的 URI。

取得上述資訊後，請為 Firebase 專案啟用 SAML 做為登入供應商：

1. 將 Firebase 新增至 JavaScript 專案。

2. 如果尚未升級至 Firebase Authentication with Identity Platform，請立即升級。SAML 驗證僅適用於升級後的專案。

3. 在 Firebase 控制台的「登入供應商」頁面中，按一下「新增供應商」，然後點選「SAML」。

4. 為這個供應商命名。記下系統產生的供應商 ID，例如 saml.example-provider。在應用程式中加入登入程式碼時，您需要這個 ID。

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

6. 儲存變更。

7. 如果尚未授權應用程式的網域，請前往 Firebase 控制台的「驗證」>「設定」頁面，將網域加入許可清單。

使用 Firebase SDK 處理登入流程

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

1. 使用您在 Firebase 控制台中取得的供應商 ID，建立 SAMLAuthProvider 的執行個體。

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

   只有在識別資訊提供者的 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() 重新驗證使用者，這可用於擷取需要最近登入的敏感作業的新憑證。