Firebase V9 JavaScirpt APIでGoogle認証をする

Firebase v9 SDKを使用したGoogle認証の導入

Firebaseの最新バージョンであるv9 SDKを使用して、JavaScriptからGoogle認証を行う方法について解説します。ここでは、signInWithPopup 関数を用いてユーザーがGoogleアカウントでサインインできるようにする手順をご紹介します。

前提条件

• Firebaseプロジェクトが設定済みであること。
• FirebaseのWebアプリケーション用の設定が完了していること（APIキー、プロジェクトIDなどが必要です）。

1. Firebaseをプロジェクトに追加

まずは、FirebaseをあなたのWebプロジェクトに追加する必要があります。
npm を使用して Firebase をインストールします。

npm install firebase

2. Firebaseプロジェクトの初期化

Firebaseプロジェクトを初期化するためのコードを追加します。これにはFirebaseプロジェクトの設定情報が必要です。

import { initializeApp } from 'firebase/app';
import { getAuth, signInWithPopup, GoogleAuthProvider } from 'firebase/auth';

const firebaseConfig = {
  apiKey: "あなたのAPIキー",
  authDomain: "プロジェクトID.firebaseapp.com",
  projectId: "あなたのプロジェクトID",
  storageBucket: "プロジェクトID.appspot.com",
  messagingSenderId: "あなたのSender ID",
  appId: "あなたのApp ID"
};

// Firebaseアプリの初期化
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

3. Google認証の設定

Googleプロバイダオブジェクトを作成し、signInWithPopup 関数を用いて認証プロセスを実行します。

const provider = new GoogleAuthProvider();

const signInWithGoogle = async () => {
  try {
    const result = await signInWithPopup(auth, provider);
    const credential = GoogleAuthProvider.credentialFromResult(result);
    const token = credential.accessToken;
    const user = result.user;
    console.log('サインイン成功:', user);
  } catch (error) {
    console.error('サインインエラー:', error);
  }
};

// サインインボタンのイベントリスナー
document.getElementById('google-signin').addEventListener('click', signInWithGoogle);

4. HTMLにサインインボタンを追加

ユーザーがクリックできるサインインボタンをHTMLに追加します。

<button id="google-signin">Googleでサインイン</button>

これで、ユーザーはGoogleアカウントを使用してサインインすることができます。エラー処理も含めて、これによりサインインの成功または失敗を捉えることが可能です。

この手順とコードサンプルを使用して、Firebase v9 SDKとGoogle認証を活用してみてください。