Firebase + Nuxt.jsを使ったGoogleアカウント認証を実装する

Firebaseを使ったGoogleアカウントのユーザー認証についてまとめました。認証はFirebase Authentication、画像のストレージはFirebase Storage、ユーザ情報はFirebase Firestoreを使っています。

事前準備
Google認証全体像
ユーザー認証の処理を順番に実行
① 認証状態の永続性をセット
② Google認証
③ ユーザー情報を取得し、オブジェクト化
④ アイコン画像をFirestorageに保存し、そのパスを取得
⑤ 公開可能なユーザー情報をFirestoreに登録
⑥ 非公開なユーザー情報をFirestoreに登録
⑦ ローカルストレージに保持するユーザー情報をセット
エラーハンドリング

事前準備

認証をする前にfirebase.jsに以下の設定を書いて、Firebaseプロジェクトと連携しておきます。

・firebase.js

import firebase from 'firebase';

// Firebaseプロジェクトの設定

if (!firebase.apps.length) {

firebase.initializeApp({

apiKey: '{ウェブAPIキー}',

authDomain: '{プロジェクトID}.firebaseapp.com',

databaseURL: 'https://{プロジェクトID}.firebaseio.com',

projectId: '{プロジェクトID}',

storageBucket: '{プロジェクトID}.appspot.com',

messagingSenderId: '1234567890' // cloudmessagingを使う場合は設定

})

}

export const firestore = firebase.firestore();

export const storage = firebase.storage();

Google認証全体像

Firebase Authenticationを使ったGoogle認証の全体像は以下のようになります。こちらのコードは以下を参考にしています。

参考：https://github.com/FujiyamaYuta/nuxt-firebase-project

それぞれの処理をより深く理解するために、1つ1つの処理を追って自分の言葉で解説していきます。

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

<b-modal :active.sync="isLoginModalActive" :width="420" scroll="keep">

</div>

<button

class="button sosial-button is-medium is-info is-fullwidth"

style="background-color:white;color:red;border:2px solid; border-color:red;"

@click="google"

<span>Google</span>

</span>

</button>

</div>

</b-modal>

</template>

import 'bulma/css/bulma.min.css'

import '@fortawesome/fontawesome-free/css/all.min.css'

import 'bulma-social/bin/bulma-social.min.css'

import firebase from 'firebase'

import { firestore, storage } from '~/plugins/firebase.js'

export default {

data() {

return {

isLoginModalActive: false

}

methods: {

this.isLoginModalActive = true

// Google認証を行う関数

google() {

// ② Google認証

const auth = () => {

return new Promise((resolve, reject) => {

const authUI = new firebase.auth.GoogleAuthProvider()

firebase

.auth()

.signInWithPopup(authUI)

.then((result) => {

resolve(result)

})

.catch((error) => {

const errorCode = error.code

const errorMessage = error.message

const email = error.email

const credential = error.credential

reject(error)

})

}

// ③ 認証後のユーザー情報を取得してオブジェクト化

const getAccountData = (result) => {

return new Promise((resolve, reject) => {

let userObject = {}

let user = result.user

userObject.token = result.credential.accessToken

userObject.refreshToken = user.refreshToken

userObject.uid = user.uid

userObject.displayName = user.displayName

userObject.photoURL = user.photoURL

userObject.uid = user.uid

userObject.email = user.email

userObject.isNewUser = result.additionalUserInfo.isNewUser

userObject.providerId = result.additionalUserInfo.providerId

resolve(userObject)

})

}

// 同期的に順番に処理を実行する

Promise.resolve()

.then(this.setPersistence)

.then(auth)

.then(getAccountData)

.then((userObject) => this.createPhotoURL(userObject))

.then((userObject) => this.setPublicUserData(userObject))

.then((userObject) => this.setPrivateUserData(userObject))

.then((userObject) => this.setLocalUserData(userObject))

.catch((error) => this.onRejectted(error))

onRejectted(error) {

this.$buefy.toast.open({

duration: 5000,

message: `ログインに失敗しました。`,

position: 'is-bottom',

type: 'is-danger'

})

this.isLoginModalActive = false

createPublicObj(obj) {

let publicObj = {}

publicObj.uid = obj.uid

publicObj.providerId = obj.providerId

publicObj.isNewUser = obj.isNewUser

publicObj.photoURL = obj.photoURL

publicObj.displayName = obj.displayName

return publicObj

createPrivateObj(obj) {

let privateObj = {}

privateObj.uid = obj.uid

privateObj.providerId = obj.providerId

privateObj.isNewUser = obj.isNewUser

privateObj.email = obj.email

privateObj.token = obj.token

privateObj.refreshToken = obj.refreshToken

return privateObj

// ① 認証状態を明示的にセットする

setPersistence() {

return new Promise((resolve, reject) => {

firebase

.auth()

.setPersistence(firebase.auth.Auth.Persistence.LOCAL)

.then((result) => {

resolve()

})

// ⑤ 公開可能なユーザー情報をFirestoreに登録

setPublicUserData(userObject) {

return new Promise((resolve, reject) => {

let publicUser = firestore.collection('users').doc(userObject.uid)

// ** usersに登録するObjのみを登録する

publicUser

.set(this.createPublicObj(userObject), { merge: true })

.then((result) => {

resolve(userObject)

})

// ⑥ 非公開のユーザー情報をFirestoreに登録

setPrivateUserData(userObject) {

return new Promise((resolve, reject) => {

let privateUsers = firestore

.collection('privateUsers')

.doc(userObject.uid)

// privateUsersに登録するObjのみを登録する

privateUsers

.set(this.createPrivateObj(userObject), { merge: true })

.then((result) => {

resolve(userObject)

})

// ⑦ ローカルストレージに保持するユーザー情報を設定

setLocalUserData(userObject) {

return new Promise((resolve, reject) => {

let user = firestore.collection('users').doc(userObject.uid)

user

.get()

.then((doc) => {

if (doc.exists) {

localStorage.setItem('photoURL', doc.data().photoURL)

localStorage.setItem('uid', userObject.uid)

localStorage.setItem('token', userObject.token)

localStorage.setItem('displayName', doc.data().displayName)

this.$buefy.toast.open({

duration: 5000,

message: `ログインに成功しました`,

position: 'is-bottom',

type: 'is-success'

})

this.isLoginModalActive = false

location.reload()

resolve(userObject)

}

})

.catch((error) => {

console.log('ログインに失敗しました。Error getting document:', error)

})

// ④ 取得したアイコンのURLをFirestorageに保存して、そのURLをFirestoreに登録する準備

createPhotoURL(userObject) {

return new Promise((resolve, reject) => {

let url = userObject.photoURL

let xhr = new XMLHttpRequest()

xhr.responseType = 'blob'

xhr.onload = function(event) {

let blob = xhr.response

let storageRef = storage.ref()

let mountainsRef = storageRef.child(

`user/${userObject.uid}/image.jpg`

)

let uploadTask = mountainsRef.put(blob)

uploadTask.then((snapshot) => {

uploadTask.snapshot.ref.getDownloadURL().then((downloadURL) => {

console.log(downloadURL)

// firestorageに登録したURLを登録するオブジェクトに代入

userObject.photoURL = downloadURL

resolve(userObject)

})

}

// メッセージを受け取った後に返信する

xhr.open('GET', url)

xhr.send()

})

}

</script>

<style>

.sosial-button {

margin-top: 1rem;

}

</style>

ユーザー認証の処理を順番に実行

メソッドチェーンで順番に処理を実行していきます。

then内のいずれかでエラー(reject)が発生した場合にonRejecttedメソッドが呼び出されます。

Promise.resolve() メソッドは、引数の値でPromiseオブジェクトを返します。その値がプロミスであった場合は、そのプロミスが返されます。その値がthenable (すなわちthenメソッドを持っている場合) であれば、返されるプロミスは thenable を追跡し、その最終的な状態になります。

今回の場合は返り値がなくその後の処理もないため、①から⑦まで順番に実行して終了します。

// 順番に処理を実行する

Promise.resolve()

.then(this.setPersistence) // ①

.then(auth) // ②

.then(getAccountData) // ③

.then((userObject) => this.createPhotoURL(userObject)) // ④

.then((userObject) => this.setPublicUserData(userObject)) // ⑤

.then((userObject) => this.setPrivateUserData(userObject)) // ⑥

.then((userObject) => this.setLocalUserData(userObject)) // ⑦

.catch((error) => this.onRejectted(error))

① 認証状態の永続性をセット

setPersistenceメソッドで認証状態の永続性をセットします。

認証状態の永続性のタイプは「local」、「session」、「none」の３つがあります。詳しい説明などはこちらの公式サイトを参照ください。

認証状態の永続性 | Firebase

firebase.google.com

認証状態の永続性は、firebase.auth().setPersistence メソッドを呼び出すことによって指定または変更できます。

// ① 認証状態の永続性をセットする

setPersistence() {

return new Promise((resolve, reject) => {

firebase

.auth()

.setPersistence(firebase.auth.Auth.Persistence.LOCAL)

.then((result) => {

resolve()

})

② Google認証

Googleの認証を行います。

firebase.auth.GoogleAuthProvider()メソッドでGoogle認証のプロバイドを呼び出します。それを引数に firebase.auth().signInWithPopup()メソッドで認証画面のポップアップを表示します。

Google認証完了後、認証の結果のプロミスを返します。エラーコードやエラーメッセージなどはcatch内の方法で取得できるため、Google認証に失敗した時のエラーハンドリングで使うことができます。

// ② Google認証

const auth = () => {

return new Promise((resolve, reject) => {

const authUI = new firebase.auth.GoogleAuthProvider()

firebase

.auth()

.signInWithPopup(authUI)

.then((result) => {

resolve(result)

})

.catch((error) => {

const errorCode = error.code

const errorMessage = error.message

const email = error.email

const credential = error.credential

reject(error)

})

}

③ ユーザー情報を取得し、オブジェクト化

Google認証の結果を元にユーザー情報を取得して、オブジェクト化します。オブジェクト化した結果のプロミスを返します。

// ③ 認証後のユーザー情報を取得してオブジェクト化

const getAccountData = (result) => {

return new Promise((resolve, reject) => {

let userObject = {}

let user = result.user

userObject.token = result.credential.accessToken

userObject.refreshToken = user.refreshToken

userObject.uid = user.uid

userObject.displayName = user.displayName

userObject.photoURL = user.photoURL

userObject.uid = user.uid

userObject.email = user.email

userObject.isNewUser = result.additionalUserInfo.isNewUser

userObject.providerId = result.additionalUserInfo.providerId

resolve(userObject)

})

}

④ アイコン画像をFirestorageに保存し、そのパスを取得

GoogleのアイコンのURLからXMLHttpRequestでアイコン画像を取得します。

xhr.responseTypeでレスポンスの方をblobに定義しています。let blob = xhr.responseで取得した画像のblobオブジェクトをblobに渡しています。

その後、Storageのuser/${userObject.uid}/image.jpgパスを用意し、そこにアイコン画像データを保存します。

getDownloadURL()メソッドで、保存したアイコン画像のURLパスを取得し、userObject.photoURLに渡しています。

つまりGoogle認証時に取得したGoogle内に保持しているアイコン画像のパスからXMLHttpRequestでアイコン画像をblobタイプで取得し、それをFirestorageに保存し、保存したURLのパスを取得しFirestoreに保存するために再度userObject.photoURLにパスを渡しているといった処理になります。

xhr.send()の処理は、「Unchecked runtime.lastError: The message port closed before a response was received.」のエラーを回避するため、特に何もなくても返信しています。

参考：https://qiita.com/noenture/items/3978f638f2ffb8ff0995

// ④ 取得したアイコンのURLをFirestorageに保存して、そのURLをFirestoreに登録する準備

createPhotoURL(userObject) {

return new Promise((resolve, reject) => {

let url = userObject.photoURL

let xhr = new XMLHttpRequest()

xhr.responseType = 'blob'

xhr.onload = function(event) {

let blob = xhr.response

let storageRef = storage.ref()

let mountainsRef = storageRef.child(

`user/${userObject.uid}/image.jpg`

)

let uploadTask = mountainsRef.put(blob)

uploadTask.then((snapshot) => {

uploadTask.snapshot.ref.getDownloadURL().then((downloadURL) => {

// Firestorageに登録したURLを登録するオブジェクトに代入

userObject.photoURL = downloadURL

resolve(userObject)

})

}

// メッセージを受け取った後に返信する

xhr.open('GET', url)

xhr.send()

})

}

⑤ 公開可能なユーザー情報をFirestoreに登録

ユーザー情報の中でも公開可能な情報をFirestoreに登録します。createPublicObjメソッドを呼び出しpublicObjに公開可能な情報をセットし、Firestoreのusersコレクション内にuidをkeyにして登録しています。

mergeオプションをつけるとフィールドの追加をしています。

// ⑤ 公開可能なユーザー情報をFirestoreに登録

setPublicUserData(userObject) {

return new Promise((resolve, reject) => {

let publicUser = firestore.collection('users').doc(userObject.uid)

// usersに登録するObjのみを登録する

publicUser

.set(this.createPublicObj(userObject), { merge: true })

.then((result) => {

resolve(userObject)

})

createPublicObj(obj) {

let publicObj = {}

publicObj.uid = obj.uid

publicObj.providerId = obj.providerId

publicObj.isNewUser = obj.isNewUser

publicObj.photoURL = obj.photoURL

publicObj.displayName = obj.displayName

return publicObj

⑥ 非公開なユーザー情報をFirestoreに登録

公開可能のユーザ情報登録と同じように、非公開のユーザ情報も登録していきます。非公開情報ではメールやトークンが登録されています。

// ⑥ 非公開のユーザー情報をFirestoreに登録

setPrivateUserData(userObject) {

return new Promise((resolve, reject) => {

let privateUsers = firestore

.collection('privateUsers')

.doc(userObject.uid)

// privateUsersに登録するObjのみを登録する

privateUsers

.set(this.createPrivateObj(userObject), { merge: true })

.then((result) => {

resolve(userObject)

})

createPrivateObj(obj) {

let privateObj = {}

privateObj.uid = obj.uid

privateObj.providerId = obj.providerId

privateObj.isNewUser = obj.isNewUser

privateObj.email = obj.email

privateObj.token = obj.token

privateObj.refreshToken = obj.refreshToken

return privateObj

⑦ ローカルストレージに保持するユーザー情報をセット

Firestoreに保存した公開可能なユーザ情報から「アイコン画像パス」、「uid」、「トークン」、「表示名」を取得し、Local Storageにセットして、認証完了です。

ユーザーがログイン状態になり、更新情報を画面に反映させるためにリロードしています。

// ⑦ ローカルストレージに保持するユーザー情報を設定

setLocalUserData(userObject) {

return new Promise((resolve, reject) => {

let user = firestore.collection('users').doc(userObject.uid)

user

.get()

.then((doc) => {

if (doc.exists) {

localStorage.setItem('photoURL', doc.data().photoURL)

localStorage.setItem('uid', userObject.uid)

localStorage.setItem('token', userObject.token)

localStorage.setItem('displayName', doc.data().displayName)

this.$buefy.toast.open({

duration: 5000,

message: `ログインに成功しました`,

position: 'is-bottom',

type: 'is-success'

})

this.isLoginModalActive = false

location.reload()

resolve(userObject)

}

})

.catch((error) => {

console.log(error)

})

エラーハンドリング

ユーザー認証のメソッドチェーン内でエラーが発生した場合は、catch内のonRejecttedメソッドが呼び出され、ログインに失敗するようハンドリングしています。

onRejectted(error) {

this.$buefy.toast.open({

duration: 5000,

message: `ログインに失敗しました。`,

position: 'is-bottom',

type: 'is-danger'

})

this.isLoginModalActive = false

参考：
https://github.com/FujiyamaYuta/nuxt-firebase-project
https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest
https://qiita.com/ueokande/items/807a6c9a64c3874a0f83
https://qiita.com/toshihirock/items/e49b66f8685a8510bd76
https://qiita.com/noenture/items/3978f638f2ffb8ff0995