Firebase Authentication を使用することで、ユーザーが Firebase での認証にメールアドレスとパスワードを使用できるようにし、アプリのパスワード ベースのアカウントを管理できます。
始める前に
- Firebase を JavaScript プロジェクトに追加します。
- アプリを Firebase プロジェクトに接続していない場合は、Firebase コンソールで接続します。
- メールアドレスとパスワードによるログインを有効にします。
- Firebase コンソールで [Auth] セクションを開きます。
- [Sign-in method] タブで [メール / パスワード] を有効にして、[保存] をクリックします。
パスワード ベースのアカウントを作成する
パスワードを使用して新しいユーザー アカウントを作成するには、アプリの登録ページで次の手順に沿って操作します。
- 新しいユーザーがアプリの登録フォームを使用して登録したら、アプリで必要な新しいアカウントの検証手順(新しいアカウントのパスワードが正しく入力されていることや、パスワードの複雑さの要件を満たしているかの確認など)を行います。
- 新しいユーザーのメールアドレスとパスワードを
createUserWithEmailAndPassword
に渡して、新しいアカウントを作成します。Web
import { getAuth, createUserWithEmailAndPassword } from "firebase/auth"; const auth = getAuth(); createUserWithEmailAndPassword(auth, email, password) .then((userCredential) => { // Signed up const user = userCredential.user; // ... }) .catch((error) => { const errorCode = error.code; const errorMessage = error.message; // .. });
Web
firebase.auth().createUserWithEmailAndPassword(email, password) .then((userCredential) => { // Signed in var user = userCredential.user; // ... }) .catch((error) => { var errorCode = error.code; var errorMessage = error.message; // .. });
ここではエラーの検出と対応もできます。エラーコードのリストについては、Auth のリファレンス ドキュメントをご覧ください。
メールアドレスとパスワードを使用してユーザーのログインを行う
パスワードを使用したユーザーのログイン手順は、新しいアカウントの作成手順と似ています。アプリのログインページで、次の手順に沿って操作します。
- ユーザーがアプリにログインしたら、そのユーザーのメールアドレスとパスワードを
signInWithEmailAndPassword
に渡します。Web
import { getAuth, signInWithEmailAndPassword } from "firebase/auth"; const auth = getAuth(); signInWithEmailAndPassword(auth, email, password) .then((userCredential) => { // Signed in const user = userCredential.user; // ... }) .catch((error) => { const errorCode = error.code; const errorMessage = error.message; });
Web
firebase.auth().signInWithEmailAndPassword(email, password) .then((userCredential) => { // Signed in var user = userCredential.user; // ... }) .catch((error) => { var errorCode = error.code; var errorMessage = error.message; });
ここではエラーの検出と対応もできます。エラーコードのリストについては、Auth のリファレンス ドキュメントをご覧ください。
推奨: メール列挙攻撃に対する保護を有効にする
メールアドレスをパラメータとして受け取る Firebase Authentication メソッドの中には、メールアドレスが登録されている必要がある処理(たとえばメールアドレスとパスワードを使用してログインするなど)においてメールアドレスが未登録である場合、またはメールアドレスが未使用であることが必要な処理(たとえばユーザーのメールアドレスを変更するなど)においてメールアドレスが登録済みである場合に、特定のエラーをスローするものがあります。これは、ユーザーに具体的な解決策を提示するのに役立つ一方で、ユーザーが登録したメールアドレスを検出するために悪意のあるアクターによって悪用される可能性もあります。
このリスクを軽減するため、Google Cloud の gcloud
ツールを使用して、プロジェクトでメール列挙保護を有効にすることをおすすめします。この機能を有効にすると Firebase Authentication のエラーレポートの動作が変わるため、アプリが具体的なエラーに依存しないように注意してください。
次のステップ
ユーザーが初めてログインすると、新しいユーザー アカウントが作成され、ユーザーがログイン時に使用した認証情報(ユーザー名とパスワード、電話番号、または認証プロバイダ情報)にアカウントがリンクされます。この新しいアカウントは Firebase プロジェクトの一部として保存され、ユーザーのログイン方法にかかわらず、プロジェクトのすべてのアプリでユーザーを識別するために使用できます。
-
アプリでユーザーの認証ステータスを把握するには、
Auth
オブジェクトにオブザーバーを設定することをおすすめします。これによって、ユーザーの基本的なプロフィール情報をUser
オブジェクトから取得できます。ユーザーを管理するをご覧ください。 Firebase Realtime Database と Cloud Storage のセキュリティ ルールでは、ログイン済みユーザーの一意のユーザー ID を
auth
変数から取得し、それを使用して、ユーザーがアクセスできるデータを制御できます。
既存のユーザー アカウントに認証プロバイダの認証情報をリンクすることで、ユーザーは複数の認証プロバイダを使用してアプリにログインできるようになります。
ユーザーのログアウトを行うには、signOut
を呼び出します。
Web
import { getAuth, signOut } from "firebase/auth"; const auth = getAuth(); signOut(auth).then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });
Web
firebase.auth().signOut().then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });