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

前置き

前回の続きです。
【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は全く同じですが、
一覧でみれた方が良いと思うので
載せておきます💫📄

<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>

<div

class="register"

// アカウントの登録フォーム

<form

class="form"

@submit.prevent

</span>

<input

class="input"

type="text"

v-model="email"

</label>

password

</span>

<input

class="input"

type="password"

v-model="password"

</label>

name

</span>

<input

class="input"

type="text"

v-model="updateName"

</label>

image

</span>

<input

class="input"

type="file"

@change="changeImg"

</label>

// 選択した画像のプレビュー

<button

class="button"

type="submit"

@click="register"

</button>

</form>

</div>

</template>

export default {

computed: {

user () {

return this.$store.getters['user']

data () {

return {

email: '',

password: '',

updateName: '',

thumbnail: '',

postData: {

thumbnail: '',

}

methods: {

// アカウントの登録

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()メソッドを
入れ込みました🌟🤖

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
  },
}

import firebase from '@/plugins/firebase'

export const state = () => ({

user: {

uid: '',

email: '',

name: '',

photoURL: '',

})

export const getters = {

user: state => {

return state.user

}

export const actions = {

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

}

<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>

// ユーザー情報を表示

<p>user.email: {{ user.email }}</p>

// ログインフォーム

<form

class="form"

@submit.prevent

</span>

<input

class="input"

type="text"

v-model="email"

</label>

password

</span>

<input

class="input"

type="password"

v-model="password"

</label>

<button

class="button"

type="submit"

@click="login"

</button>

</form>

</div>

</template>

export default {

data () {

return {

email: '',

password: '',

updateName: '',

}

computed: {

user () {

return this.$store.getters['user']

methods: {

update () {

this.$store.dispatch('update', this.updateName)

this.$store.dispatch('login', {email: this.email, password: this.password})

}

</script>

まとめ

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

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