firebase

【Nuxt.js】firebase基礎編(Auth版):メールアドレスログインをできるようにしよう

2020/10/12 訂正
store内で$routeを使用していましたが、
そもそもstoreで使用不可でした😨
申し訳ございません!

動作はするかもしれませんが、
設計としてはお勧めしません💥
JSでの画面操作系は pages/にしないと
規模が大きくなってきたときに
どこに書いてあるか
わからなくなってしまいます😵

login.vue
dispatchしてユーザー情報を取得すると
ページ遷移するように変更しました💃✨✨

前置き

ログイン機能があると
サービスの幅が広がりますよね🌟
でも難しそう😔
そう思っていませんか?💡
それを解決するのがfirebase Auth!
これを使えば簡単に実装できます💕

今回はログインの実装がメインです!
そのため新規アカウント作成画面は作りません。
まずauthに慣れていきましょう🎶

アプリ開発基礎編
追加オプション機能では
アカウント作成などもやっていきます!

使うもの

Firebase Authentication
Vuex(ログイン状態の保持)


Step1: firebase authの準備

まずはfirebaseでプロジェクトを作成し、
ログイン方法の設定をしていきます🍒

プロジェクトの作成方法はこちら
step1-5. アカウントを選択
プロジェクト概要画面まで

ログイン方法を設定を選択

プロジェクトができたら
サイドメニューAuthentication > ログイン方法を設定

メールを選択

メールでのログインを有効にし、保存

usersタブに戻りユーザーを追加

登録できるとユーザー情報が表示されます🌟


Step2: firebaseとの連携

こちらの記事
Step3、Step4をご覧ください👀

コード

) file


Step3: ログイン機能の実装

公式ガイドのこちらを見てみましょう👀
Get Startedタブから順番に進めてみます🌸
ログインフォームを作って
methodsにこの関数を書けば良いわけですね💡
signInWithEmailAndPassword()

Sign in existing users

コード

) pages


Step4: Vuexに移行

今のままだとログインするだけなので
Vuexを使うメリットがないのですが、
ログインしたという状態を
保持するための準備です!

コード

) pages

) file

解説

index.vueで入力した
email, passwordを引数で渡します🎁
index.jsのactionsでは
第一引数が必ずcontextになるので
第二引数としてemail, passwordを受け取ります📩


Step5: ユーザーデータの取得

ログインができたら
ユーザー情報を表示したいので
情報を取得してきましょう!📩
こちらを見てみましょう👀
onAuthStateChanged()

Set an authentication state observer and get user data

コード

) file

解説

それぞれの役割を確認したい方はこちら

【Nuxt.js】Vuexまとめ編:はじめる前に、簡単理解!

state

取得情報の格納場所

getters

stateを取得

actions
  • ログイン成功時(.then)に記載
    (ログインと同時に取得)
    step7でログインと取得で
    切り分けるように調整をします✂︎
  • ガイド参考
    これで取得ができます!
    ID:user.uid
    💌:user.email
    引数に直接user.uidとは書けないので
    一旦uidと置き換えます
  • commit
    ログイン情報をstateに入れるため
    mutationsを呼び出します
mutations

取得した情報でstateを書き換えます

index.vue

computed users()で
gettersを呼び出し表示させておきます


Step6: ログイン情報保持

先ほどログインが成功した時に
ユーザーデータを取得できたので
こちらを追加しましょう!

  • stateにログイン状態の真偽値を追加
    ログインできたらtrueに変更
    分かりやすく新たなstateを追加してますが
    ログインできたらstateのuserに
    ユーザー情報をそのまま代入しても
    もちろんOKです!!⭕️
  • v-ifで真偽値による出し分け
    ログインtrue, ログアウトfalse

コード

) file

) pages


Step7: 調整

login.vueを作成し、
ログインページと
ログイン後のページを分けます。

store/index.jsのactionsを
役割で切り分けてみます✂︎

コード

) pages

index.vueをまるまるコピペ
fibaseのimportが不要→削除
全体のdiv class="login"に変更

また、ログインしたらindex.vueに遷移するよう
$router.pushを追加しています✍️

methodsのloginは分かりやすく付け足しましたが
1番スマートな書き方はこちらです❤️

) pages

) file

2つに切り分けました✂
︎ログイン(login)
ログイン情報の取得(checkLogin)

actions内で別のactionsを
dispatchで呼び出せます📣

-firebase
-,

© 2020 aLiz Nuxt