- 投稿日:2022-03-18T18:19:50+09:00
Firebase Authenticationを使用したVue Webアプリのログイン機能実装
概要 現在実装を進めている個人開発のWebアプリプロジェクトについて、備忘を含めた記事を進めています。 今回の記事は 開発環境 Vue 2.x Vuex / Babel / Vue-CLI ESLint + Prettier 参考文献 Firebase公式 Firebase を JavaScript プロジェクトに追加する これからFirebaseでプロジェクトを始めようとする全ての人が知っておくべきこと v8→v9リリース 事前のセットアップ 前提として、下記セットアップをしてあります。 Firebase コンソールへの登録 Firebaseプロジェクトを作成 プロジェクト内でアプリを登録済み(Webアプリ) Firebaseでの作業 プロジェクトを作った後、該当プロジェクトのダッシュボードページを参照します。 「Authentication」「Sign-in method」から各種プロバイダを使用したログイン方法の設定をする事ができます。今回はシンプルな「メール/パスワード」での設定方法を試してみます。 「メール/パスワード」を選択するとポップアップが表示されるので、「有効にする」を選択して保存します。 続いて「Users」タブでユーザーを追加します。 「ユーザーを追加」ボタンを押下して表示されるポップアップから、任意のメールアドレス+パスワードを入力して追加します。 メールアドレスがID、任意の文字列がユーザーUIDとして登録されます。 Vueプロジェクト側の設定 プロジェクトを作った後、該当プロジェクトのダッシュボードページを参照します。 参照用テンプレート 見出し h1 見出し h2 見出し h3 見出し h4 見出し h5 見出し h6 テキスト テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。 テキストが入ります。テキストが入ります。テキストが入ります。 テキストリンク 太字テキスト イタリック体テキスト 打ち消しテキスト リスト リスト リスト リスト リスト リスト 番号付きリスト 番号付きリスト 番号付きリスト 番号付きリスト 番号付きリスト 引用 コードのインライン表示 引用 引用 引用 ソースコード引用 // 記述テキストがそのまま表示されます // 指定言語に準じた色分けが付きます console.log("Hello, World!"); hello.js // 参照ファイル付きのコード console.log("Hello, World!"); 罫線 / 区切り線 テーブル TH 左寄せ TH 中央寄せ TH 右寄せ TD TD TD TD TD TD