Firebase Authentication を使用すると、メール アドレスとパスワードによるサインイン、Google サインインや Facebook ログインなどのフェデレーション ID プロバイダーなど、1 つ以上のサインイン方法を使用してユーザーがアプリにサインインできるようになります。このチュートリアルでは、メール アドレスとパスワードによるサインインをアプリに追加する方法を示すことで、Firebase Authentication の使用を開始できます。
認証 SDK を追加して初期化する
Firebase JS SDK をまだインストールしていない場合は、インストールして Firebase を初期化します。
Firebase Authentication JS SDK を追加し、Firebase Authentication を初期化します。
Web version 9
import { initializeApp } from "firebase/app"; import { getAuth } from "firebase/auth"; // TODO: Replace the following with your app's Firebase project configuration // See: https://firebase.google.com/docs/web/learn-more#config-object const firebaseConfig = { // ... }; // Initialize Firebase const app = initializeApp(firebaseConfig); // Initialize Firebase Authentication and get a reference to the service const auth = getAuth(app);
Web version 8
import firebase from "firebase/app"; import "firebase/auth"; // TODO: Replace the following with your app's Firebase project configuration // See: https://firebase.google.com/docs/web/learn-more#config-object const firebaseConfig = { // ... }; // Initialize Firebase firebase.initializeApp(firebaseConfig); // Initialize Firebase Authentication and get a reference to the service const auth = firebase.auth();
(省略可)Firebase Local Emulator Suite でプロトタイプを作成してテストする
アプリがユーザーを認証する方法について説明する前に、認証機能のプロトタイプとテストに使用できる一連のツール、Firebase Local Emulator Suite を紹介しましょう。認証技術とプロバイダーを決定している場合、Authentication と Firebase セキュリティ ルールを使用してパブリック データとプライベート データでさまざまなデータ モデルを試している場合、またはサインイン UI デザインのプロトタイプを作成している場合、ライブ サービスをデプロイせずにローカルで作業できることは素晴らしいアイデアです。 .
認証エミュレーターはローカル エミュレーター スイートの一部であり、アプリがエミュレートされたデータベースのコンテンツと構成、および必要に応じてエミュレートされたプロジェクト リソース (関数、他のデータベース、およびセキュリティ ルール) とやり取りできるようにします。
認証エミュレーターを使用するには、いくつかの手順が必要です。
- アプリのテスト構成にコード行を追加して、エミュレーターに接続します。
- ローカル プロジェクト ディレクトリのルートから、
firebase emulators:start
を実行します。 - インタラクティブなプロトタイピングにはローカル エミュレーター スイート UI を使用し、非インタラクティブなテストには認証エミュレーター REST API を使用します。
詳細なガイドは、アプリを認証エミュレーターに接続するで入手できます。詳細については、 Local Emulator Suiteの概要を参照してください。
それでは、ユーザーを認証する方法を続けましょう。
新規ユーザー登録
新しいユーザーがメール アドレスとパスワードを使用してアプリに登録できるフォームを作成します。ユーザーがフォームに入力したら、ユーザーから提供された電子メール アドレスとパスワードを検証し、それらをcreateUserWithEmailAndPassword
メソッドに渡します。
Web version 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; // .. });
Web version 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
メソッドを呼び出します。
Web version 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; });
Web version 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
メソッドを使用してオブザーバーをアタッチします。ユーザーが正常にサインインすると、オブザーバーでユーザーに関する情報を取得できます。
Web version 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 // ... } });
Web version 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 プロバイダーと匿名ゲスト アカウントのサポートを追加する方法を学習します。