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

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

Firebase SDK を使用したログインフローの処理

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

Firebase コンソールで取得したプロバイダ ID を使用して SAMLAuthProvider のインスタンスを作成します。

Web version 9

import { SAMLAuthProvider } from "firebase/auth";

const provider = new SAMLAuthProvider('saml.example-provider');

Web version 8

var provider = new firebase.auth.SAMLAuthProvider('saml.example-provider');
``

SAML プロバイダオブジェクトを使用して Firebase での認証を行います。

ユーザーをプロバイダのログインページにリダイレクトするか、ポップアップブラウザウィンドウでログインページを開きます。

リダイレクトフロー

signInWithRedirect() を呼び出して、プロバイダのログインページにリダイレクトします。

Web version 9

import { getAuth, signInWithRedirect } from "firebase/auth";

const auth = getAuth();
signInWithRedirect(auth, provider);

Web version 8

firebase.auth().signInWithRedirect(provider);

ユーザーがログインを完了してアプリに戻ったら、getRedirectResult() を呼び出してログイン結果を取得できます。

Web version 9

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 version 8

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 version 9

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 version 8

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

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