【Nuxt.js】firebase基礎編(Auth版)：アカウント作成をできるようにしよう

🎈 この記事はWPへ移行しました
【Nuxt.js】firebase基礎編(Auth版)：アカウント作成をできるようにしよう

# 前置き

firebase系の記事が増えてきました🌟🤗
ログインの記事は公開しているので
今度はアカウント作成部分を作ります！
この部分だけなら
5分もかからないと思います…笑
firebase使えば本当にめちゃくちゃ簡単です💕

こちらは有料記事にて公開します🎈🧸
・作成時にメールの送信
・エラー別の対処
ここでは純粋に
アカウント作成のみを記載してます！

メールアドレスログインのコードに
付け加えるように書いていきます✍️
https://note.com/aliz/n/n7f4ae08ba828

📝他のログイン記事
Googleログイン
https://note.com/aliz/n/nbda9579d979a
twitterログイン
https://note.com/aliz/n/na2d2f41d4877
facebookログイン
https://note.com/aliz/n/n428bc927b86f

# コードの付け足し

アカウント作成については公式のココ📌
firebase Guides
Create a password-based account

Authenticate with Firebase using Password-Based Accounts using Javascript

この関数を使うようですね👀
.createUserWithEmailAndPassword()

【register.vue】
まずは登録フォームを作り
それを引数で渡せるようにしましょう！
これはlogin.vueをほぼコピペして少し変更してます。
・dispatchで呼び出すactionsをregisterに変更
・全体のdivのclass名loginをregisterに変更

<template>
 <div
   class="register"
 >
   <h1
     class="text"
   >
     アカウント登録
   </h1>
   <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="register"
     >
       Register
     </button>
   </form>
   <nuxt-link
     to="/login"
     class="link"
   >
     ログインはこちら
   </nuxt-link>
 </div>
</template>

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

【store/index.js】
Vuexのactionsにregisterを追加します🌟

import firebase from '~/plugins/firebase'

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

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) {
      commit('getData', { uid: user.uid, email: user.email })
      commit('switchLogin')
    }
  })
 },
 register ({ dispatch, commit }, payload) {
   firebase.auth().createUserWithEmailAndPassword(payload.email, payload.password)
   .then(user => {
     console.log(user)
     dispatch('checkLogin')
   }).catch(function (error) {
     console.log({'code':error.code, 'message':error.message})
   })
  },
}

export const mutations = {
 getData (state, payload) {
  state.user.uid = payload.uid
  state.user.email = payload.email
 },
 switchLogin (state) {
  state.user.login = true
 },
}

【結果】
registerで登録をすると

firebaseのAuthenticationで
アカウントが作成されているのが
分かります🤗

簡単ですね🎉✨
ほぼコピペでいけちゃいますね🕶w
なんて楽なんでしょう…✨

🎈 この記事はWPへ移行しました
【Nuxt.js】firebase基礎編(Auth版)：アカウント作成をできるようにしよう