【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に分けてみてください🍎
挙動が分かれば良いので
今回はまとめています💫

ログインフォームで
emailとpasswordを入力
ログインボタンを押すと
methodsのloginが発火。

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

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

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

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

コード

<template>
  <div class="page">
    // ユーザー情報を表示
    <p>user.uid: {{ user.uid }}</p>
    <p>user.email: {{ user.email }}</p>
    <p>user.name: {{ user.name }}</p>
    // 表示名をアップデート
    <input
      v-model="updateName"
      type="text"
    >
    <button @click="update">update</button>
    // ログインフォーム
    <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>

// 表示名をアップデート

<input

v-model="updateName"

type="text"

<button @click="update">update</button>

// ログインフォーム

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

import firebase from '@/plugins/firebase'

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

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

export const actions = {
  login({ dispatch }, payload) {
    firebase.auth().signInWithEmailAndPassword(payload.email, payload.password)
      .then(user => {
        console.log('成功！')
        dispatch('checkLogin')
      }).catch((error) => {
        alert(error)
      })
  },
  checkLogin({ commit }) {
    // userプロパティを使用
    firebase.auth().onAuthStateChanged(function (user) {
      if (user) {
        console.log(user)
        commit('getData', { uid: user.uid, email: user.email, name: user.displayName })
      }
    })
  },
  update ({ context }, name) {
    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: '',

})

export const getters = {

user: state => {

return state.user

}

export const actions = {

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

.then(user => {

console.log('成功！')

dispatch('checkLogin')

}).catch((error) => {

alert(error)

})

checkLogin({ commit }) {

// userプロパティを使用

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

if (user) {

console.log(user)

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

}

})

update ({ context }, name) {

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

}

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

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

解説

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

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

Error

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

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

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

コード

<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>
      <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: '',
    }
  },
  methods: {
    register () {
      this.$store.dispatch('register', {email: this.email, password: this.password, name: this.updateName})
    }
  },
}
</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>

<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: '',

}

methods: {

this.$store.dispatch('register', {email: this.email, password: this.password, name: this.updateName})

}

</script>

import firebase from '@/plugins/firebase'

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

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

export const actions = {
  login({ dispatch }, payload) {
    firebase.auth().signInWithEmailAndPassword(payload.email, payload.password)
      .then(user => {
        console.log('成功！')
        dispatch('checkLogin')
      }).catch((error) => {
        alert(error)
      })
  },
  checkLogin({ commit }) {
    firebase.auth().onAuthStateChanged(function (user) {
      if (user) {
        console.log(user)
        commit('getData', { uid: user.uid, email: user.email, name: user.displayName })
      }
    })
  },
  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})
    })
  },
  update ({ context }, name) {
    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: '',

})

export const getters = {

user: state => {

return state.user

}

export const actions = {

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

.then(user => {

console.log('成功！')

dispatch('checkLogin')

}).catch((error) => {

alert(error)

})

checkLogin({ commit }) {

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

if (user) {

console.log(user)

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

}

})

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

})

update ({ context }, name) {

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

}

⬇️Step1と同じです。

<template>
  <div class="page">
    // ユーザー情報を表示
    <p>user.uid: {{ user.uid }}</p>
    <p>user.email: {{ user.email }}</p>
    <p>user.name: {{ user.name }}</p>
    // 表示名をアップデート
    <input
      v-model="updateName"
      type="text"
    >
    <button @click="update">update</button>
    // ログインフォーム
    <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>

// 表示名をアップデート

<input

v-model="updateName"

type="text"

<button @click="update">update</button>

// ログインフォーム

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

まとめ

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

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