📚

FirebaseのGoogleプロバイダの設定までをまとめてみた。

2022/09/01に公開

Firebase

Google

tech

Google認証が簡単にできるFirebase

今回は、ログイン機能を実装するうえで、一度はやってみたくなるGoogle認証を実装したいと思っていますが、まずは、Google認証ができるようになるためのプロバイダの設定までをまとめてみました。

Firebase でアカウント登録をする

まずは Firebase のサイトに飛んでいって、アカウントの登録をします。

登録が完了したら、

「使ってみる」のボタンから進んでいきます。

プロジェクトの作成

ページを進んでもらうとプロジェクト作成のボタンが出てきます。

ここから追加していき、

プロジェクトの名前を決めていきます。

任意でプロジェクト名をつけてください。

今回はサンプルとして作っていきますので、「firebase-app」にしました。

次に進んでいくと、

Googleアナリティクスの設定の画面に進んでいくのですが、Webサイトのアクセス状況を分析できるツールですので、Web上に公開する時に設定すればいいかなと思い「OFF」にしています。
ここは後からでも、設定に有効にすることはできるようになっています。

これで、プロジェクトの作成は完了です。

Webアプリとしてアプリを作成

プロジェクトの作成が終わるとプロジェクトの管理画面に進みますが、このままでは、まだ使えない状態です。

ここでは、 </> 」のマークを押してWebアプリとして登録します。

ここではアプリ名を入力します。

僕はそのままプロジェクト名を入れてます。

Firebaseのパッケージにインストール

アプリの登録を進んでもらうと、SDKの設定案内に進むのでコマンドから実際にインストールしていきます。

yarn add firebase

これで、package.json に登録されました。

このあとは、firebase.ts というファイルを作成して、Firebase の設定内容をコピペしましょう。

ファイルの作成場所は任意です。

import { initializeApp } from "firebase/app";

const firebaseConfig = {
  apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  authDomain: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  projectId: "xxxxxxxxxxxxxxxx",
  storageBucket: "xxxxxxxxxxxxxxxxxxxxxx",
  messagingSenderId: "xxxxxxxxxxxxxxxxxx",
  appId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
};

const app = initializeApp(firebaseConfig);

export { app };