Firebase Authentication によるログイン機能を試す - Web版

2023年10月20日 18:30

「Firebase Authentication」によるWebのログイン機能を試したのでまとめました。

1. Firebase Authentication

「Firebase Authentication」安全なログイン機能を提供するFirebaseのサービスです。メールアドレスとパスワードの組み合わせ、電話認証、Google、Twitter、Facebook、GitHubログインなどに対応しています。

2. アプリプロジェクトの準備

アプリプロジェクトの準備手順は、次のとおりです。

(1) 「Node.js」のセットアップ。

(2) アプリプロジェクトのセットアップ。
今回は、「React」を使います。

$ npx create-react-app my-react

プロジェクト構成は、次のようになります。

(3) アプリの動作確認。

$ npm start

ブラウザが起動し、アプリが表示されます。

3. Firebaseプロジェクトの準備

Firebaseプロジェクトの準備手順は、次のとおりです。

(1) Firebaseのコンソールでプロジェクトを作成。

(2) 「アプリを追加」ボタンを押し、「Web」を選択。

(3) 画面指示に従い、アプリプロジェクトにnpmをインストール。

$ npm install firebase

(4) 画面に表示されるFirebaseの初期化コードをもとに、アプリプロジェクトに「firebase.js」を追加。

・firebase.js

// 必要なSDKから必要な機能をインポート
import { initializeApp } from "firebase/app";
//import { getAnalytics } from "firebase/analytics";
// 使用するFirebaseのSDKを追加
// https://firebase.google.com/docs/web/setup#available-libraries

// WebアプリのFirebase構成
// Firebase JS SDK v7.20.0 以降の場合、measurementId はオプションです
const firebaseConfig = {
  apiKey: "XXXX",
  authDomain: "XXXX",
  projectId: "XXXX",
  storageBucket: "XXXX",
  messagingSenderId: "XXXX",
  appId: "XXXX",
  measurementId: "XXXX"
};

// Firebaseの初期化
const firebaseApp = initializeApp(firebaseConfig);
// const analytics = getAnalytics(app);

export default firebaseApp;

オブジェクト名を「app」から「firebaseApp」に変更し、「export default firebaseApp;」でエクスポートしています。

(4) アプリプロジェクトのApp.jsを以下のように編集。

・App.js

import logo from './logo.svg';
import './App.css';
import firebaseApp from './firebase';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Firebase name {firebaseApp.name}
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

「import firebaseApp from './firebase';」を追加し、テキスト表示を「Firebase name {firebaseApp.name}」に変更しています。

(5) アプリを実行して、「Firebase name [DEFAULT]」が表示されることを確認。

4. Firebaseコンソールでのログイン機能の準備

Firebaseコンソールでのログイン機能の準備の手順は、次のとおりです。

(1) 「Firebaseコンソール」で「Authentication」を選択し、「ログイン方法を設定」ボタンを押す。

(2) 追加するログイン方法として「Google」を選択。

(3) 有効化し、「プロジェクト公開名」と「プロジェクトサポートメール」を入力し、保存ボタンを押す。

5. Webアプリでのログイン機能の準備

Webアプリでのログイン機能の準備の手順は、次のとおりです。

(1) 「firebase.js」で認証オブジェクトとGoogle認証プロバイダを準備。

・firebase.js

// 必要なSDKから必要な機能をインポート
import { initializeApp } from "firebase/app";
import { getAuth, GoogleAuthProvider } from 'firebase/auth';

// WebアプリのFirebase構成
// Firebase JS SDK v7.20.0 以降の場合、measurementId はオプションです
const firebaseConfig = {
  apiKey: "XXXX",
  authDomain: "XXXX",
  projectId: "XXXX",
  storageBucket: "XXXX",
  messagingSenderId: "XXXX",
  appId: "XXXX",
  measurementId: "XXXX"
};

// Firebaseの初期化
const firebaseApp = initializeApp(firebaseConfig);

// 認証オブジェクトの準備
const auth = getAuth(firebaseApp);

// Google認証プロバイダの準備
const googleProvider = new GoogleAuthProvider();

export { auth, googleProvider };

(2) 「AuthComponent.js」を追加。

・AuthComponent.js

import React, { useState, useEffect } from 'react';
import { signInWithPopup, signOut } from "firebase/auth";
import { auth, googleProvider } from './firebase';


const AuthComponent = () => {
  const [user, setUser] = useState(null); // ログイン状態

  // ログイン状態の監視
  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged((authUser) => {
      if (authUser) {
        // ログインしている場合
        setUser(authUser);
      } else {
        // ログアウトしている場合
        setUser(null);
      }
    });

    // アンマウント時に監視解除
    return () => {
      unsubscribe();
    };
  }, []);

  // ログイン
  const handleSignIn = async () => {
    try {
      // Googleログインポップアップを表示
      const result = await signInWithPopup(auth, googleProvider);
      // ログイン成功時の処理
      console.log('ログイン成功', result.user);
    } catch (error) {
      // エラーハンドリング
      console.error('ログインエラー', error);
    }
  };

  // ログアウト
  const handleSignOut = async () => {
    try {
      await signOut(auth);
    } catch (error) {
      console.error('ログアウトエラー:', error);
    }
  };

  return (
    <div>
      {user ? (
        <div>
          <p>ログインユーザー: {user.displayName}</p>
          <button onClick={handleSignOut}>ログアウト</button>
        </div>
      ) : (
        <div>
          <p>ログインしていません</p>
          <button onClick={handleSignIn}>ログイン</button>
        </div>
      )}
    </div>
  );
};

export default AuthComponent;

(3) 「App.js」を以下のように編集。