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

Contents

前置き
流れ
コード
まとめ

前置き

以前は表示名(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')

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

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)
      })
  },
  // ログインできたらプロフィール画像(photoURL)を含めたユーザー情報を取得してくる
  checkLogin({ commit }) {
    firebase.auth().onAuthStateChanged(function (user) {
      if (user) {
        console.log(user)
        commit('getData', { uid: user.uid, email: user.email, name: user.displayName, photoURL: user.photoURL })
      }
    })
  },
  // 登録
  register ({ dispatch }, payload) {
    firebase.auth().createUserWithEmailAndPassword(payload.email, payload.password)
    .then(user => {
      console.log(user)
      dispatch('update', payload.name)
    }).catch(function (error) {
      console.log({'code':error.code, 'message':error.message})
    })
    // storageに選択した画像を送信
    let storage = firebase.storage()
    let storageRef = storage.ref().child('profile.png')
    storageRef.put(payload.thumbnail)
      .then(res => console.log(res))
      .catch(error => console.log(error))
  },
  // 登録が完了すると同時にプロフィール画像(photoURL)と表示名(displayName)をアップデート！
  update ({ context }, name) {
    let storage = firebase.storage()
    let storageRef = storage.ref().child('profile.png')
    storageRef.getDownloadURL()
      .then(res => {
        console.log(res)
        firebase.auth().currentUser.updateProfile({
          photoURL: res,
        })
      })
    firebase.auth().currentUser.updateProfile({
      displayName: name,
    })
      .then(()=> {
        console.log('Update successful')
      })
      .catch((error)=> {
        console.log(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)

})

// ログインできたらプロフィール画像(photoURL)を含めたユーザー情報を取得してくる

checkLogin({ commit }) {

firebase.auth().onAuthStateChanged(function (user) {

if (user) {

console.log(user)

commit('getData', { uid: user.uid, email: user.email, name: user.displayName, photoURL: user.photoURL })

}

})

// 登録

firebase.auth().createUserWithEmailAndPassword(payload.email, payload.password)

.then(user => {

console.log(user)

dispatch('update', payload.name)

}).catch(function (error) {

console.log({'code':error.code, 'message':error.message})

})

// storageに選択した画像を送信

let storage = firebase.storage()

let storageRef = storage.ref().child('profile.png')

storageRef.put(payload.thumbnail)

.then(res => console.log(res))

.catch(error => console.log(error))

// 登録が完了すると同時にプロフィール画像(photoURL)と表示名(displayName)をアップデート！

update ({ context }, name) {

let storage = firebase.storage()

let storageRef = storage.ref().child('profile.png')

storageRef.getDownloadURL()

.then(res => {

console.log(res)

firebase.auth().currentUser.updateProfile({

photoURL: res,

})

firebase.auth().currentUser.updateProfile({

displayName: name,

})

.then(()=> {

console.log('Update successful')

})

.catch((error)=> {

console.log(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>

まとめ

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