firebase

【Nuxt.js】firebase基礎編(Auth版):アカウント作成時に表示名を登録しよう

前置き

今まではメールアドレスとパスワードのみで
ユーザーを管理していました。

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

表示名がないと不便なので
こちらを実装していきましょう✨

参考:
QuasarFramework + Firebase で、userの情報を更新する
[Firebase][iOS] Firebase Authentication で会員機能を作ってみよう


関数を確認

currentUser
ユーザー情報を取得し
updateProfile
このメソッドで情報を更新します🍎

ちなみに
onAuthStateChanged
こちらでも良さそうですが、
次回検証してみようと思います🎈🧸

このまま読み解くと
1度ログインしてから表示名を
更新することになります。
アカウント作成の時点でも
登録できるので
順番に理解していきましょう🌱

アカウント作成については
formを使わなくても
firebase上で作成できるので
簡単に試したい方はそちらで
やってみてください💫


Step1: ログインしてから表示名を変更する

まずはガイド通りに
ログイン後に
表示名を変更する流れで
実装します🍒


解説

ログイン情報保持で
storeが必須のため
Vuexを使用しています🌟

⬇️Vuexについては
 こちらをご覧ください👀
【Nuxt.js】Vuex基礎編:コードをスッキリさせよう
【Nuxt.js】Vuexまとめ編:はじめる前に、簡単理解!

index.vue
可能ならlogin.vue
ユーザー表示のみの
index.vueに分けてみてください🍎
挙動が分かれば良いので
今回はまとめています💫

ログインフォームで
emailpasswordを入力
ログインボタンを押すと
methodsloginが発火。

dispatch
Vuexのactions内の
loginを呼び出します。
入力したemailpassword
引数として渡します🎁

store/index.js
受け取った値で
ログインに成功したら
dispatch
checkLoginを呼び出し
user情報を取得します。
ここはuserプロパティと決まっているので
他の名前をつけようとすると
エラーになるのでご注意を💥☝️

DOM
ログインができてから
表示名を入力し、
リロードして
再度ログイン。
表示名が追加されていることが
確認できます✨👀

確認用にconsoleを使用していますが
確認が取れたらなくしましょう…🎈


コード


Step2: アカウント作成時に登録する

変更する関数と
表示方法が分かったので、
あとはアカウント作成時に
それができるよう
書き換えればOKです✨🙆‍♀️

解説

register.vue
formで入力した
email, password, updateName
まとめてactionsregisterに渡します🎁

store/index.js
アカウント作成時に必要なのは
emailpasswordなので
createUserWithEmailAndPassword
ここの引数には
その2つのみを使用します。
ここで更に登録名payload.name
渡してしまうと
エラーが出ます💥

Error

t {code: "auth/argument-error", message: "createUserWithEmailAndPassword failed: Expected 2 arguments but got 3.", a: null}

登録が完了したら
dispatchupdateを呼び出し
ここで登録名payload.name
渡します🎁

index.vue, DOM
あとはStep1で行った
ログインで
表示名を確認しましょう✨👀


コード

⬇️Step1と同じです。


まとめ

関数と表示方法が分かれば
あとは順番を変えるだけで
実装できましたね✨

そしてVuexは
見やすくなって本当に良いですね✨👀
エディタでpageとstoreを
横並びにするだけで
何がどうなってるか
すごく分かりやすいなと思いました♪

-firebase
-,

© 2021 aLiz Nuxt