Firebaseを使った爆速ログイン機能実装

＜何故この記事を書こうと思ったのか？＞

前回の記事はLaravel + Vue.jsを利用した記事を書きました。

しかし、今回はバックエンドがなくてもVue.js ＋ Firebaseを使うと(※プロジェクトに寄りますが)バックエンドの工数を大きく削減できるんだよ！ということを伝えたいと思い、記事を書こうと思いました。

＜前提条件＞

・HTMLとJSの基礎知識

・Firebaseのプロジェクト作成が済んでいる必要があります。

・Vue.jsの基礎的な知識(構文理解、ルーティング、メソッドの利用)

＜本記事のゴール＞

Firebaseを利用したログイン機能実装

＜作業の流れ＞

1、Firebaseのcdnの入手

2、Firebaseを利用するため必要設定埋め込み

3、新規会員&ログインフォーム作成

＜作業開始＞

1、Firebaseのcdnの入手

当時は以下のCDN使ってましたね(この記事では、h抜きのドメインだからCDN使う時に注意しましょう。)

ttps://www.gstatic.com/firebasejs/8.1.1/firebase-app.js

ttps://www.gstatic.com/firebasejs/8.1.1/firebase-analytics.js

2、Firebaseを利用するため必要設定埋め込み

一応、今回の記事ではログイン機能だけ設置するのでスクリプトタグにゴリゴリ書いちゃいましたが、コンフィグ関係の情報は環境変数に収めてユーザーの見えないところに、置くのが良いと思いますね。

※注：環境変数設定して、フロントのスクリプトタグに置く意ではないですよ笑

3、新規会員&ログインフォーム作成

ざっくりフォームHTMLとスクリプトタグのスクショ載せちゃいます。

＜新規会員画面＞

＜ログインフォーム＞

④新規会員登録&ログイン、ログアウトできるか検証

そして、Firebaseの管理画面を確認すると先ほど新規登録した「test@gmail.com」のアカウントが生成されているのを確認できました！

ログイン後のログアウトができるか検証し、無事ログアウトもできてますね！

＜後書き＞

Firebase Authenticationを使ったログイン機能実装はいかがだったでしょうか？

記事を執筆している私も、自分のアプリにログイン機能にて他プラットフォーム(Twitter,Facebook....等)アカウントからもログインできるようにしようと思ったらCreateメソッドのコードの中にif文を追加したりしないと行けないため、機能実装に時間がかかってしまうのでそういった問題を爆速で解決してくれるFirebaseがいかに便利かわかりますね。

それでは、失礼します。