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

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

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

事前準備

如要使用 SAML 識別資訊提供者登入使用者，您必須先從供應器收集一些資訊：

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

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

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

2. 如果您尚未升級至提供 Identity Platform 的 Firebase 驗證，請進行升級。SAML 驗證僅適用於升級版專案。

3. 在 Firebase 控制台的「Sign-in providers」 (登入供應商) 頁面上，依序點選「Add new provider」(新增供應商) 和「SAML」。

4. 為這個供應商命名。記下產生的提供者 ID，例如 saml.example-provider。在應用程式中新增登入程式碼時，會需要用到這個 ID。

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

6. 儲存變更。

7. 如果您尚未授權應用程式的網域，請在 Firebase 控制台的「Authentication」>「Settings」頁面將該網域加入許可清單。

使用 Firebase SDK 處理登入流程

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

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

   網頁模組 API

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

   網路命名空間 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);
   

   網路命名空間 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.
     });
   

   網路命名空間 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.
     });
   

   網路命名空間 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">[e-mail]</NameID>
   </Subject>
   

2. 雖然以上範例著重於登入流程，但您可以使用相同模式，使用 linkWithRedirect() 和 linkWithPopup() 將 SAML 提供者連結至現有使用者，並透過 reauthenticateWithRedirect() 和 reauthenticateWithPopup() 重新驗證使用者，以針對需要近期登入的敏感作業擷取新憑證。