Identity Platform を使用してユーザーがメールアドレスでログインできるようにする

Identity Platform を使用してメールアドレスとパスワードでユーザーのログインを行う方法を学習します。


このタスクを Google Cloud コンソールで直接行う際の順を追ったガイダンスについては、[ガイドを表示] をクリックしてください。

ガイドを表示


始める前に

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

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

  3. Google Cloud プロジェクトで課金が有効になっていることを確認します

  4. プロジェクトに次のロールがあることを確認します。 Identity Platform Admin, Service Usage Admin

    ロールを確認する

    1. Google Cloud コンソールの [IAM] ページに移動します。

      [IAM] に移動
    2. プロジェクトを選択します。
    3. [プリンシパル] 列で、自分のメールアドレスを含む行を見つけます。

      自分のメールアドレスがその列にない場合、ロールは割り当てられていません。

    4. 自分のメールアドレスを含む行の [ロール] 列で、ロールのリストに必要なロールが含まれているかどうかを確認します。

    ロールを付与する

    1. Google Cloud コンソールの [IAM] ページに移動します。

      [IAM] に移動
    2. プロジェクトを選択します。
    3. [ アクセスを許可] をクリックします。
    4. [新しいプリンシパル] フィールドに、自分のメールアドレスを入力します。
    5. [ロールを選択] リストでロールを選択します。
    6. 追加のロールを付与するには、 [別のロールを追加] をクリックして各ロールを追加します。
    7. [保存] をクリックします。
  5. Google Cloud Console の [プロジェクト セレクタ] ページで、Google Cloud プロジェクトを選択または作成します。

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

  6. Google Cloud プロジェクトで課金が有効になっていることを確認します

  7. プロジェクトに次のロールがあることを確認します。 Identity Platform Admin, Service Usage Admin

    ロールを確認する

    1. Google Cloud コンソールの [IAM] ページに移動します。

      [IAM] に移動
    2. プロジェクトを選択します。
    3. [プリンシパル] 列で、自分のメールアドレスを含む行を見つけます。

      自分のメールアドレスがその列にない場合、ロールは割り当てられていません。

    4. 自分のメールアドレスを含む行の [ロール] 列で、ロールのリストに必要なロールが含まれているかどうかを確認します。

    ロールを付与する

    1. Google Cloud コンソールの [IAM] ページに移動します。

      [IAM] に移動
    2. プロジェクトを選択します。
    3. [ アクセスを許可] をクリックします。
    4. [新しいプリンシパル] フィールドに、自分のメールアドレスを入力します。
    5. [ロールを選択] リストでロールを選択します。
    6. 追加のロールを付与するには、 [別のロールを追加] をクリックして各ロールを追加します。
    7. [保存] をクリックします。

Identity Platform を有効化

  1. Google Cloud コンソールで、Cloud Marketplace の [Identity Platform] ページに移動します。

    Identity Platform に移動

  2. [IDENTITY PLATFORM を有効化] をクリックします。

メール ログインを構成する

  1. [ID プロバイダ] ページに移動します。

  2. [ID プロバイダ] ページで [プロバイダを追加] をクリックします。

  3. [プロバイダの選択] リストで、 [メール / パスワード] を選択します。

  4. [Enabled] をオンに切り替えます。

  5. プロバイダの設定を保存するには、[保存] をクリックします。

ユーザーを作成する

  1. Google Cloud コンソールで [ユーザー] ページに移動します。

    [ユーザー] に移動

  2. [ユーザーを追加] をクリックします。

  3. [メール] フィールドにメールアドレスを入力し、下のフィールドにパスワードも入力します。後の手順で必要になるため、両方の値をメモします。

  4. ユーザーを追加するには、[追加] をクリックします。新しいユーザーが [ユーザー] ページに表示されます。

ユーザーのログインを行う

ユーザーのログイン手順は、アプリが使用している SDK のバージョンによって異なります。アプリケーションの正しい手順に従ってください。

SDK v9(モジュール式)

SDK をインストールして Firebase を初期化する

Firebase JS SDK バージョン 9 では、JavaScript モジュールの形式を使用します。

このワークフローでは npm を使用します。v9 SDK は、ツリー シェイキングで未使用コードを削除して SDK のサイズを小さくするために、モジュール バンドラと連携するように最適化されています。このため、モジュール バンドラまたは JavaScript フレームワーク ツールを使用する必要があります。

v9 SDK を使用するには、次の手順を行います。

  1. プロジェクト ディレクトリから、npm を使用して Firebase をインストールします。

    npm install firebase
  2. アプリで Firebase を初期化して、Firebase アプリ オブジェクトを作成します。

    import { initializeApp } from 'firebase/app';
    
    const firebaseConfig = {
        apiKey: "API_KEY",
        authDomain: "AUTH_DOMAIN"
    };
    
    const app = initializeApp(firebaseConfig);
    

    次のように置き換えます。

    • API_KEY: Firebase プロジェクトの apiKey
    • AUTH_DOMAIN: Firebase プロジェクトの authDomain

    これらの値は、アプリの Firebase プロジェクト構成から取得できます。

    Firebase アプリはコンテナに似たオブジェクトで、一般的な構成を保存し、Firebase サービス全体で認証を共有します。コードで Firebase アプリ オブジェクトを初期化すると、Firebase サービスを追加して使用できるようになります。

JavaScript で Identity Platform にアクセスする

これで Firebase SDK が初期化されたので、アプリ内の任意の場所で使用できます。たとえば、ハードコードされたユーザーにログインして、その結果をウェブページに表示するアプリを次に示します。

import { initializeApp } from 'firebase/app';
import {
  onAuthStateChanged,
  signInWithEmailAndPassword,
  getAuth
} from 'firebase/auth';

const firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "AUTH_DOMAIN"
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app, {/* extra options */ });

document.addEventListener("DOMContentLoaded", () => {
  onAuthStateChanged(auth, (user) => {
      if (user) {
          document.getElementById("message").innerHTML = "Welcome, " + user.email;
      }
      else {
          document.getElementById("message").innerHTML = "No user signed in.";
      }
  });
  signIn();
});

function signIn() {
  const email = "EMAIL_ID";
  const password = "PASSWORD";
  signInWithEmailAndPassword(auth, email, password)
      .catch((error) => {
          document.getElementById("message").innerHTML = error.message;
      });
}

次のように置き換えます。

  • API_KEY: Firebase プロジェクトの apiKey
  • AUTH_DOMAIN: Firebase プロジェクトの authDomain
  • EMAIL_ID: このガイドの前半で作成したユーザーのメールアドレス。
  • PASSWORD: このガイドの前半で作成したユーザー パスワード。

サイズの縮小にモジュール バンドラを使用する

Firebase Web SDK は、モジュール バンドラと連携して、ツリー シェイキングで未使用コードを削除するように設計されています。本番環境用のアプリには、この方法を使用することを強くおすすめします。Angular CLINext.jsVue CLICreate React App などのツールは、npm によってインストールされ、コードベースにインポートされたライブラリのモジュール バンドルを自動的に処理します。

たとえば、Webpack を使用して、バンドル アプリケーションと依存関係コードを含む dist フォルダを生成できます。詳細については、Firebase でのモジュール バンドラーの使用をご覧ください。

JavaScript をページにインポートする

  1. index.html という名前の新しいファイルを作成します。

  2. 2 つの基本的な HTML コンテナを追加し、バンドルされた js をインポートします。

    <script defer src="js/bundled.js"></script>
    <div>Identity Platform Quickstart</div>
    <div id="message">Loading...</div>
    
  3. ウェブブラウザで index.html を起動します。ユーザーのメールアドレスを示すウェルカム メッセージが表示されます。

SDK v8(従来)

ウェブページを作成する

  1. ローカルマシンで、index.html という名前の新しいファイルを作成します。

  2. HTML ファイルに、2 つの HTML コンテナを追加します。

    <div>Identity Platform Quickstart</div>
    <div id="message">Loading...</div>
    

API キーを使用して Identity Platform Client SDK を初期化する

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

    [ID プロバイダ] に移動

  2. [アプリケーション設定の詳細] をクリックします。

  3. 初期化コードを index.html にコピーします。

ユーザーのログインを行う

  1. ユーザーのログインを行うには、次のコードを index.html にコピーします。

    <script>
      var email = "EMAIL_ID";
      var password = "PASSWORD";
    
      firebase.auth().onAuthStateChanged(function(user) {
        if (user) {
          document.getElementById("message").innerHTML = "Welcome, " + user.email;
        } else {
          document.getElementById("message").innerHTML = "No user signed in.";
        }
      });
    
      firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) {
        document.getElementById("message").innerHTML = error.message;
      });
    </script>
    

    このコードは signInWithEmailAndPassword() を呼び出し、結果を onAuthStateChanged() コールバックで処理します。

    次のように置き換えます。

    • EMAIL_ID: 前の手順で作成したユーザーのメールアドレス
    • PASSWORD: 前の手順で作成したユーザーのパスワード
  2. ウェブブラウザで index.html を開きます。ユーザーのメールアドレスを示すウェルカム メッセージが表示されます。

ユーザーのログイン試行の失敗には上限があります。短時間でログイン試行に複数回失敗すると、ユーザーは一時的にアカウントにログインできなくなります。

その他の Identity Platform の上限の詳細については、割り当てと上限をご覧ください。

クリーンアップ

このページで使用したリソースについて、Google Cloud アカウントに課金されないようにするには、次の手順を行います。

プロバイダとユーザーを削除する

既存の Google Cloud プロジェクトを使用した場合は、作成したプロバイダとユーザーを削除して、アカウントに課金されないようにします。

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

    [ID プロバイダ] に移動

  2. プロバイダを削除するには、プロバイダの名前の横にある [削除] をクリックします。[削除] をクリックして確定します。

  3. Google Cloud コンソールで [ユーザー] ページに移動します。

    [ユーザー] に移動

  4. 作成したユーザーを削除するには、ユーザー名の横にある [削除] をクリックします。[削除] をクリックして確定します。

プロジェクトの削除

課金をなくす最も簡単な方法は、チュートリアル用に作成したプロジェクトを削除することです。

プロジェクトを削除するには:

  1. Google Cloud コンソールで、[リソースの管理] ページに移動します。

    [リソースの管理] に移動

  2. プロジェクト リストで、削除するプロジェクトを選択し、[削除] をクリックします。
  3. ダイアログでプロジェクト ID を入力し、[シャットダウン] をクリックしてプロジェクトを削除します。

次のステップ

実際のアプリでは、ユーザーは専用の登録ページを使用して登録し、メールアドレスとパスワードを入力してログインします。Identity Platform には、これらのページに使用できる事前構築済みの組み込み認証 UI が用意されています。また、独自の UI を構築することもできます。ソーシャル プロバイダ(Facebook や Google など)、電話番号、OIDC、SAML など、追加のログイン方法をサポートすることもできます。

以下の説明をご覧ください。