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

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

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

---

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

ガイドを表示

---

始める前に

1. Sign in to your Google Cloud account. If you're new to Google Cloud, create an account to evaluate how our products perform in real-world scenarios. New customers also get $300 in free credits to run, test, and deploy workloads.

2. In the Google Cloud console, on the project selector page, select or create a Google Cloud project.

   Note: If you don't plan to keep the resources that you create in this procedure, create a project instead of selecting an existing project. After you finish these steps, you can delete the project, removing all resources associated with the project.

   Go to project selector

3. Make sure that billing is enabled for your Google Cloud project.

4. Make sure that you have the following role or roles on the project: Identity Platform Admin, Service Usage Admin

   Check for the roles

   1. In the Google Cloud console, go to the IAM page.

      Go to IAM
   2. Select the project.

   3. In the Principal column, find all rows that identify you or a group that you're included in. To learn which groups you're included in, contact your administrator.

   4. For all rows that specify or include you, check the Role colunn to see whether the list of roles includes the required roles.

   Grant the roles

   1. In the Google Cloud console, go to the IAM page.

      [IAM] に移動
   2. プロジェクトを選択します。
   3. [ アクセスを許可] をクリックします。

   4. [新しいプリンシパル] フィールドに、ユーザー ID を入力します。 これは通常、Google アカウントのメールアドレスです。

   5. [ロールを選択] リストでロールを選択します。
   6. 追加のロールを付与するには、 [別のロールを追加] をクリックして各ロールを追加します。
   7. [保存] をクリックします。

   8. In the Google Cloud console, on the project selector page, select or create a Google Cloud project.

      Note: If you don't plan to keep the resources that you create in this procedure, create a project instead of selecting an existing project. After you finish these steps, you can delete the project, removing all resources associated with the project.

      Go to project selector

   9. Make sure that billing is enabled for your Google Cloud project.

   10. Make sure that you have the following role or roles on the project: Identity Platform Admin, Service Usage Admin

       Check for the roles

       1. In the Google Cloud console, go to the IAM page.

          Go to IAM
       2. Select the project.

       3. In the Principal column, find all rows that identify you or a group that you're included in. To learn which groups you're included in, contact your administrator.

       4. For all rows that specify or include you, check the Role colunn to see whether the list of roles includes the required roles.

       Grant the roles

       1. In the Google Cloud console, go to the IAM page.

          [IAM] に移動
       2. プロジェクトを選択します。
       3. [ アクセスを許可] をクリックします。

       4. [新しいプリンシパル] フィールドに、ユーザー ID を入力します。 これは通常、Google アカウントのメールアドレスです。

       5. [ロールを選択] リストでロールを選択します。
       6. 追加のロールを付与するには、 [別のロールを追加] をクリックして各ロールを追加します。
       7. [保存] をクリックします。

       Identity Platform を有効化

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

          Identity Platform に移動

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

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

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

   Identity Platform プロバイダに移動

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

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

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

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

ユーザーを作成する

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

   [ユーザー] に移動

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

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

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

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

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

注: 特に本番環境のアプリでは、v9 SDK を使用することを強くおすすめします。window.firebase など、他の SDK 管理オプションのサポートが必要な場合は、バージョン 8 からモジュラー Web SDK へのアップグレードまたは Firebase を追加する別の方法をご覧ください。

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 サービスを追加して使用できるようになります。

   ESM を使用していて、ブラウザ モジュールを使用する場合は、すべてのimport行を次のパターンに差し替えます。
   import { } from 'https://www.gstatic.com/firebasejs/10.12.1/firebase-SERVICE.js',
   ここでSERVICESDK 名は次のようになります。 firebase-firestore 。

   ブラウザ モジュールは手軽な方法ですが、本番環境ではモジュール バンドラを使用することをおすすめします。

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: このガイドの前半で作成したユーザー パスワード。

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

注: Angular CLI、Next.js、Vue CLI、Create React App などの JavaScript フレームワーク CLI ツールを使用している場合は、このステップを省略できます。詳しくは、モジュール バンドルに関するガイドをご覧ください。

Firebase Web SDK は、モジュール バンドラと連携して、ツリー シェイキングで未使用コードを削除するように設計されています。本番環境用のアプリには、この方法を使用することを強くおすすめします。Angular CLI、Next.js、Vue CLI、Create 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. 作成したユーザーを削除するには、ユーザー名の横にある [削除] をクリックします。[削除] をクリックして確定します。

プロジェクトの削除

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

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

注意: プロジェクトを削除すると、次のような影響があります。

• プロジェクト内のすべてのものが削除されます。このドキュメントのタスクで既存のプロジェクトを使用した場合、それを削除すると、そのプロジェクトで行った他の作業もすべて削除されます。
• カスタム プロジェクト ID が失われます。このプロジェクトを作成したときに、将来使用するカスタム プロジェクト ID を作成した可能性があります。そのプロジェクト ID を使用した URL（たとえば、appspot.com）を保持するには、プロジェクト全体ではなくプロジェクト内の選択したリソースだけを削除します。

複数のアーキテクチャ、チュートリアル、クイックスタートを実施する予定がある場合は、プロジェクトを再利用すると、プロジェクトの割り当て上限を超えないようにすることができます。

1. In the Google Cloud console, go to the Manage resources page.

   Go to Manage resources

2. In the project list, select the project that you want to delete, and then click Delete.
3. In the dialog, type the project ID, and then click Shut down to delete the project.

次のステップ

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

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

• JavaScript、Android、iOS、C++、Unity を使用してユーザーのログインを行う。

• OIDC または SAML を使用してユーザーのログインを行う。

• 既存のアプリからユーザーを Identity Platform に移行する。