Firebaseとウェブの統合

WBOY
リリース: 2023-09-18 09:01:02
転載
1334 人が閲覧しました

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

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

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

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

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

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

Firebase 与 Web 集成

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

Firebase 与 Web 集成

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

Firebase 与 Web 集成

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

Firebase 与 Web 集成

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

Firebase 与 Web 集成

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

Firebase 与 Web 集成

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

これで、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 サイトの他の関連記事を参照してください。

ソース:tutorialspoint.com
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート