はじめに
Firebase での Google ログインを実装してみたところ驚くほど簡単に実装できたので、今回備忘録も兼ねてご紹介できればと思います。
目次
- firebase 上でプロジェクトを作成
- Authenticationを有効化
- Firebase SDK のインストール
- Firebase 設定ファイルの作成(認証疎通)
- Google ログイン機能の実装
- 実際の画面
- 余談
- 終わりに
注意
Nuxt での Firebase key の管理方法(環境変数化)や本番環境へのデプロイに関する詳細には触れておりません。
firebase 上でプロジェクトを作成
- FIrebase に任意のアカウントでログイン(or 新規登録)を行います。
- 任意のプロジェクト名を入力して、プロジェクトの作成を行います。
Authenticationを有効化
- 「構築」から Authentication を選択します
- 「始める」をクリックしてください
なぜ Authentication を有効化するかというと、 Google ログイン機能を実装する際に、Google プロバイダでのログインを有効にしなければならないためです。
余談ですが、Google 以外にもメール / パスワード, Github アカウント, Twitter アカウントを用いたログイン機能も可能なので、興味がある方はぜひ試してみてください。
その後、ウェブアプリへの Firebase の追加を行います。
※ 「Firebase SDK の追加」は、後ほど行うので、この段階ではスキップして問題ありません。
無事にウェブアプリへの追加が完了したら、「プロジェクトの設定」画面に遷移をしてください。
下部の「マイアプリ」をみていただくと、 SDK の利用に必要な config 情報が記載されいていますので、こちらをメモしてください。
恐らく、下記のような config 情報が記載されていると思います。
const firebaseConfig = {
apiKey: {Firebase API Key},
authDomain: {Firebase Auth Domain},
projectId: {Firebase Project ID},
storageBucket: {Firebase Storage Bucket},
messagingSenderId: {Firebase Messaging Sender ID},
appId: {Firebase App ID}
}
Firebase SDK のインストール
次に、開発環境へ Firebase SDK のインストールを行います。
ターミナルで下記のコマンドを実行してください
npm install firebase
// yarn の場合は
yarn add firebase
Firebase 設定ファイルの作成(認証疎通)
パッケージのインストールは完了したら、設定ファイルの作成を行います。
私の場合は、Nuxt Plugins として設定し、認証情報は Nuxt Runtime Config を用いて環境変数から取得しています。
ウェブアプリへの追加を行なった際に取得にした認証情報をこちらに貼り付け、Firebase App / Firebase Auth モジュールのユーティリティ関数を呼び出して、 Firebase アプリの初期化と認証の取得を行います。
import { initializeApp } from 'firebase/app'
import { getAuth } from 'firebase/auth'
export default defineNuxtPlugin((nuxtApp) => {
const config = useRuntimeConfig()
// Firebase 認証情報
const firebaseConfig = {
apiKey: config.public.firebaseApiKey,
authDomain: config.public.firebaseAuthDomain,
projectId: config.public.firebaseProjectId,
storageBucket: config.public.firebaseStorageBucket,
messagingSenderId: config.public.firebaseMessagingSenderId,
appId: config.public.firebaseAppId
}
// Firebase アプリの初期化
const firebaseApp = initializeApp(firebaseConfig)
// Firebase 認証の取得
const auth = getAuth(firebaseApp)
nuxtApp.provide('auth', auth)
})
Google ログイン機能の実装
設定ファイルの作成が終わったら、実際に機能を実装します。
signInWithPopup を利用してログインポップアップを表示し、ユーザー認証を行います。
<template>
<div class="login">
<h2>ログイン画面</h2>
<button @click="loginWithGoogle">Googleでログイン</button>
</div>
</template>
<script setup lang="ts">
import { GoogleAuthProvider, signInWithPopup } from 'firebase/auth'
const { $auth } = useNuxtApp()
/**
* Google アカウントでのログイン処理
*/
const loginWithGoogle = async (): Promise<void> => {
// Google の認証プロバイダーを初期化
const provider = new GoogleAuthProvider()
try {
// Google のログインポップアップを表示し、ユーザー認証
await signInWithPopup($auth, provider)
navigateTo('/')
} catch (error) {
console.error('Google ログインエラー:', error)
}
}
</script>
実際の画面
これで Google ログインの実装は完了です。
実際にログイン処理を行うと、以下のようなポップアップが表示されます。
無事にログイン処理が完了すると、Firebase 上のプロバイダーに該当のアカウントが追加されているので確認してみてください。
ちなみに、 signInWithPopup の返り値から、ログインした Google アカウント名も簡単に取得できるので試してみてください。
詳しい内容は、下記のドキュメントを参考にしてください。
余談
管理者権限を必要とする機能の追加
管理者権限を必要とする機能を追加したい場合は、 Firebase Admin SDK がおすすめです。
例えば、ユーザー情報の編集や削除、権限の追加などができるようになります。
npm install firebase-admin
// yarn の場合は
yarn add firebase-admin
使用できるユーティリティ関数などの詳しい詳細は、下記のドキュメントを参考にしてください。
終わりに
Firebase の Authentication を用いれば、今回のようなプロバイダごとのログイン処理の実装はもちろん、ドメインごとにログイン制限を設定できたりと、カスタムされたログイン処理も比較的簡単に実装できるので、今後も積極的に活用したいです。