ウェブサイトでFirebase認証を開始する

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

認証 SDK を追加して初期化する

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

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

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);

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 デザインのプロトタイプを作成している場合、ライブ サービスをデプロイせずにローカルで作業できることは素晴らしいアイデアです。 .

認証エミュレーターはローカル エミュレーター スイートの一部であり、アプリがエミュレートされたデータベースのコンテンツと構成、および必要に応じてエミュレートされたプロジェクト リソース (関数、他のデータベース、およびセキュリティ ルール) とやり取りできるようにします。

認証エミュレーターを使用するには、いくつかの手順が必要です。

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

詳細なガイドは、アプリを認証エミュレーターに接続するで入手できます。詳細については、 Local Emulator Suiteの概要を参照してください。

それでは、ユーザーを認証する方法を続けましょう。

新規ユーザー登録

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

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

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メソッドを呼び出します。

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

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メソッドを使用してオブザーバーをアタッチします。ユーザーが正常にサインインすると、オブザーバーでユーザーに関する情報を取得できます。

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

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

次のステップ

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

• Google ログイン
• フェイスブックログイン
• ツイッターログイン
• GitHub ログイン
• 匿名サインイン