firebase

【Nuxt.js】firebase基礎編(Auth版):アカウント作成時にプロフィール画像を登録しよう

前置き

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

これと同じで
ログイン後にする予定のupdate処理を
登録時に行ってしまえばOKです💫

今までの記事を
組み合わせたものなので
ある程度firebaseに慣れた方向けです🍎
firebaseを広く浅く理解したい方や、
Vuexの復習をしたい人に良いかもしれません💡


流れ

今回は画像なので…
まずはstorageに画像を送信📤
同時に送信した画像のurlを取得📥
AuthのupdateProfile()メソッドで
photoURLにそのurlを入れる
といった流れになります🍀

storageはこちらをご覧ください👀
【Nuxt.js】firebase基礎編:Cloud Storageで画像アップロード&取得(Vuex未使用)
【Nuxt.js】firebase基礎編:Cloud Storageで画像アップロード&取得(Vuex使用)


コード

登録、ログイン、Vuexが必要で
長くなっているため
コード内にコメントしています💫

ただstorageのchild
ログイン後のuidを使用して
アカウント別に分けるなどはしていません。
uidを取得する前にstorageに送信しているからです。
async/awaitを使用するなど
工夫すればこの辺はユーザー別にできそう🤔💭
firebase.storage().ref().child('profile.png')


まとめ

今回はほとんど解説なしで
流れの理解に注力しました!
firebaseの知識があれば
「ここでdispatchで呼び出すんでしょ…」
とスムーズに理解できたかもしれません🌟

-firebase
-,

© 2021 aLiz Nuxt