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

#vue #nuxt #プログラミング #プログラミング初心者 #エンジニア #駆け出しエンジニア #駆け出しエンジニアと繋がりたい #駆け出しWebクリエイターと繋がりたい #駆け出しWebクリエイター

🎈 WPでも公開中です
https://wp.me/pc9NHC-1ba

前置き

前回の続きです。
【Nuxt.js】firebase基礎編(Auth版)：アカウント作成時にプロフィール画像を登録しよう

firebase.storage().ref().child('profile.png')
プロフィール画像をstorageに送信する際、
前回はファイルをprofile.pngで固定していました。
ここをユーザー別にしたバージョンです。

流れ

ユーザー別のファイル名にするには、
Firebase Authenticationで
ログインした時のuser情報から
uidをファイル名につけます。

アカウント作成時に
自動でログインするので
その情報を使用すればOKです。
https://firebase.google.com/docs/auth/web/password-auth

コード

ということでregisterしたら
ログインできている状態なので
checkLoginでユーザー情報を取得し、
gettersのuser情報を使用しましょう✨

前回と違うのは
store/index.jsのみです。
register.vueと
login.vueは全く同じですが、
一覧でみれた方が良いと思うので
載せておきます💫📄

register.vue

<template>
 <div
   class="register"
 >
   // アカウントの登録フォーム
   <form
     class="form"
     @submit.prevent
   >
     <label class="label">
       <span class="label">
         email
       </span>
       <input
         class="input"
         type="text"
         v-model="email"
       >
     </label>
     <label class="label">
       <span class="label">
         password
       </span>
       <input
         class="input"
         type="password"
         v-model="password"
       >
     </label>
     <label class="label">
       <span class="label">
         name
       </span>
       <input
         class="input"
         type="text"
         v-model="updateName"
       >
     </label>
     <label class="label">
       <span class="label">
         image
       </span>
       <input
         class="input"
         type="file"
         @change="changeImg"
       >
     </label>
     // 選択した画像のプレビュー
     <img :src="postData.thumbnail" alt="">
     <button
       class="button"
       type="submit"
       @click="register"
     >
       Register
     </button>
   </form>
 </div>
</template>

<script>
export default {
 computed: {
   user () {
     return this.$store.getters['user']
   },
 },
 data () {
   return {
     email: '',
     password: '',
     updateName: '',
     thumbnail: '',
     postData: {
       thumbnail: '',
     },
   }
 },
 methods: {
   // アカウントの登録
   register () {
     this.$store.dispatch('register', {email: this.email, password: this.password, name: this.updateName, thumbnail: this.thumbnail})
   },
   // ここは選択した画像のプレビューをするだけ
   changeImg (e) {
     this.thumbnail = e.target.files[0]
     if (this.thumbnail) {
       const reader = new FileReader()
       reader.readAsDataURL(this.thumbnail)
       reader.onload = () => {
         this.postData.thumbnail = reader.result + ''
       }
     }
   },
 },
}
</script>

前回はactionsの
registerとupdateを
分けていましたが
本当のupdateをするのと
区別がしにくいため、
register内にupdate()メソッドを
入れ込みました🌟🤖

store/index.js

import firebase from '@/plugins/firebase'

export const state = () => ({
 user: {
   uid: '',
   email: '',
   name: '',
   photoURL: '',
 },
})

export const getters = {
 user: state => {
   return state.user
 }
}

export const actions = {
 login({ dispatch }, payload) {
   firebase.auth().signInWithEmailAndPassword(payload.email, payload.password)
     .then(user => {
       dispatch('checkLogin')
     }).catch((error) => {
       alert(error)
     })
 },
 checkLogin({ commit }) {
   firebase.auth().onAuthStateChanged(function (user) {
     if (user) {
       commit('getData', { uid: user.uid, email: user.email, name: user.displayName, photoURL: user.photoURL })
     }
   })
 },
 // 登録
 async register ({ getters, dispatch }, payload) {
   try {
     const user = await firebase.auth().createUserWithEmailAndPassword(payload.email, payload.password)
     // 登録ができたら自動でログインするのでcheckLoginを呼び出せる
     dispatch('checkLogin')
     // checkLoginで取得したuser情報をgettersから取ってくる
     const userId = getters.user.uid
     // storageに画像を送信、ファイル名をユーザーidにする
     let storage = firebase.storage()
     let storageRef = storage.ref().child(`users/${userId}.png`)
     const putImg = await storageRef.put(payload.thumbnail)
     // storageに送信した画像のurlを取得
     storageRef.getDownloadURL()
     .then(res => {
       // プロフィール画像の登録
       firebase.auth().currentUser.updateProfile({
         photoURL: res,
       })
     })
     // 表示名の登録
     firebase.auth().currentUser.updateProfile({
       displayName: name,
     })
     .then(()=> {
       // 成功した時の処理
     })
     .catch((error)=> {
       // エラー時の処理
     })
   } catch ( error ) {
     // エラー時の処理
   }
 },
}

export const mutations = {
 getData (state, user) {
   state.user = user
 },
}

login.vue

<template>
 <div class="page">
   // ユーザー情報を表示
   <p>user.uid: {{ user.uid }}</p>
   <p>user.email: {{ user.email }}</p>
   <p>user.name: {{ user.name }}</p>
   <img :src="user.photoURL" alt="">
   // ログインフォーム
   <form
     class="form"
     @submit.prevent
   >
     <label class="label">
       <span class="label">
         email
       </span>
       <input
         class="input"
         type="text"
         v-model="email"
       >
     </label>
     <label class="label">
       <span class="label">
         password
       </span>
       <input
         class="input"
         type="password"
         v-model="password"
       >
     </label>
     <button
       class="button"
       type="submit"
       @click="login"
     >
       Login
     </button>
   </form>
 </div>
</template>

<script>
export default {
 data () {
   return {
     email: '',
     password: '',
     updateName: '',
   }
 },
 computed: {
   user () {
     return this.$store.getters['user']
   },
 },
 methods: {
   update () {
     this.$store.dispatch('update', this.updateName)
   },
   login(email, password) {
     this.$store.dispatch('login', {email: this.email, password: this.password})
   },
 },
}
</script>

まとめ

今回はかなり迷走しましたが
なんとか形になりました✨👏

登録時の自動ログインを忘れていて
dispatch('login')したり…
ネストが深くなるからと
update()メソッドを切り離していたり…
全体の構成を見直す
良い機会になりました👀

🎈 WPでも公開中です
https://wp.me/pc9NHC-1ba