Nuxt＋Firebase Authenticationを使用したソーシャルログイン実装方法を紹介します。
完成イメージ
今回はGoogle アカウントを使った認証機能を行います。
１．ソーシャルログインとは
ソーシャルログインとは、ユーザーが使い慣れた既存WebサービスやSNSのアカウントを利用して、別のWebサービスにログインできる仕組みのことです。
面倒なアカウント作成から解放されユーザとしても嬉しい、そしてログイン処理を自分たちで書かなくていい！という開発者としても嬉しい仕組みです。
そんなソーシャルログインを簡単に実装できるのがFirebaseで提供されている Authenticationです。
Firebase Authentication は、バックエンド サービス、使いやすい SDK、アプリでのユーザー認証に使用できる UI ライブラリが用意されています。
パスワード、電話番号、一般的なフェデレーション ID プロバイダ（Google、Facebook、Twitter）などを使用した認証を行うことができます。
２．実装方法
２－１Firebaseでの作業
（１）Firebaseプロジェクトの作成する
①「プロジェクトを作成」を押下する
②プロジェクト名を入力する
③「続行」を押下する
④「プロジェクトを作成」を押下する
プロジェクトが作成されます
（２）Authentication の設定
①「Authentication」を選択する
②「Sing-in-method」タブにて、ログイン許可するプロバイダを選択する
③「有効にする」に変更し、「保存」を押下する
Googoleが有効になります
（３）ウェブ設定の確認
①「プロジェクトを設定」を選択する
②「プロジェクト名」「ウェブAPIキー」をメモ帳等に控える
２－２Nuxtプロジェクトでの作業で使用します。
２－２Nuxtプロジェクトでの作業
（１）Nuxtプロジェクトの作成
以下コマンドにてプロジェクトを作成する
npm init nuxt-app <project-name>
npx, yarnでも作成可能です。詳細は以下参照
インストール - NuxtJS
（２）Firebase SDK の追加
①「cd」コマンドで上記プロジェクトに遷移する
②以下コマンドにてFirebase SDK をインストールする
npm install --save firebase
CDNでも追加可能です。詳細は以下参照
Add Firebase to your JavaScript project
（３）ログイン処理の実装
①firebaseをインポートする
import firebase from 'firebase'
②ログイン処理を入れたい箇所に以下コードを追加する
const config = { // ２－１Firebaseでの作業-（３）ウェブ設定の確認の値 apiKey: 'ウェブAPIキー', authDomain: '(プロジェクト名).firebaseapp.com', } firebase.initializeApp(config) const provider = new firebase.auth.GoogleAuthProvider() firebase .auth() .signInWithPopup(provider) // ポップアップでログイン画面を表示 ※１ .then(function (result) { // 成功時の処理 ※２ }) .catch(function (error) { // エラー時の処理 })
※１
signInWithPopup(provider)をsignInWithRedirect(provider)に変更することで
ログイン画面をリダイレクトに変更できます。
※２
resultで取得できる値については以下参照
UserInfo | Identity Platform のドキュメント | Google Cloud
（４）ログアウト処理の実装
ログアウト処理を入れたい箇所に以下コードを追加する
firebase
.auth()
.signOut()
.then(function () {
// 成功時の処理
})
.catch(function (error) {
// エラー時の処理
})
（５）ログイン状態確認処理の実装
ログイン状態確認処理を入れたい箇所に以下コードを追加する
firebase.auth().onAuthStateChanged(function (user) { if (user) { // ログイン中 }
（６）ログイン・ログアウト・状態確認の実装例
<template>
<div>
<section class="container">
<h1>{{ title }}</h1>
<button v-if="!isLogin" @click="onClickLogin">Login</button>
<button v-if="isLogin" @click="onClickLogout">Logout</button>
<table v-if="isLogin">
<tr>
<th>Name</th>
<td>{{ name }}</td>
</tr>
<tr>
<th>Email</th>
<td>{{ email }}</td>
</tr>
</table>
</section>
</div>
</template>
<script>
import firebase from 'firebase'
export default {
data() {
return {
title: 'Firebase Auth Sample',
name: '',
email: '',
isLogin: false,
config: {
apiKey: 'ウェブAPIキー',
authDomain: '(プロジェクト名).firebaseapp.com',
},
}
},
created() {
firebase.initializeApp(this.config)
const self = this
firebase.auth().onAuthStateChanged(function (user) {
if (user) {
self.isLogin = true
self.email = user.email
self.name = user.displayName
}
})
},
methods: {
onClickLogin() {
const provider = new firebase.auth.GoogleAuthProvider()
const self = this
firebase
.auth()
.signInWithPopup(provider)
.then(function (result) {
self.isLogin = true
self.email = result.user.email
self.name = result.user.displayName
})
},
onClickLogout() {
if (!confirm('ログアウトしますか？')) {
return
}
const self = this
firebase
.auth()
.signOut()
.then(function () {
self.isLogin = false
})
.catch(function (error) {
console.log(error)
})
},
},
}
</script>
今回は1ファイルでまとめていますが、状態管理はVuexで管理した方が初期表示がきれいになると思います。
参考サイト
Authenticate Using Google Sign-In with JavaScript | Firebase
