このページは Cloud Translation API によって翻訳されました。

WebアプリでSAMLを使用して認証する

IdentityPlatformを使用したFirebaseAuthenticationにアップグレードした場合は、選択したSAML IDプロバイダーを使用して、Firebaseを使用してユーザーを認証できます。これにより、SAMLベースのSSOソリューションを使用して、Firebaseアプリにユーザーをログインさせることができます。

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

あなたが始める前に

SAML IDプロバイダーを使用してユーザーにサインインするには、最初にプロバイダーからいくつかの情報を収集する必要があります。

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

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

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

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

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() （）を使用してユーザーをreauthenticateWithRedirect()できます。これは、最近のログインを必要とする機密性の高い操作の新しい資格情報を取得するために使用できます。