ウェブサイトで Firebase Authentication を使ってみる

Firebase Authentication を使用すると、ユーザーがアプリにログインする際に、メールアドレスとパスワードによるログインや、フェデレーション ID プロバイダによるログイン（Google ログインや Facebook ログインなど）などの 1 つ以上の方法を使用できるようになります。このチュートリアルでは、Firebase Authentication を使って、メールアドレスとパスワードのログインをアプリに追加する方法から始めます。

Authentication SDK を追加して初期化する

1. まだ行っていない場合は、Firebase JS SDK をインストールして Firebase を初期化します。

2. Firebase Authentication JS SDK を追加して Firebase Authentication を初期化します。

Web

ツリー シェイキングが可能なウェブ向けのモジュラー API の詳細と、名前空間対応の API からのアップグレード方法をご覧ください。

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

ツリー シェイキングが可能なウェブ向けのモジュラー API の詳細と、名前空間対応の API からのアップグレード方法をご覧ください。

import firebase from "firebase/compat/app";
import "firebase/compat/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 でプロトタイピングとテストを行う

アプリによるユーザーの認証方法について見ていく前に、Authentication 機能のプロトタイピングとテストに使用できるツールである Firebase Local Emulator Suite について紹介します。認証手法やプロバイダを検討している場合や、Authentication と Firebase Security Rules を使用して公開および非公開のデータで各種データモデルを試している場合、さらに、ログイン時の UI デザインのプロトタイプを作成している場合などは、ライブサービスをデプロイせずにローカルで作業できると便利です。

Authentication エミュレータは Local Emulator Suite の一部であり、これを使用すると、アプリはエミュレートされたデータベースのコンテンツと構成とやり取りでき、エミュレートされたプロジェクト リソース（関数、他のデータベース、セキュリティ ルール）ともオプションでやり取りできるようになります。

いくつかの手順を実施するだけで、Authentication エミュレータを使用できます。

1. アプリのテスト構成にコード行を追加して、エミュレータに接続します。
2. ローカル プロジェクトのディレクトリのルートから、firebase emulators:start を実行します。
3. 対話型のプロトタイピングには Local Emulator Suite UI を使用し、非対話型のテストには Authentication エミュレータ REST API を使用します。

詳細な手順については、アプリを Authentication エミュレータに接続するをご覧ください。詳細については、Local Emulator Suite の概要をご覧ください。

次に、ユーザーの認証方法を見てみましょう。

新しいユーザーを登録する

新規ユーザーがメールアドレスとパスワードを使用してアプリに登録できるフォームを作成します。ユーザーがフォームに入力したら、ユーザーから提供されたメールアドレスとパスワードを検証し、それらを createUserWithEmailAndPassword メソッドに渡します。

Web

ツリー シェイキングが可能なモジュール方式 Web API と名前空間方式 API からのアップグレードの詳細をご確認ください。

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;
    // ..
  });
auth_signup_password.js

Web

firebase.auth().createUserWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // Signed in 
    var user = userCredential.user;
    // ...
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
    // ..
  });
email.js

既存のユーザーをログインさせる

既存のユーザーがメールアドレスとパスワードを使用してログインできるフォームを作成します。ユーザーがフォームに入力したら、signInWithEmailAndPassword メソッドを呼び出します。

Web

ツリー シェイキングが可能なモジュール方式 Web API と名前空間方式 API からのアップグレードの詳細をご確認ください。

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;
  });
auth_signin_password.js

Web

firebase.auth().signInWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // Signed in
    var user = userCredential.user;
    // ...
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
  });
email.js

認証状態オブザーバーを設定し、ユーザーデータを取得する

ログインしているユーザーに関する情報が必要なアプリのページごとに、グローバル認証オブジェクトにオブザーバーをアタッチします。このオブザーバーは、ユーザーのログイン状態が変わるたびに呼び出されます。

onAuthStateChanged メソッドを使用してオブザーバーをアタッチします。ユーザーが正常にログインしたら、オブザーバーでユーザーに関する情報を取得できます。

Web

ツリー シェイキングが可能なモジュール方式 Web API と名前空間方式 API からのアップグレードの詳細をご確認ください。

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/auth.user
    const uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});
auth_state_listener.js

Web

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/v8/firebase.User
    var uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});
index.js

次のステップ

他の ID プロバイダと匿名ゲスト アカウントのサポートを追加する方法を学びます。

• Google ログイン
• Facebook ログイン
• Twitter ログイン
• GitHub ログイン
• 匿名ログイン