Google認証に必要なもの
前回の動画でデータベースの作成ができたので、今回はGoogle認証を動作するように設定していきます。Google認証にはGoogle Cloud Platform（GCP）を使う必要があります。
Google Cloud Platformのプロジェクト作成
- 「Google Cloud Platform」で検索し、公式サイトにアクセス
- 初めての方は新規登録、既にアカウントがある方は「コンソール」ボタンをクリック
- 左上のプロジェクト選択から「新しいプロジェクト」を作成
- プロジェクト名を入力（例：Video Platform CCA）
- 組織は「なし」で作成
作成完了後、左上のプロジェクト名が変わっていることを確認してください。
OAuth同意画面の設定
- サイドバーを開き「APIとサービス」→「OAuth同意画面」をクリック
- アプリ名を入力
- 「外部」を選択
- ユーザーサポートメールにメールアドレスを記入
- チェックマークを入れて「続行」→「作成」
OAuthクライアントの作成
- 「Authクライアントの作成」をクリック
- アプリケーションの種類は「Web Application」を選択
- 承認済みリダイレクトURIを設定する
リダイレクトURIの確認方法
本プロジェクトではBetterAuthという認証ライブラリを使用しています。リダイレクトURIはClaude Codeに「これを教えて、Google認証」と聞けば教えてくれます。
開発環境では localhost:3000 ベースのURIを設定します。本番環境に移行する際は、ドメイン名に変更が必要です。
クライアントIDとSecretの取得
- 作成後に発行されるクライアントIDをコピー
.env.localファイルに貼り付け- 同様にSecretもコピーして貼り付け
セキュリティに関する注意
APIキーやSecretをClaude Codeに直接貼り付けて依頼すると、履歴として残ったり、クラウド側で保存されるリスクがあります。環境変数は手動で設定することを推奨します。
BetterAuth Secretの設定
BetterAuth用のシークレットキーも必要です。32文字のランダムな文字列を生成して .env.local に設定します。Claude Codeに生成してもらうことも可能です。
動作確認
設定が完了したら、ページをリロードしてGoogleログインボタンをクリックします。おなじみのGoogleアカウント選択ポップアップが表示されれば成功です。
Tursoのデータベースでユーザーテーブルを確認すると、ログインしたユーザーのデータが保存されていることがわかります。
エラーが出た場合
途中でエラーが出た場合は、エラーログをClaude Codeに貼り付けて修正を依頼してください。環境によってうまくいく場合といかない場合がありますが、ハーネス設計を行っている場合はEvaluatorが品質を担保しているため、比較的うまく動作するはずです。
開発サーバーの起動方法
Claude Codeが自動で開発サーバーを立ち上げてくれる場合もありますが、手動で立ち上げたい場合は以下の方法があります。
- Claude Code上で
!を押してnpm run devを実行 - 別のターミナルを開いて
npm run devを実行
次のステップ
Google認証が実装できたので、次の動画では管理者の設定と管理者ページの確認を行います。その後、Stripe決済の設定やワイヤーフレームを読み込ませたUIの調整を進めていきます。