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

Firebase Authentication with Identity Platform にアップグレードした場合は、任意の 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. Firebase Authentication with Identity Platform にアップグレードしていない場合は、アップグレードしてください。SAML 認証は、アップグレードされたプロジェクトでのみ使用できます。

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

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

  5. ID プロバイダのエンティティ ID、SSO の URL、公開鍵証明書を指定します。アプリ（サービス プロバイダ）のエンティティ ID も指定します。これらの値は、プロバイダから割り当てられた値と完全に一致している必要があります。

  6. 変更を保存します。

  7. アプリのドメインをまだ承認していない場合は、Firebase コンソールの [Authentication] > [Settings] ページで許可リストに追加します。

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

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

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

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