Zenn
🐙

Googleログインを実装する【1】GoogleCloudとSupabaseの設定

に公開
Google Cloud
OAuth 2
Supabase
tech

【導入編】Googleログインを追加する準備（Supabase設定）

このシリーズでは以下の構成で構築済みのWebアプリケーションにGoogleログインを実装する方法を確認していきます。

  • フロントエンド：React
  • バックエンド（認証・DB）：Supabase
  • デプロイ先：Vercel

記事構成：

  1. 第1部：Google CloudとSupabaseの事前設定編※この記事
  2. 第2部：[ReactアプリにGoogleログインを組み込む]※対応中()
  3. 第3部：[ログイン後の画面制御・ユーザー情報の取得]※対応中()

1. Supabaseプロジェクトを用意する

  • Supabase公式サイト にアクセスし、無料アカウントを作成
  • 「New Project」で新規プロジェクトを作成
    • データベースパスワードは忘れずに控えておく

2. Supabaseで認証（Auth）を有効にする

  • プロジェクトダッシュボードで「Authentication」→「Providers」を開く
  • 「Google」を選択し、設定画面を開いておく（まだ設定は完了しない）

3. Google Cloud Platform（GCP）アカウント作成

まだGoogle Cloudを使ったことがない場合は、次のステップを実施してください。

  • Google Cloud Console にアクセス
  • Googleアカウントでログイン
  • 規約に同意してアカウント作成

4. Google Cloudプロジェクト作成

  • コンソール画面右上の「プロジェクトを選択」から「新しいプロジェクトを作成」
    • プロジェクト名は自由（例：my-webapp-auth）

MFA認証の設定

5. OAuth同意画面を構成

  • 「APIとサービス」->「認証情報」->「OAuth同意画面」->「開始」へ
    • GoogleAuthPlatform画面で設定を進めていきます
  • ユーザータイプは「外部」を選択
  • アプリ情報を適当に入力して「作成」を選択
    • アプリ名：例）My Web App
    • サポートメールアドレス：問い合わせを受け付ける自分のメールアドレス
    • 連絡先情報：任意のメールアドレス

6. OAuthクライアントIDを作成

  • 「APIとサービス」->「認証情報」->「認証情報を作成」->「OAuthクライアントID」
    • アプリケーションの種類：ウェブアプリケーション
    • 名前：任意
    • 承認済みのリダイレクトURIを追加
      https://<your-application-domain>/auth/v1/callback

  • 作成完了後、クライアントIDとクライアントシークレットを控える

7. Supabaseに設定を登録

  • SupabaseのGoogle Provider設定画面に戻り、
    • クライアントID
    • クライアントシークレット
      を貼り付け、「Enable」をONにする

これで、Supabase側とGoogle側の認証連携設定は完了です！
次回は、Reactアプリ側にログイン機能を実装していきます。

Discussion