Firebaseとウェブの統合

Firebase は、ユーザーにバックエンド サービスを提供するために 2014 年に Google によって開始されました。モバイルおよび Web アプリケーションの開発に使用できる、さまざまな種類の高品質サービスを提供します。たとえば、リアルタイム データベース、ユーザー認証、クラウド ストレージなどを提供します。さらに、アプリケーションのトラフィックを分析する分析機能も提供します。セットアップが簡単なため、さらに人気があります。

このチュートリアルでは、Firebase Authentication を単一ページの Web アプリケーションに統合する方法を学習します。

ユーザーは、以下の手順に従って Firebase アカウントを設定し、シングルページ ウェブ アプリケーションと統合する必要があります。

• ステップ 1 - まず、Firebase ウェブサイトにアクセスしてアカウントを作成します。

• ステップ 2 - 次に、https://console.firebase.google.com/u/0/ に移動して Firebase コンソールを開きます。

• ステップ 3 - [プロジェクトの作成] ボタンをクリックして、新しいプロジェクトの作成を開始します。

• ステップ 4 - ここに必要な詳細を入力し、[続行] ボタンをクリックします。ここでは「テスト」アプリケーションを作成しています。

• ステップ 5 - 希望の場所を選択し、利用規約に同意して、[プロジェクトの作成] ボタンをクリックします。その後、プロジェクトが作成されるまで待ちます。

• ステップ 6 - 次のページにリダイレクトされます。ここで、「認証」カード要素をクリックします。その後、「開始」ボタンをクリックしてください。

• ステップ 7 - [ログイン方法] タブに移動し、[電子メール/パスワード] フィールドをクリックします。その後、電子メール/パスワード方式を有効にして、「保存」ボタンをクリックします。ここから、ユーザーは Web アプリケーションを認証するための他の方法を有効にすることもできます。

• ステップ 8 - ここで、[プロジェクト設定] をクリックし、そこから API とプロジェクト ID を取得します。どこかに保管してください。以下の例でこれを使用します。

単一ページの静的アプリケーションを作成する

これで、Firebase プロジェクトのセットアップが完了しました。次に、単一ページの静的アプリケーションを作成します。

＃＃＃ステップ＃＃＃

• ステップ 1

  - いずれかの方法で Firebase をプロジェクトに追加します。ここでは、CDN の使用を追加しました。開発者は、現在取り組んでいるプロジェクトに応じて SDK を使用することもできます。

• ステップ 2

  - 次に、電子メールとパスワードを入力するための簡単な HTML テンプレートを作成します。また、登録、ログイン、ログアウトのボタンを追加します。

• ステップ 3

  - JavaScript で、API キーとプロジェクト ID を使用して Firebase 構成を初期化します。

• ステップ 4

  - onAuthStateChanged() メソッドを使用して、認証状態が変化したときにメッセージを出力します。

• ステップ 5

  - Firebase の auth() メソッドを使用して認証を初期化します。

• ステップ 6

  - 次に、ユーザーを Firebase に追加する addUsers() 関数を作成します。関数でメールアドレスとパスワードにアクセスし、createUserWithEmailAndPassword() メソッドを使用してユーザーを Firebase に追加します。

• ステップ 7

  - 次に、logIn() 関数を作成し、signInWithEmailAndPassword() メソッドを使用して、電子メールとパスワードを使用してアプリケーションにログインします。

  李>
• ステップ 8

  - さらに、signOut() メソッドを使用して現在のセッションを終了する logout() 関数を作成します。

  ＃＃＃例＃＃＃
以下の例では、2 つの入力フィールドを持つ単純なフォームを作成します。ユーザーが登録ボタンをクリックするたびに、addUsers() 関数が呼び出され、ユーザーが Firebase に追加されます。ユーザーが弱いパスワードまたは間違った電子メール アドレスを入力すると、Firebase はエラーを返します。

さらに、ユーザーがログイン ボタンをクリックすると、「login()」関数が呼び出され、ユーザーはアプリケーションにログインできるようになります。ユーザーが間違ったパスワードまたはメールアドレスを入力すると、Firebase はエラーを返します。ユーザーが「signOut」ボタンをクリックすると、signOut() 関数が実行され、現在のセッションが終了します。

注意

- ここで、開発者はプロジェクトに応じて API キー、プロジェクト ID、プロジェクト ドメインを変更する必要があります。次の認証情報はテスト目的のみに生成されます。

リーリー

ユーザーは、Firebase を Web アプリケーションと統合する方法を学びました。経験豊富な開発者であれば、Firebase をあらゆる Web アプリケーションと統合するのにかかる時間はわずか 15 分です。さらに、ユーザーがアプリにログインするときに弱いパスワードを入力するとエラーが発生しますが、開発者が心配する必要のないその他のことはすべて管理されます。

さらに、開発者は任意のウェブ アプリケーションやモバイル アプリケーションで Firebase Database を使用できます。

以上がFirebaseとウェブの統合の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。