【React】FirebaseAuthenticationを使ってgoogleの認証機能を実装する

React
目次

FirebaseAuthenticationとは？

FirebaseAuthenticationは、Webやモバイルアプリなどのプラットフォームで、ユーザーの認証や認可を簡単に実装できるようにするサービスです。Firebase Authenticationを使用することで、アプリケーションにログイン、サインアップ、パスワードリセット、アカウントの管理などの認証機能を追加できます。

Firebaseは、Googleが提供するモバイルおよびWebアプリケーション開発プラットフォームであり、認証機能を含む様々な機能を提供しています。Firebase Authenticationは、パスワード認証、ソーシャルログイン、マルチファクタ認証、メール認証など、さまざまな認証機能を提供する認証プロバイダーです。

Firebase Authenticationを使用した認証機能を実装する手順

１、Firebaseプロジェクトの作成
２、Authenticationの有効化とGoogle ログインの有効化
３、Firebase SDKの設定
4、認証機能の実装

１、Firebaseプロジェクトの作成

Firebaseコンソールにログインし、新しいプロジェクトを作成します。

Firebase公式サイト：https://firebase.google.com

２、Authenticationの有効化とGoogle ログインの有効化

Firebaseコンソールの左側のメニューから、「Authentication」を選択して、認証機能を有効化します。有効化後、認証方法を設定することができます。

そしてFirebase Consoleで、Google認証を有効にするために必要な設定を行います。具体的には、Google API Consoleでプロジェクトを作成し、OAuthクライアントIDを生成し、Firebaseプロジェクトに設定します。

３、Firebase SDKの設定

Firebase Authenticationを使用するには、Firebase SDKを初期化する必要があります。

Firebase Authenticationとは？

Firebase Authentication SDKは、Firebaseの認証機能を使用するためのクライアントサイドのライブラリーです。これを使用することで、アプリケーションのユーザーを認証するための機能を簡単に実装できます。

Firebase Authentication SDKを使用することで、以下のような機能が利用できます。

  • メールアドレスとパスワードによる認証
  • Google、Facebook、Twitter、GitHubなどの外部認証プロバイダーを使用した認証
  • 匿名認証
  • 電話番号による認証
  • カスタムトークンによる認証

また、Firebase Authentication SDKは、Firebase Realtime DatabaseやCloud Firestoreなどの他のFirebaseサービスと統合することができます。たとえば、認証されたユーザーのみがデータベースにアクセスできるようにすることができます。

アプリを作成すると、Firebase SDKの構成情報が表示されます。この情報は、アプリケーションでFirebaseを使用するために必要な情報です。必要な情報は、次のような形式で表示されます。

const firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  databaseURL: "https://PROJECT_ID.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  measurementId: "G-MEASUREMENT_ID",
};

アプリのルートディレクトリに、Firebase SDKをインストールします。Firebase SDKは、npmパッケージとして提供されています。

$ npm install firebase

アプリのエントリーポイントで、Firebase SDKを初期化します。

import firebase from "firebase/app";
import "firebase/auth";

const firebaseConfig = {
  // Firebase SDK の構成情報
};

// Firebase SDK を初期化する
firebase.initializeApp(firebaseConfig);

// Firebase Authentication のインスタンスを取得する
const auth = firebase.auth();

export default auth;

4、認証機能の実装

Firebase SDKをインストールし、認証機能を実装します。例えば、Reactを使用する場合、firebase/authをインポートして、次のようなコードを記述します。

import { useState, useEffect } from 'react';
import firebase from 'firebase/app';
import { auth } from '../firebase';

const auth = firebase.auth();

function App() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged((user) => { //認証状態の変化を監視
      setUser(user);
    });

    return unsubscribe;
  }, []);

  const handleLogin = async () => {
    const provider = new firebase.auth.GoogleAuthProvider(); //Googleアカウントでログインするためのプロバイダーを作成
    await auth.signInWithPopup(provider); //ログイン処理
  };

  const handleLogout = async () => {
    await auth.signOut();
  };

  return (
    <div>
      {user ? (
        <>
          <p>ログインしています: {user.email}</p>
          <button onClick={handleLogout}>ログアウト</button>
        </>
      ) : (
        <button onClick={handleLogin}>Googleでログイン</button>
      )}
    </div>
  );
}

このコードでは、auth.onAuthStateChangedでユーザーの認証状態の変化を監視して、ログイン状態に応じた表示を行います。また、firebase.auth.GoogleAuthProviderを使用して、Googleアカウントでログインするためのプロバイダーを作成し、auth.signInWithPopupでログイン処理を行います。

タイトルとURLをコピーしました