OIDC を使用したユーザーのログイン

このドキュメントでは、Identity Platform を使用して、OpenID Connect(OIDC)プロバイダでユーザーをログインさせる方法を説明します。

始める前に

  1. Google Cloud アカウントにログインします。Google Cloud を初めて使用する場合は、アカウントを作成して、実際のシナリオでの Google プロダクトのパフォーマンスを評価してください。新規のお客様には、ワークロードの実行、テスト、デプロイができる無料クレジット $300 分を差し上げます。
  2. Google Cloud Console の [プロジェクト セレクタ] ページで、Google Cloud プロジェクトを選択または作成します。

    プロジェクト セレクタに移動

  3. Cloud プロジェクトに対して課金が有効になっていることを確認します。詳しくは、プロジェクトで課金が有効になっているかどうかを確認する方法をご覧ください。

  4. Google Cloud Console の [プロジェクト セレクタ] ページで、Google Cloud プロジェクトを選択または作成します。

    プロジェクト セレクタに移動

  5. Cloud プロジェクトに対して課金が有効になっていることを確認します。詳しくは、プロジェクトで課金が有効になっているかどうかを確認する方法をご覧ください。

  6. Identity Platform を有効にして、クライアント SDK をアプリに追加します。その方法については、クイックスタートをご覧ください。

プロバイダの構成

  1. Google Cloud コンソールで [ID プロバイダ] ページに移動します。
    [ID プロバイダ] ページに移動

  2. [プロバイダを追加] をクリックし、リストから [OpenID Connect] を選択します。

認証コードのフロー

  1. 以下の詳細を入力して認証コードフローを有効にします。

    1. [付与タイプの選択] セクションの [コードのフロー] を選択します。

    2. プロバイダの名前。プロバイダ ID と同じでも、カスタム名でも構いません。カスタム名を入力する場合は、[プロバイダ ID] の横にある [編集] をクリックして ID を指定します(oidc. で始める必要があります)。

    3. プロバイダの [クライアント ID]。

    4. プロバイダの 発行元https://example.com のようになります。Identity Platform は、この URL を使用して、プロバイダの OAuth エンドポイントと公開鍵を指定する OIDC ディスカバリ ドキュメント(通常は /.well-known/openid-configuration にあります)を検索します。

    5. プロバイダの [クライアント シークレット]。

  2. [承認済みドメイン] のリストにアプリを追加します。たとえば、アプリのログイン URL が https://example.com/login の場合、example.com を追加します。

  3. OIDC プロバイダのリダイレクト URL として、Identity Platform のコールバック URL を構成します。URL は https://[PROJECT-ID].firebaseapp.com/__/auth/handler のような形式になります。

  4. [保存] をクリックします。

暗黙的フロー

  1. 暗黙的フローを有効にするには、次の詳細を入力します。

    1. [付与タイプを選択] セクションで [暗黙的フロー] を選択します。

    2. プロバイダの名前。プロバイダ ID と同じでも、カスタム名でも構いません。カスタム名を入力する場合は、[プロバイダ ID] の横にある [編集] をクリックして ID を指定します(oidc. で始める必要があります)。

    3. プロバイダの [クライアント ID]。

    4. プロバイダの 発行元https://example.com. Identity Platform でこの URL を使用して、プロバイダの OAuth エンドポイントと公開 URL を指定する OIDC ディスカバリ ドキュメント(通常は /.well-known/openid-configuration にあります)を探します。

  2. [承認済みドメイン] のリストにアプリを追加します。たとえば、アプリのログイン URL が https://example.com/login の場合、example.com を追加します。

  3. OIDC プロバイダのリダイレクト URL として、Identity Platform のコールバック URL を構成します。URL は https://[PROJECT-ID].firebaseapp.com/__/auth/handler のような形式になります。

  4. [保存] をクリックします。

ユーザーのログイン

OIDC でログインするには、次の 2 つの方法があります。

  • OAuth フローの使用。この方法では OAuth handshake が実行されます。GCIP サーバーは、プロバイダの構成ステップでの認証コードフロー/暗黙的フローの選択に基づき、ID プロバイダと通信する目的のフローを選択します。

  • OIDC プロバイダの ID トークンを使用する。この方法は、OIDC トークンがすでに利用可能であることを前提としています。

OAuth によるユーザーのログイン

OAuth を使用してログインするには、次のようにします。

  1. 前のセクションで構成したプロバイダ ID で OAuthProvider インスタンスを作成します。プロバイダ ID の先頭は oidc. にする必要があります。

    const provider = new firebase.auth.OAuthProvider('oidc.myProvider');
    
  2. ログインフローを開始します。ポップアップまたはリダイレクトのいずれかを使用できます。

    ポップアップを表示するには、signInWithPopup() を呼び出します。

    firebase.auth().signInWithPopup(provider)
      .then((result) => {
        // result.credential is a firebase.auth.OAuthCredential object.
        // result.credential.providerId is equal to 'oidc.myProvider'.
        // result.credential.idToken is the OIDC provider's ID token.
      })
      .catch((error) => {
        // Handle error.
      });
    

    リダイレクト

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

    firebase.auth().signInWithRedirect(provider)
      .catch((error) => {
        // Handle error.
      });
    

    次に、getRedirectResult() を呼び出して、ユーザーがアプリに戻ったときに結果を取得します。

    // On return.
    firebase.auth().getRedirectResult()
      .then((result) => {
        // result.credential is a firebase.auth.OAuthCredential object.
        // result.credential.providerId is equal to 'oidc.myProvider'.
        // result.credential.idToken is the OIDC provider's ID token.
      })
      .catch((error) => {
        // Handle error.
      });
    

どちらのフローでも、result.credential.idToken フィールドを使用して OIDC ID トークンを取得できます。

ユーザーの直接ログイン

OIDC ID トークンを使用してユーザーを直接ログインさせるには、次のようにします。

  1. 前のセクションで構成したプロバイダ ID で OAuthProvider インスタンスを初期化します。プロバイダ ID の先頭は oidc. にする必要があります。次に、OAuthCredential を作成します。

    const provider = new firebase.auth.OAuthProvider('oidc.myProvider');
    const credential = provider.credential(oidcIdToken, null);
    
  2. signInWithCredential() を呼び出してユーザーをログインさせます。

    firebase.auth().signInWithCredential(credential)
      .then((result) => {
        // user now has a odic.myProvider UserInfo in providerData.
      })
      .catch((error) => {
        // Handle error.
      });
    

ユーザー アカウントのリンク

ユーザーが別の方法(メールアドレスとパスワードなど)を使用してすでにアプリにログインしている場合は、linkWithPopup()linkWithRedirect() を使用して既存のアカウントを OIDC プロバイダにリンクできます。例:

const provider = new firebase.auth.OAuthProvider('oidc.myProvider');

// Link with a popup.
firebase.auth().currentUser.linkWithPopup(provider)
    // currentUser.providerData now has an additional entry for this provider.
  }).catch((error) => {
    // Handle error.
  });

ユーザーの再認証

ユーザーのメールアドレスやパスワードの更新などの機密性の高い操作では、ユーザーのログイン後、長時間経過してない必要があります。ユーザーを再ログインさせるには、reauthenticateWithPopup() または reauthenticateWithRedirect() を呼び出します。例:

const provider = new firebase.auth.OAuthProvider('oidc.myProvider');

// Reauthenticate with a popup.
firebase.auth().currentUser.reauthenticateWithPopup(provider)
  .then((result) => {
    // Get the updated ID token.
    return result.user.getIdTokenResult();
  })
  .then((idTokenResult) => {
    // idTokenResult.authTime should be updated to reflect recent sign-in status.
    // idTokenResult.token has the latest ID token.
  })
  .catch((error) => {
    // Handle error.
  });

次のステップ