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

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 の一部であり、これを使用すると、アプリはエミュレートされたデータベースのコンテンツと構成のほか、エミュレートされたプロジェクトリソース（関数、他のデータベース、セキュリティルール）ともオプションでやり取りできます。エミュレートされた Cloud Storage はまだ Local Emulator Suite でサポートされていません。

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

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

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

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

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

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

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

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

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 プロバイダと匿名ゲストアカウントのサポートを追加する方法を学びます。