2018年12月14日

FirebaseとNuxt.jsを使ってユーザ認証関係

via: FirebaseとNuxt.jsを使ってユーザ認証関係を簡単に作ってみる

経験が少ない技術のキャッチアップがてらにサンプルをひたすら写経シリーズ。

初期設定



npx create-nuxt-app nuxt_firebase


でインストールして以下のコマンドで実行

cd nuxt_firebase
npm run dev


これで http://localhost:3000/ にアクセスできます。楽

Firebaseをインストールして

npm install firebase


pluginsの中にfirebase.jsを作成

import firebase from 'firebase'

if (!firebase.apps.length) {
firebase.initializeApp({
apiKey: "API_KEY",
authDomain: "APP_ID.firebaseapp.com",
databaseURL: "https://PROJECT_ID.firebaseio.com",
projectId: "PROJECT_ID",
storageBucket: "PROJECT_ID.appspot.com",
messagingSenderId: "1234567890"
})
}

export default firebase


各種の設定はFirebaseプロジェクトの「ウェブアプリに Firebase を追加」から取得できる。

また、左メニューのAuthenticationよりログイン方法のメール / パスワードを有効にして、サンプルユーザーを作成しておく

ストア設定



export const strict = false

export const state = () => ({
user: null,
})

export const mutations = {
setUser (state, payload) {
state.user = payload
}
}

export const actions = {
setUser ({ commit }, payload) {
commit('setUser', payload)
}
}

export const getters = {
isAuthenticated (state) {
return !!state.user
}
}



ログイン機能




/pages/index.vueを以下のように変更しておく

<template>
<div>
<!-- ログイン中に表示される画面 -->
<div v-if="isAuthenticated">
{{ user.email }}でログイン中です<br>
<button v-on:click="logout">ログアウト</button><br>
<a href="/member-page">メンバーページへ</a>
</div>
<!-- ログインしていない時に表示される画面 -->
<div v-else>
メール<br>
<input type="text" v-model="email"><br>
パスワード<br>
<input type="password" v-model="password"><br>
<button v-on:click="login">ログイン</button>
</div>
</div>
</template>

<script>
import firebase from '~/plugins/firebase'
import { mapActions, mapState, mapGetters } from 'vuex'
export default {
data() {
return {
email: '',
password: ''
}
},
computed: {
...mapState(['user']),
...mapGetters(['isAuthenticated'])
},
mounted() {
firebase.auth().onAuthStateChanged((user) => {
this.setUser(user)
})
},
methods : {
...mapActions(['setUser']),
login() {
firebase.auth().signInWithEmailAndPassword(this.email, this.password)
.then(user => {
// ログインしたら飛ぶページを指定
// this.$router.push("/member-page")
}).catch((error) => {
alert(error)
});
},
logout() {
firebase.auth().signOut()
.then(() => {
this.setUser(null)
}).catch((error) => {
alert(error)
})
}
}
}
</script>


これによりログイン時と未ログイン時に状況を切り替えることができる。

ここまでは参考サイトのほぼ引用。
ここからは独自の内容。

アカウント作成



index.vueにアカウント作成用にページへのURLを追加して

      <button v-on:click="login">ログイン</button>
<p><a href="/register-user">新規会員登録</a></p>
</div>
</div>
</template>


/pages/register-user.vueを以下のように設定する

<template>
<div>
メール<br>
<input type="text" v-model="email"><br>
パスワード<br>
<input type="password" v-model="password"><br>
<p v-if="error_code==='auth/invalid-email'">メールアドレスが不正です</p>
<button v-on:click="registerUser">登録</button>
</div>
</template>

<script>
import firebase from '~/plugins/firebase'
import { mapActions } from 'vuex'
export default {
data() {
return {
email: '',
password: '',
error_code:''
}
},
methods : {
...mapActions(['setUser']),
registerUser() {
firebase.auth().createUserWithEmailAndPassword(this.email, this.password)
.then(user => {
this.setUser({
email:this.email,
password:this.password
})
this.$router.push("/")
})
.catch(error =>{
this.error_code = error.code
});
}
}
}
</script>


これでアカウント作成成功時にはストアにアカウント情報を登録してindexページに遷移、入力内容が不正な場合はエラーをヒュウ視することができる
posted by ねこまんま at 11:54 | テクニック | 更新情報をチェックする