Web サイトで Firebase 認証を始める

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

Connect your app to Firebase

Install the Firebase SDK.

(Optional) Prototype and test with Firebase Local Emulator Suite

アプリがユーザーを認証する方法について話す前に、認証機能のプロトタイプとテストに使用できるツールのセットを紹介します:Firebase Local Emulator Suiteです。 認証技術やプロバイダを決定したり、Authentication や Firebase Security Rules を使用して公開データおよび非公開データで異なるデータモデルを試したり、サインイン UI デザインのプロトタイプを作成したりする場合、ライブサービスを展開せずにローカルで作業できることは素晴らしいアイデアです。

Authentication Emulator は Local Emulator Suite に含まれており、アプリで、エミュレートしたデータベース コンテンツおよび設定、またオプションでプロジェクトリソース(関数、その他のデータベース、セキュリティルール)と対話できるようになっています。 Local Emulator Suite はまだエミュレートされたストレージをサポートしていないことに注意してください。

Authentication エミュレーターを使用するには、次のいくつかのステップを実行するだけです。

  • Local Project ディレクトリのルートから firebase emulators:start を実行します。
  • Local Emulator Suite UI を使用してインタラクティブなプロトタイピングを行うか、Authentication emulator REST API を使用して非インタラクティブなテストを実行します。

    次に、ユーザーの認証方法について説明します。 ユーザーがフォームを完了すると、ユーザーによって提供された電子メール アドレスとパスワードを検証し、それらを createUserWithEmailAndPassword メソッドに渡します:

    既存のユーザーにサインインする

    既存のユーザーが電子メール アドレスとパスワードを使ってサインインできるようにするフォームを作成します。 ユーザーがフォームを完了すると、signInWithEmailAndPasswordメソッドを呼び出します。

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

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

    オブザーバーは、onAuthStateChangedメソッドを使用してアタッチします。

    他の ID プロバイダーおよび匿名ゲスト アカウントのサポートを追加する方法について説明します:

    • Google サインイン
    • Facebook ログイン
    • Twitter ログイン
    • GitHub ログイン
    • 匿名サインイン
  • Leave a Reply