#はじめに
フロントエンドエンジニアにとってユーザー認証のバックエンドを用意するのは手間になることが多いですよね。
そんなときに頼りになるのがFirebase。
Firebaseを導入すると簡単にユーザー認証機能が導入できるのでその手順をまとめました。
##事前準備
以下を使用できる状態にしておきます。
- vue.js
- create-nuxt-app
Firebaseでプロジェクトの設定
下記Firebase Consoleにログインしてプロジェクトを作成します。
Firebase Console
管理画面よりAuthを選択
ログインプロバイダのメール/パスワード、Google、Facebookを有効化します。
Facebookに関してはアプリケーションの設定が必要になります。
事前にFacebook for Developerよりアプリケーションを作成しておきアプリIDとアプリシークレットを取得しておき登録します。
さらにリダイレクトURLをFacebookアプリケーションに設定します。
これで準備OK！
##Nuxtアプリケーションを作成
今回はNuxtの雛形をそのまま使用します。
色々聞かれますが全てenterでOK、今回はパッケージマネージャーにyarnを選択します。
$ yarn create nuxt-app nuxt-login-app
Firebaseモジュールをインストールしておきます。
$ cd nuxt-login-app
$ yarn add firebase
こちらのコマンドでアプリを立ち上げ
$ yarn dev
アプリケーションが立ち上がりました。こちらで作成していきます。
##認証ページの作成
Google,Facebook,パスワードの順番にユーザー認証を実装していきます。
認証の準備
Firebase Consoleのこちらから認証情報を表示してAPI Key等の設定情報を表示します。
configの内容をコピー
先ずはNuxtアプリケーションplugins内にfirebase.jsを作成してこちらの設定情報を利用します。
import firebase from 'firebase'
const config = {
apiKey: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
authDomain: 'nuxt-login-app.firebaseapp.com',
databaseURL: 'https://nuxt-login-app.firebaseio.com',
projectId: 'nuxt-login-app',
storageBucket: 'nuxt-login-app.appspot.com',
messagingSenderId: '611183763562'
}
if (!firebase.apps.length) {
firebase.initializeApp(config)
}
export default firebase
Google認証
まずはGoogle認証からpages/index.vueを書き換えます。
今回はリダイレクト方式を採用。
読み込み時にonAuthStateChangedでログイン状態をチェック。
ボタンクリックでgoogleLoginメソッドを実行。
それぞれFirebaseモジュールで用意されたオブジェクトを使用するので簡単に実装可能です。
<template>
<section class="container">
<div v-if="isWaiting">
<p>読み込み中</p>
</div>
<div v-else>
<div v-if="!isLogin">
<button @click="googleLogin">Googleでログイン</button>
</div>
<div v-else>
<p>{{ user.email }}でログイン中</p>
<button @click="logOut">ログアウト</button>
</div>
</div>
</section>
</template>
<script>
import firebase from '@/plugins/firebase'
export default {
asyncData () {
return {
isWaiting: true,
isLogin: false,
user: []
}
},
mounted: function () {
firebase.auth().onAuthStateChanged(user => {
this.isWaiting = false
if (user) {
this.isLogin = true
this.user = user
} else {
this.isLogin = false
this.user = []
}
})
},
methods: {
googleLogin () {
const provider = new firebase.auth.GoogleAuthProvider()
firebase.auth().signInWithRedirect(provider)
},
logOut () {
firebase.auth().signOut()
}
}
}
</script>
Facebook認証
Facebookも基本的にはGoogleと同じです。
Facebook認証 ドキュメント
<template>
<section class="container">
<div v-if="isWaiting">
<p>読み込み中</p>
</div>
<div v-else>
<div v-if="!isLogin">
<button @click="facebookLogin">Facebookでログイン</button>
</div>
<div v-else>
<p>{{ user.email }}でログイン中</p>
<button @click="logOut">ログアウト</button>
</div>
</div>
</section>
</template>
<script>
import firebase from '@/plugins/firebase'
export default {
asyncData () {
return {
isWaiting: true,
isLogin: false,
user: []
}
},
mounted: function () {
firebase.auth().onAuthStateChanged(user => {
this.isWaiting = false
if (user) {
this.isLogin = true
this.user = user
} else {
this.isLogin = false
this.user = []
};
})
},
methods: {
facebookLogin () {
const provider = new firebase.auth.FacebookAuthProvider()
firebase.auth().signInWithRedirect(provider)
},
logOut () {
firebase.auth().signOut()
}
}
}
</script>
###パスワード認証
パスワード認証はemailとpasswordを渡すだけです。
パスワードの文字数が6文字以上などの決まりがあるのでその辺りのバリデーションを適切に設定してください。
こちらは新規登録とログインで手順が違うのでregisterステータスで場合分けしています。
パスワード認証 ドキュメント
<template>
<section class="container">
<div v-if="isWaiting">
<p>読み込み中</p>
</div>
<div v-else>
<div v-if="!isLogin">
<div>
<p>
<input
v-model="email"
type="text"
placeholder="email"
>
</p>
<p>
<input
v-model="password"
type="password"
placeholder="password"
>
</p>
<p>
<input
id="checkbox"
v-model="register"
type="checkbox"
>
<label for="checkbox">新規登録</label>
</p>
<button @click="passwordLogin">{{ register ? '新規登録' : 'ログイン' }}</button>
<p>{{ errorMessage }}</p>
</div>
</div>
<div v-else>
<p>{{ user.email }}でログイン中</p>
<button @click="logOut">ログアウト</button>
</div>
</div>
</section>
</template>
<script>
import firebase from '@/plugins/firebase'
export default {
asyncData () {
return {
register: false,
isWaiting: true,
isLogin: false,
user: [],
email: '',
password: '',
errorMessage: ''
}
},
mounted: function () {
firebase.auth().onAuthStateChanged(user => {
this.isWaiting = false
this.errorMessage = ''
if (user) {
this.isLogin = true
this.user = user
} else {
this.isLogin = false
this.user = []
};
})
},
methods: {
passwordLogin () {
const email = this.email
const password = this.password
if (this.register) {
firebase.auth().createUserWithEmailAndPassword(email, password).catch(function (error) {
const errorMessage = error.message
this.errorMessage = errorMessage
}.bind(this))
} else {
firebase.auth().signInWithEmailAndPassword(email, password).catch(function (error) {
const errorMessage = error.message
this.errorMessage = errorMessage
}.bind(this))
}
},
logOut () {
firebase.auth().signOut()
}
}
}
</script>
Firebase Consoleで各認証方法で登録したユーザーの追加が確認できました。
GUIで追加、編集等の管理ができるのが便利ですね。
##最後に
Firebaseのログイン認証は以外にもデータベースやサーバー等フロントエンジニアにとって助かる機能がいくつもあるのでもっと活用していきたいですね。