firebase Vue JS #STEPでログイン/登録-jsチュートリアル-php.cn

firebase Vue JS #STEPでログイン/登録

DDD

リリース： 2024-10-27 07:01:29

オリジナル

400 人が閲覧しました

私は最近、この驚くべきシンプルな認証ツールを発見し、自分のプロジェクトに実装することができました。皆さんもこの認証ツールを自分のプロジェクトでも使用できるように、すべての機能を段階的に共有したいと思います。

私はフロントエンド開発者ですが、バックエンドに関する知識は非常に曖昧です。特に、ユーザーが個人情報を開発する際に機密情報や暗号化された情報を保存する必要があるログイン/登録画面の実装に関してはそうです。アプリケーションでは、この信じられないほど使いやすいツールがオプションとして登場しました。それでは、早速、例と説明を見てみましょう。

この最初の投稿では、Firebase でプロジェクトを作成し、プロジェクトを機能させるために必要なものをすべて設定します...

Firebase にログインするときに、オプション プロジェクトの作成 に移動します。
その後、プロジェクトに名前を付け (アプリの名前を付けることをお勧めします。私の場合は、ログインアプリ)、続行をクリックします。
次のステップは、プロジェクトの Google Analytics を有効にするかどうかです。私の場合は有効にしませんが、それはあなた次第です。その後、プロジェクトの作成.
読み込みが完了するまで待ち、
続行 をクリックします。
すべてがうまくいけば、この画面が表示されます。
次のステップでは、このオプション
認証 に進みます。
その中で、
始めましょう に移動します。
オプション
メール/パスワード を選択します。
次に、ログインオプションを有効にして設定を保存します。
画像に示すように、選択したオプションが認証メイン画面に表示されることがわかります。
次に、新しいサプライヤーの追加 オプションに進み、Google でのログインも構成します。
Google オプションを選択するだけです。
次に、アクティブ化する必要があります。その直後に、プロジェクトのパブリック名のタブが開き、ランダムな名前が作成されます。この場合、プロジェクト login-app と同じ名前を付けます。また、サポート用のメールも要求されます。通常、Google からのメールが検索されます。最後に を選択するだけです。 >を保存します。
そして、再びメインの認証画面にリダイレクトされ、2 つのアクティブなプロバイダーが表示されます。

プロジェクトの作成と試着室の構成のこの部分はついに終わりました✨。すぐに手を動かしてすべてうまくいくことを約束します。

次に、Firebase ホームページに戻り、Firebase をプロジェクトに統合するために必要なコードをコード内で取得できるようにする必要があります。

ここプロジェクト概要で、Web.
アプリを選択しましょう
それでは、このアプリにニックネームを付けましょう。ここでも、login-app という名前を付け、アプリの登録 をクリックすることにしました。
これが完了すると、Firebase をインストールするコマンドから Web アプリの設定に至るまで、プロジェクトに SDK を追加するために必要なすべてのものが提供されます。