ウェブアプリで SAML を使用して認証する

Identity Platform を使用する Firebase Authentication にアップグレードした場合は、任意の SAML ID プロバイダを使用して Firebase でユーザーを認証できます。これにより、SAML ベースの SSO ソリューションで、ユーザーが Firebase アプリにログインできるようになります。

Firebase Authentication は、サービス プロバイダが開始した SAML フローのみをサポートします。

始める前に

SAML ID プロバイダを使用してユーザーをログインさせるには、まずプロバイダから次のような情報を収集する必要があります。

• プロバイダのエンティティ ID: ID プロバイダを識別する URI。
• プロバイダの SAML SSO URL: ID プロバイダのログインページの URL。
• プロバイダの公開鍵証明書: ID プロバイダによって署名されたトークンの検証に使用される証明書。
• アプリのエンティティ ID: アプリ（「サービス プロバイダ」）を識別する URI。

上記の情報を取得したら、Firebase プロジェクトのログイン プロバイダとして SAML を有効にします。

1. Firebase を JavaScript プロジェクトに追加します。

2. Identity Platform を使用する Firebase Authentication にアップグレードしていない場合は、アップグレードしてください。SAML 認証は、アップグレードされたプロジェクトでのみ使用できます。

3. Firebase コンソールの [ログイン プロバイダ] ページで [新しいプロバイダを追加] をクリックし、続いて [SAML] をクリックします。

4. このプロバイダに名前を付けます。生成されたプロバイダ ID（たとえば、saml.example-provider など）をメモします。この ID は、ログインコードをアプリに追加するときに必要になります。

5. ID プロバイダのエンティティ 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');
   

   ウェブ向けの名前空間付き 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.
     });
   

   名前空間対応の 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.
     });
   

   ID トークンと UserInfo オブジェクトには、ID プロバイダからの SAML アサーションの NameID 属性で指定されている場合にのみ、ユーザーのメールアドレスが含まれます。

   <Subject>
     <NameID Format="urn:oasis:names:tc:SAML:1.1:nameid-format:emailAddress">[e-mail]</NameID>
   </Subject>
   

2. 上記の例ではログインフローを中心に説明していますが、同じパターンで linkWithRedirect() と linkWithPopup() を使用して SAML プロバイダを既存のユーザーにリンクし、reauthenticateWithRedirect() と reauthenticateWithPopup() でユーザーを再認証できます。これは、ログインしてから短時間のうちに行うべき機密性の高い操作のために、最新の認証情報を取得するために使われます。