Identity Platform を使用してユーザーがメールアドレスでログインできるようにする
Identity Platform を使用してメールアドレスとパスワードでユーザーのログインを行う方法を学習します。
このタスクを Google Cloud コンソールで直接行う際の順を追ったガイダンスについては、[ガイドを表示] をクリックしてください。
始める前に
- 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.
-
In the Google Cloud console, on the project selector page, select or create a Google Cloud project.
-
Make sure that billing is enabled for your Google Cloud project.
-
Make sure that you have the following role or roles on the project: Identity Platform Admin, Service Usage Admin
Check for the roles
-
In the Google Cloud console, go to the IAM page.
Go to IAM - Select the project.
-
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.
- 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
-
In the Google Cloud console, go to the IAM page.
[IAM] に移動 - プロジェクトを選択します。
- [ アクセスを許可] をクリックします。
-
[新しいプリンシパル] フィールドに、ユーザー ID を入力します。 これは通常、Google アカウントのメールアドレスです。
- [ロールを選択] リストでロールを選択します。
- 追加のロールを付与するには、 [別のロールを追加] をクリックして各ロールを追加します。
- [保存] をクリックします。
-
-
In the Google Cloud console, on the project selector page, select or create a Google Cloud project.
-
Make sure that billing is enabled for your Google Cloud project.
-
Make sure that you have the following role or roles on the project: Identity Platform Admin, Service Usage Admin
Check for the roles
-
In the Google Cloud console, go to the IAM page.
Go to IAM - Select the project.
-
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.
- 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
-
In the Google Cloud console, go to the IAM page.
[IAM] に移動 - プロジェクトを選択します。
- [ アクセスを許可] をクリックします。
-
[新しいプリンシパル] フィールドに、ユーザー ID を入力します。 これは通常、Google アカウントのメールアドレスです。
- [ロールを選択] リストでロールを選択します。
- 追加のロールを付与するには、 [別のロールを追加] をクリックして各ロールを追加します。
- [保存] をクリックします。
-
Identity Platform を有効化
Google Cloud コンソールで、Cloud Marketplace の [Identity Platform] ページに移動します。
[IDENTITY PLATFORM を有効化] をクリックします。
メール ログインを構成する
[ID プロバイダ] ページに移動します。
[ID プロバイダ] ページで [プロバイダを追加] をクリックします。
[プロバイダの選択] リストで、 [メール / パスワード] を選択します。
[Enabled] をオンに切り替えます。
プロバイダの設定を保存するには、[保存] をクリックします。
ユーザーを作成する
Google Cloud コンソールで [ユーザー] ページに移動します。
[ユーザーを追加] をクリックします。
[メール] フィールドにメールアドレスを入力し、下のフィールドにパスワードも入力します。後の手順で必要になるため、両方の値をメモします。
ユーザーを追加するには、[追加] をクリックします。新しいユーザーが [ユーザー] ページに表示されます。
ユーザーのログインを行う
ユーザーのログイン手順は、アプリが使用している SDK のバージョンによって異なります。アプリケーションの正しい手順に従ってください。
SDK v9（モジュール式）
SDK をインストールして Firebase を初期化する
Firebase JS SDK バージョン 9 では、JavaScript モジュールの形式を使用します。
このワークフローでは npm を使用します。v9 SDK は、ツリー シェイキングで未使用コードを削除して SDK のサイズを小さくするために、モジュール バンドラと連携するように最適化されています。このため、モジュール バンドラまたは JavaScript フレームワーク ツールを使用する必要があります。
v9 SDK を使用するには、次の手順を行います。
プロジェクト ディレクトリから、npm を使用して Firebase をインストールします。
npm install firebase
アプリで 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 CLI、Next.js、Vue CLI、Create React App などのツールは、npm によってインストールされ、コードベースにインポートされたライブラリのモジュール バンドルを自動的に処理します。
たとえば、Webpack を使用して、バンドル アプリケーションと依存関係コードを含む dist フォルダを生成できます。詳細については、Firebase でのモジュール バンドラーの使用をご覧ください。
JavaScript をページにインポートする
index.htmlという名前の新しいファイルを作成します。2 つの基本的な HTML コンテナを追加し、バンドルされた js をインポートします。
<script defer src="js/bundled.js"></script> <div>Identity Platform Quickstart</div> <div id="message">Loading...</div>ウェブブラウザで
index.htmlを起動します。ユーザーのメールアドレスを示すウェルカム メッセージが表示されます。
SDK v8（従来）
ウェブページを作成する
ローカルマシンで、
index.htmlという名前の新しいファイルを作成します。HTML ファイルに、2 つの HTML コンテナを追加します。
<div>Identity Platform Quickstart</div> <div id="message">Loading...</div>
API キーを使用して Identity Platform Client SDK を初期化する
Google Cloud コンソールで、[ID プロバイダ] ページに移動します。
[
アプリケーション設定の詳細 ] をクリックします。初期化コードを
index.htmlにコピーします。
ユーザーのログインを行う
ユーザーのログインを行うには、次のコードを
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: 前の手順で作成したユーザーのパスワード
ウェブブラウザで
index.htmlを開きます。ユーザーのメールアドレスを示すウェルカム メッセージが表示されます。
その他の Identity Platform の上限の詳細については、割り当てと上限をご覧ください。
クリーンアップ
このページで使用したリソースについて、Google Cloud アカウントに課金されないようにするには、次の手順を行います。
プロバイダとユーザーを削除する
既存の Google Cloud プロジェクトを使用した場合は、作成したプロバイダとユーザーを削除して、アカウントに課金されないようにします。
Google Cloud コンソールで、[ID プロバイダ] ページに移動します。
プロバイダを削除するには、プロバイダの名前の横にある [削除] をクリックします。[削除] をクリックして確定します。
Google Cloud コンソールで [ユーザー] ページに移動します。
作成したユーザーを削除するには、ユーザー名の横にある [削除] をクリックします。[削除] をクリックして確定します。
プロジェクトの削除
課金をなくす最も簡単な方法は、チュートリアル用に作成したプロジェクトを削除することです。
プロジェクトを削除するには:
- In the Google Cloud console, go to the Manage resources page.
- In the project list, select the project that you want to delete, and then click Delete.
- 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 を使用してユーザーのログインを行う。