firebaseを使ったログイン機能

おはようございます。firebaseを使ったログイン機能にはこんなにもやることがありそうです。

ログイン認証がSPA上でどう実現されるか理解する
セットアップ
ユーザー登録の機能実装
ユーザーログインの機能を実装
トークンがないとアクセスできないようにする
プロジェクト全体でVuexを使用して使えるようにする
トークンをヘッダーにつけてリクエストを送る。
ログイン状態に応じてリダイレクトをする処理を実装する
ログイン状態に応じてナビゲーションバーの内容変更
トークンの有効期限が切れても動くような処理を実装する
自動ログインの処理を実装する
ログアウトの実装

わからない用語

トークン、SPA、Router、SDK、rest API、dispatch

わかった内容

トークン、

SPA、シングルページアプリケーション

Router、

SDK、

rest API、

dispatch

ログイン認証がSPA上でどう実現されるか理解する

VueRouterはURLとVueアプリをつなげるもの。
なぜ、認証が必要か。アカウント作るだけなら、ユーザーを作ればいい。勝手にデータを見られたり、書かれたりするのを防ぐため。twitterはポストリクエスト。axiosでサーバーに送れば、ツイートはできる。非公開データとかもgetリクエストで見ることができてしまう。

私は本人です。自分のアカウントに入力します。とサーバーにわかってもらう仕組みが認証。

どのように自分ですとサーバーに伝えられるかが必要となる。

サーバーにユーザー名、パスワードを送るとサーバーからトークンをもらう。

トークンは、jsonのデータがたくさん入っている。符号になっている長い文字列。改ざんしていたら、バレるもの。ブラウザlocalStorageにトークンを永続的に保存。

本人しか持っていない、トークンだから、本人だねと認証する。

他の人が書き換えていたら、ダメ。と返されるため、期間が短くなっている。firebase authenticationは１時間で切れるようになっている。

トークンを持っている人にしか、見せられないとかはサーバーが決めること。

セットアップ

見た目の設定
Firebase Authenticationのセットアップ、ログイン方法の有効選択

ユーザー登録（Register）の機能実装

SDKがある。rest APIを使う。firebase auth rest apiで調べる。sign up with emaiでそれに従って、設定する。

main js のaxiosのインスタンスbaseURLの変更。

firebaseのウェブAPIキーを使って、registerメソッドの設定をする。

axios.post('key',{データ内容})
.then

パスワードは6文字以上。

data内のidtokenを確認する

ユーザーログインの機能を実装

sign in with emailでendpoint確認。

登録のScriptとほとんど同じ。

送信後、入力ワードを空白にするようにする。

firebase authenticationでは、ユーザー、名前、写真のURL、メール、パスワード以外情報がない。

ユーザーの情報をデータで管理したいときは、cloud firestoreでさらにデータベースを作成する。

トークンがないとアクセスできないようにする

掲示板の内容をトークンがないと見れないようにする。

ルールを変更する。

allow read, write: if request.auth.uid ! = null;

有効期限のあるトークンがあればOKというルール

なければ、エラーが出るようにする。

idトークンをヘッダーなどに貼り付ける

vuexインストール。store、index.jsのファイル設定。

storeの設定をする。

state:{idToken:null},
mutations:{updataIdToken(state, idToken) {state.idToken =idToken ;},
actions: {login({ commit },authData) {axios.post内容}

dispatch('login', {データ})

プロジェクト全体でVuexを使用して使えるようにする

トークンをヘッダーにつけてリクエストを送る。

Authorizationの設定をする。

ログイン状態に応じてリダイレクトをする処理を実装する

beforeEnterをroutersにかく。

idTokenがないといけない設定にする。

もし、トークンがあれば、見れる。なければログインしてください。という設定をしておく。

ログインした後に、掲示板のURLに飛ぶようにする。

ログイン状態に応じてナビゲーションバーの内容変更

認証されていなければ、掲示板が消える。v-ifで書く。

認証されていれば、掲示板のみの表示にする。

リフレッシュトークンを使って、トークンの有効期限が切れても動くような処理を実装する

有効期限が１時間のみ、越えるとエラーになってしまう。

１時間経ったら、強制的にログアウトする仕組み。

もしくは、トークンの更新をする。

リフレッシュトークンを活用する。

再帰的な処理をするために関数として設定する

自動ログインの処理を実装する

ローカルストレージにidTokenを取っていきて入れる状態にする。

トークンの有効期限が過ぎていてら、ログイン画面に移るようにする。

そのために、有効期限が切れる値を設定しておく。

今の時間を取得して、その時間から１時間後というデータが、期限の切れる時間と設定しておく。

今の時間と比べて、その時間が後であれば、切れているということにする。

切れていなければ、更新する

ログアウトの実装

ログアウトのテキスト用意

クリックイベントでログアウトメソッドを作成

ストアからログアウトアクションをする

idTokenを消す。nullにする

ローカルストレージからもトークン情報を消す。

押したら、ログイン画面に移動する。