Google認証の導入ガイド

アプリにログイン機能を追加したい場合、Google認証（OAuth 2.0）は最も手軽な選択肢の一つです。このガイドでは、GCPでの設定手順と、Claude Codeで実装するためのプロンプト例を紹介します。

GCPアカウントの準備

会社のアプリの場合

会社の業務で使うアプリであれば、会社のGCPプロジェクトを使用してください。

• 管理者（またはメンター）にプロジェクトへのアクセス権を依頼する
• 既存のプロジェクトがあればそれを使う
• なければ管理者に新規プロジェクト作成を依頼する

個人のアプリの場合

個人プロジェクトの場合は、個人のGoogleアカウントで無料でGCPにサインアップできます。

無料枠の目安:

OAuth認証自体は無料です。認証だけであればGCPの課金は発生しません。

サインアップ手順:

1. Google Cloud Console  にアクセス
2. Googleアカウントでログイン
3. 利用規約に同意
4. 新しいプロジェクトを作成

Google OAuth 2.0 の設定手順

1. OAuth同意画面の設定

1. Google Cloud Console  にアクセス
2. 左メニューから「APIとサービス」>「OAuth同意画面」を選択
3. User Typeを選択：
   • 内部（Internal）: Google Workspace（会社のGoogleアカウント）のユーザーのみ。社内ツール向け
   • 外部（External）: 誰でもログイン可能。一般公開アプリ向け
4. アプリ名、サポートメール、開発者連絡先を入力
5. スコープ: email と profile を追加（基本情報の取得に必要）

2. OAuthクライアントIDの作成

1. 「APIとサービス」>「認証情報」を選択
2. 「認証情報を作成」>「OAuthクライアントID」をクリック
3. アプリの種類を選択：
   • ウェブアプリケーション: 一般的なWebアプリ
4. リダイレクトURIを設定：
   • 開発中: http://localhost:3000/api/auth/callback/google
   • 本番: https://your-app.vercel.app/api/auth/callback/google
5. クライアントID と クライアントシークレット をメモする

3. 環境変数に保存

プロジェクトの .env.local ファイルにクライアント情報を保存します：

GOOGLE_CLIENT_ID=your-client-id-here
GOOGLE_CLIENT_SECRET=your-client-secret-here

.env.local が .gitignore に含まれていることを必ず確認してください。

アクセス制御の設計

Google認証を導入する際、誰がログインできるかを設計する必要があります。

パターン1: 誰でもサインアップOK

Google アカウントを持つ人なら誰でもサインアップ・ログインできる。

向いているケース: 一般公開のアプリ、個人プロジェクト

Claude Codeへのプロンプト例:

このアプリにGoogle認証を追加してください。
NextAuth.js（Auth.js）を使って、Googleアカウントを持つ人は誰でもサインアップ・ログインできるようにしてください。
環境変数は GOOGLE_CLIENT_ID と GOOGLE_CLIENT_SECRET を使います。

パターン2: 特定のドメインのみ許可

会社のGoogle Workspace ドメイン（例: @example.com）のアカウントのみログインを許可する。

向いているケース: 社内ツール、チーム内アプリ

Claude Codeへのプロンプト例:

このアプリにGoogle認証を追加してください。
NextAuth.js（Auth.js）を使います。
ただし、ログインできるのは @example.com ドメインのGoogleアカウントのみに制限してください。
それ以外のドメインでログインしようとした場合は、エラーメッセージを表示してログインを拒否してください。
環境変数は GOOGLE_CLIENT_ID と GOOGLE_CLIENT_SECRET を使います。
許可ドメインは環境変数 ALLOWED_DOMAIN で設定できるようにしてください。

パターン3: 特定のメールアドレスのみ許可

事前に登録したメールアドレスのみログインを許可する（ホワイトリスト方式）。

向いているケース: 限定ユーザー向けアプリ、招待制サービス

Claude Codeへのプロンプト例:

このアプリにGoogle認証を追加してください。
NextAuth.js（Auth.js）を使います。
ログインできるユーザーをホワイトリストで制御してください。
許可するメールアドレスのリストは環境変数 ALLOWED_EMAILS にカンマ区切りで設定します。
例: ALLOWED_EMAILS=user1@gmail.com,user2@example.com
リストにないメールアドレスでログインしようとした場合は、「アクセスが許可されていません」と表示してください。

パターン比較

実装のポイント

ライブラリの選択

Next.jsの場合は NextAuth.js（Auth.js） が最もポピュラーです。

このNext.jsアプリにNextAuth.js v5を導入して、Google OAuth認証を設定してください。
サインインボタンとサインアウトボタンを配置し、ログイン状態に応じて表示を切り替えてください。

デプロイ時の注意

本番環境にデプロイする際は、以下を忘れないでください：

1. リダイレクトURIの追加: GCPのOAuth設定で、本番URLのコールバックURIを追加する
2. 環境変数の設定: デプロイ先（Vercel等）の環境変数設定画面で GOOGLE_CLIENT_ID、GOOGLE_CLIENT_SECRET を登録する
3. NEXTAUTH_URL の設定: NEXTAUTH_URL=https://your-app.vercel.app を環境変数に追加する
4. NEXTAUTH_SECRET の設定: openssl rand -base64 32 で生成したランダム文字列を NEXTAUTH_SECRET として設定する

Claude Codeへのプロンプト例:

このアプリをVercelにデプロイする予定です。
NextAuthの本番環境用の設定を確認して、必要な環境変数を一覧にしてください。

OAuth同意画面の公開設定

外部ユーザー向けに公開する場合:

• テストモード: 最大100人のテストユーザーを手動で追加できる。開発・テスト段階向け
• 本番モード: Googleの審査が必要（基本的なスコープのみなら比較的スムーズ）

社内ツールで「内部（Internal）」を選択した場合は審査不要です。

Google Workspace MCP で各サービスを操作する

OAuth 認証が設定できたら、Claude Code から Google Workspace の各サービスを直接操作できます。

対応サービス

方法1：Google Workspace CLI（推奨）

Google 公式の CLI ツール。全 Workspace API を1つの MCP で提供します。

npm install -g @googleworkspace/cli

Claude Code の .mcp.json に追加：

{
  "mcpServers": {
    "google-workspace": {
      "command": "gws",
      "args": ["mcp"]
    }
  }
}

Claude Code での使い方：

「Google Calendar から今週の予定を取得して」
「この Sheets のデータを読んで集計して」
「この内容で Google Docs を作って」

方法2：コミュニティ製 MCP サーバー

個別のサービスに特化した MCP サーバーも利用できます。

• google_workspace_mcp  — Calendar, Drive, Gmail, Contacts に対応

参考リンク

• Google Workspace CLI（公式） 
• Google Workspace MCP ドキュメント 

一度 OAuth 認証を設定すれば、全 Google サービスで共通で使えます。