Vue.jsとVuexを使ってFirebase Authenticationでログイン機能を実装する




Vuexとは

VuexはVue.jsでの状態を管理するライブラリです。

フロントエンドでのページの状態(state)を管理する場合、いろんなところからデータを変更してしまうとその状態に対応したviewに変更を追従するのが大変になっていまします。

Vuexを使うことで状態の変更方法を一箇所(Actions)にまとめることで管理をしやすくし、状態を画面(View)に反映することが簡単になります。

下記画像のようにViewを変更→Actions経由でStateを変更→Stateが変更されたらViewに反映するという一方向の流れを作って単純化できます。

Vuexの導入

Vuexのインストール方法

yarnとnpmは下記です。

スクリプトをCDNからダウンロードすることもできます。vuex@3.0.1とすることでバージョンも指定できます。

Vuexの設定

Vue.jsでVuexを使う設定はVue.use()にVuexを渡すだけです。Vuex.storeにvuexで保持する状態、関数を設定していきます。

state

stateに保持したい状態を設定します。ここに設定した値はリロードしてもリフレッシュさることがありません。

componentからはthis.$stateでアクセスできます。

mutations

mutatinsはstateを変更するための関数です。stateの変更をmutationsにまとめることで処理を統一することができます。

getters

gettersはstateの値を取得する関数をここにまとめます。

Firebase Authentication

Firebase AuthemticationはFacebookやGoogle、GitHubなど様々なプロバイダを使ったログイン機能を簡単に実装することができます。

init()でfirebaseの初期化を行なっています。configはFirebaseのコンソールから取得できます。

Persistence.SESSIONを設定することで認証情報をローカルストレージに保存することができます。

onAuth()で呼んでいるonAuthStateChanged()は認証状態が変更されたタイミングで呼ばれる関数で、ログインしているユーザのstateを変更しています。

main.jsでfirebaseを初期化するinit()と認証状態を管理するonAuth()関数を呼んでおきます。

main.jsで下記App.vueを読み込んでいます。App.vueではヘッダーに表示するLogin.vueを読み込んでいてそこでfirebaseuiを使ってログイン画面を表示しています。

firebaseuiモジュールはGoogle、Facebook、Twitter、Githubなどのログイン画面を綺麗に表示してくれます。下記サンプルではGoogleとGitHubでのログインが行えるようになっています。

 

firebaseuiでは認証後にリダイレクトさせるコールバックURLを指定して任意の処理を行なったり、利用規約、プライバシーポリシー用のURLも設定できます。

これだけのソースコードでログイン機能を簡単に実装することができるのでおすすめです。

 

The following two tabs change content below.

髙妻智一

2013年CyberAgent新卒入社 スマホゲームを作る子会社に所属し、サーバーサイドのエンジニアを担当。2年目の終わりから新規子会社の立ち上げに参加し、サーバーサイドのエンジニアリーダーとしてサービースのリリースから運用までを担当。 2018年仮想通貨のスマホウォレットを提供するGinco Incにブロックチェーンエンジニアとして入社。






よく読まれている関連記事はこちら



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です