ウェブアプリで 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 を有効にします。

Firebase を JavaScript プロジェクトに追加します。
Firebase Authentication with Identity Platform にアップグレードしていない場合は、アップグレードしてください。SAML 認証は、アップグレードされたプロジェクトでのみ使用できます。
Firebase コンソールの [ログインプロバイダ] ページで [新しいプロバイダを追加] をクリックし、続いて [SAML] をクリックします。
このプロバイダに名前を付けます。生成されたプロバイダ ID（たとえば、saml.example-provider など）をメモします。この ID は、ログインコードをアプリに追加するときに必要になります。
ID プロバイダのエンティティ ID、SSO の URL、公開鍵証明書を指定します。アプリ（サービスプロバイダ）のエンティティ ID も指定します。これらの値は、プロバイダから割り当てられた値と完全に一致している必要があります。
変更を保存します。
アプリのドメインをまだ承認していない場合は、Firebase コンソールの [Authentication] > [Settings] ページで許可リストに追加します。

Firebase JavaScript SDK でログインフローを処理する手順は次のとおりです。

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');
``

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>

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

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

始める前に

Firebase SDK を使用してログインフローを処理する

Web

Web

Web

Web

Web

Web

Web

Web