【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
この関数を使うようですね👀
.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版):アカウント作成をできるようにしよう
この記事が気に入ったらサポートをしてみませんか?