前置き
firebase系の記事が増えてきました🌟🤗
ログインの記事は公開しているので
今度はアカウント作成部分を作ります！
この部分だけなら
5分もかからないと思います…笑
firebaseAuthを使えば本当にめちゃくちゃ簡単です💕
こちらは有料記事にて公開します🎈🧸
作成時にメールの送信
エラー別の対処
ここでは純粋に
アカウント作成のみを記載してます！
メールアドレスログイン記事のコードに
付け加えるように書いていきます✍️
おすすめ記事
Googleログイン
twitterログイン
facebookログイン
Contents
コードの付け足し
アカウント作成については公式のココ📌
firebase Guides
Create a password-based account
この関数を使うようですね👀
.createUserWithEmailAndPassword()
コード
) pages
まずは登録フォームを作り
それを引数で渡せるようにしましょう！
これはlogin.vueをほぼコピペして少し変更してます。
・dispatchで呼び出すactionsをregisterに変更
・全体のdivのclass名loginをregisterに変更
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
<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> |
) file
Vuexのactionsにregisterを追加します🌟
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
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') $router.push('/') }).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 }, } |
Authenticationで確認
registerで登録をすると
firebaseのAuthenticationで
アカウントが作成されているのが
分かります🤗
簡単ですね🎉✨
ほぼコピペでいけちゃいますね🕶w
なんて楽なんでしょう…✨