Firebase Authentication を使用すると、ユーザーがアプリにログインする際に、メールアドレスとパスワードによるログイン、フェデレーション ID プロバイダ(Google ログインや Facebook ログインなど)などの複数のログイン方法を使用できるようになります。このチュートリアルでは、Firebase Authentication を使って、メールアドレスとパスワードによるログインをアプリに追加する方法から始めます。
アプリを Firebase に接続する
Firebase SDK をインストールします。説明に沿って、ウェブページに構成コードを貼り付けてください。
(省略可)Firebase Local Emulator Suite でプロトタイピングおよびテストを行う
アプリがユーザーをどのように認証するのかを説明する前に、Authentication 機能のプロトタイピングとテストに使用できるツール、Firebase Local Emulator Suite についてご紹介します。例えば、認証手法やプロバイダを選択している。または、Authentication ルールと Firebase セキュリティ ルールを使用してパブリック データとプライベート データでさまざまなデータモデルを試している。または、ログイン UI デザインのプロトタイプを作成している場合、ライブサービスをデプロイせずにローカルで作業できるようにすることは、良い手段です。
Authentication エミュレータは Local Emulator Suite の一部であり、これを使用すると、アプリはエミュレートされたデータベースのコンテンツと構成のほか、エミュレートされたプロジェクト リソース(関数、他のデータベース、セキュリティ ルール)ともオプションでやり取りできます。
Authentication エミュレータを使用するには、いくつかの手順を実施するだけです。
- アプリのテスト構成にコード行を追加して、エミュレータに接続します。
- ローカル プロジェクトのディレクトリのルートから、
firebase emulators:start
を実行します。 - 対話型のプロトタイピングには Local Emulator Suite UI を使用し、非対話型のテストには Authentication エミュレータ REST API を使用します。
詳しくは、アプリを Authentication エミュレータに接続するをご覧ください。詳細については、Local Emulator Suite の概要をご覧ください。
次に、ユーザーの認証方法を見てみましょう。
新しいユーザーを登録する
新規ユーザーがメールアドレスとパスワードを使用してアプリに登録できるフォームを作成します。ユーザーがフォームに入力したら、ユーザーから提供されたメールアドレスとパスワードを検証し、それらを createUserWithEmailAndPassword
メソッドに渡します。
ウェブ バージョン 9
import { getAuth, createUserWithEmailAndPassword } from "firebase/auth"; const auth = getAuth(); createUserWithEmailAndPassword(auth, email, password) .then((userCredential) => { // Signed in const user = userCredential.user; // ... }) .catch((error) => { const errorCode = error.code; const errorMessage = error.message; // .. });
ウェブ バージョン 8
firebase.auth().createUserWithEmailAndPassword(email, password) .then((userCredential) => { // Signed in var user = userCredential.user; // ... }) .catch((error) => { var errorCode = error.code; var errorMessage = error.message; // .. });
既存のユーザーをログインさせる
既存のユーザーがメールアドレスとパスワードを使用してログインできるフォームを作成します。ユーザーがフォームに入力したら、signInWithEmailAndPassword
メソッドを呼び出します。
ウェブ バージョン 9
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; });
ウェブ バージョン 8
firebase.auth().signInWithEmailAndPassword(email, password) .then((userCredential) => { // Signed in var user = userCredential.user; // ... }) .catch((error) => { var errorCode = error.code; var errorMessage = error.message; });
認証状態オブザーバーを設定してユーザーデータを取得する
ログインしているユーザーに関する情報が必要なアプリのページごとに、グローバル認証オブジェクトにオブザーバーをアタッチします。このオブザーバーは、ユーザーのログイン状態が変わるたびに呼び出されます。
onAuthStateChanged
メソッドを使用してオブザーバーをアタッチします。ユーザーが正常にログインしたら、オブザーバーでユーザーに関する情報を取得できます。
ウェブ バージョン 9
import { getAuth, onAuthStateChanged } from "firebase/auth"; const auth = getAuth(); onAuthStateChanged(auth, (user) => { if (user) { // User is signed in, see docs for a list of available properties // https://firebase.google.com/docs/reference/js/firebase.User const uid = user.uid; // ... } else { // User is signed out // ... } });
ウェブ バージョン 8
firebase.auth().onAuthStateChanged((user) => { if (user) { // User is signed in, see docs for a list of available properties // https://firebase.google.com/docs/reference/js/firebase.User var uid = user.uid; // ... } else { // User is signed out // ... } });
次のステップ
他の ID プロバイダと匿名ゲスト アカウントのサポートを追加する方法を学びます。