ホームページ >ウェブフロントエンド >jsチュートリアル >firebase Vue JS #STEPでログイン/登録
firebase Vue JS #STEPでログイン/登録
- DDDオリジナル
- 2024-10-27 07:01:29430ブラウズ
私は最近、この驚くべきシンプルな認証ツールを発見し、自分のプロジェクトに実装することができました。皆さんもこの認証ツールを自分のプロジェクトでも使用できるように、すべての機能を段階的に共有したいと思います。
私はフロントエンド開発者ですが、バックエンドに関する知識は非常に曖昧です。特に、ユーザーが個人情報を開発する際に機密情報や暗号化された情報を保存する必要があるログイン/登録画面の実装に関してはそうです。アプリケーションでは、この信じられないほど使いやすいツールがオプションとして登場しました。それでは、早速、例と説明を見てみましょう。
この最初の投稿では、Firebase でプロジェクトを作成し、プロジェクトを機能させるために必要なものをすべて設定します...
Firebase にログインするときに、オプション プロジェクトの作成 に移動します。
その後、プロジェクトに名前を付け (アプリの名前を付けることをお勧めします。私の場合は、ログインアプリ)、続行 をクリックします。
-
次のステップは、プロジェクトの Google Analytics を有効にするかどうかです。私の場合は有効にしませんが、それはあなた次第です。その後、プロジェクトの作成.
- 読み込みが完了するまで待ち、
続行 をクリックします。
- すべてがうまくいけば、この画面が表示されます。
- 次のステップでは、このオプション
認証 に進みます。
- その中で、
始めましょう に移動します。
- オプション
メール/パスワード を選択します。
次に、ログイン オプションを有効にして設定を保存します。
画像に示すように、選択したオプションが 認証 メイン画面に表示されることがわかります。
次に、新しいサプライヤーの追加 オプションに進み、Google でのログインも構成します。
Google オプションを選択するだけです。
次に、アクティブ化する必要があります。その直後に、プロジェクトのパブリック名のタブが開き、ランダムな名前が作成されます。この場合、プロジェクト login-app と同じ名前を付けます。また、サポート用のメールも要求されます。通常、Google からのメールが検索されます。最後に を選択するだけです。 >を保存します。
そして、再びメインの 認証 画面にリダイレクトされ、2 つのアクティブなプロバイダーが表示されます。
プロジェクトの作成と試着室の構成のこの部分はついに終わりました✨。すぐに手を動かしてすべてうまくいくことを約束します。
次に、Firebase ホームページに戻り、Firebase をプロジェクトに統合するために必要なコードをコード内で取得できるようにする必要があります。
ここプロジェクト概要で、Web.
アプリを選択しましょう
それでは、このアプリにニックネームを付けましょう。ここでも、login-app という名前を付け、アプリの登録 をクリックすることにしました。
これが完了すると、Firebase をインストールするコマンドから Web アプリの設定に至るまで、プロジェクトに SDK を追加するために必要なすべてのものが提供されます。
SDK を追加するこの部分では、npm または script タグの使用を選択できることに注意してください。私の場合、アイデアはこれを Vue JS プロジェクトに統合することなので、とにかく NPM を使用します。
さて、いよいよ重要なコードに移りましょう。
以上がfirebase Vue JS #STEPでログイン/登録の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。