Create OAuth Client - knpy/yuka-app GitHub Wiki

新しいOAuth クライアントの作成手順

Google Cloud Console でのOAuth 2.0クライアント作成

1. Google Cloud Console にアクセス

  1. Google Cloud Console にアクセス
  2. プロジェクトを選択（または新規作成）

2. APIs & Services の設定

  1. 左側メニューから「APIs & Services」→「Credentials」を選択
  2. 「+ CREATE CREDENTIALS」をクリック
  3. 「OAuth 2.0 Client IDs」を選択

3. OAuth consent screen の設定（初回のみ）

初回の場合は先にOAuth consent screenの設定が必要：

  1. 「OAuth consent screen」タブを選択
  2. User Type: 「External」を選択（個人開発の場合）
  3. 必要な情報を入力：
    • App name: yuka-app
    • User support email: あなたのメールアドレス
    • Developer contact information: あなたのメールアドレス

4. スコープの追加

  1. 「Scopes」セクションで「ADD OR REMOVE SCOPES」をクリック
  2. 以下のスコープを追加：
    • .../auth/userinfo.email
    • .../auth/userinfo.profile
    • .../auth/calendar.readonly

5. OAuth クライアントの作成

  1. 「Credentials」タブに戻る
  2. 「+ CREATE CREDENTIALS」→「OAuth 2.0 Client IDs」
  3. Application type: 「Web application」を選択
  4. Name: 「yuka-app-web-client」など適切な名前
  5. Authorized JavaScript origins:
    • http://localhost:3000（開発環境）
    • あなたの本番ドメイン（例：https://your-app.amplifyapp.com）
  6. Authorized redirect URIs:
    • http://localhost:3000/api/auth/callback/google（開発環境）
    • https://your-app.amplifyapp.com/api/auth/callback/google（本番環境）

6. クライアント情報の保存

作成後に表示される以下の情報を安全に保存：

  • Client ID
  • Client Secret

7. 環境変数の設定

.env.local ファイルに以下を追加：

GOOGLE_CLIENT_ID=your_client_id_here
GOOGLE_CLIENT_SECRET=your_client_secret_here
NEXTAUTH_SECRET=your_nextauth_secret_here
NEXTAUTH_URL=http://localhost:3000

注意事項

  • Client Secret は絶対に公開しないこと
  • 本番環境では適切なドメインでリダイレクトURIを設定すること
  • スコープは必要最小限に設定すること

トラブルシューティング

一般的な問題については OAuth Troubleshooting を参照してください。

⚠️ **GitHub.com Fallback** ⚠️