認証実装 OAuth(google)【CFW P2P心理戦ゲーム開発記】 #10

今回はgoogle認証を実装していこうと思います。
大まかな手順としては、Google Cloud Console にアクセスし新規プロジェクトを作成し、OAuth同意画面からウェブアプリケーションの認証を追加。このプロジェクトと今回作っているwebアプリを連携していくという流れになります。

cloud flareworkersで作るwebゲーム、googleのOAuth実装

１. Google Cloud Console

コーディングに入る前に、Google側で「このアプリにログイン機能を使わせてください」という登録（鍵の取得）が必要です。

管理ページのUIは定期的に変わる為、詳細は略しますが、プロジェクト作成→APIとサービス→OAuth 同意画面から設定していきます。(アプリ名や連絡先の設定などを行います)

OAuth作成すると 「クライアント ID」 と 「クライアントシークレット」 が発行されるので、これをメモしておきます。

Protocol-99という名前でプロジェクト作成しました

urlの登録（今は開発中なのでローカルホストのurl)

ログイン実装

googleでの認証を実装します。
googleでのログインボタン→google認証ページ→jwtで改ざん対策してログイン認証→データベース登録
といった流れでユーザ登録するようにします。

JWTライブラリのインストール

ログイン成功後、ユーザーに渡す「改ざん不可能なセッション証明書（JWT）」を作るため、Cloudflare Workersの定番ライブラリを一つ導入します。

npm install @tsndr/cloudflare-worker-jwt

認証ページの追加

認証ページへ飛べるようにルートをauthHandler.tsに追加しておきます。

# セキュリティ的観点から、一部の抜粋です。よくある一般的な実装だと思います。 
import jwt from '@tsndr/cloudflare-worker-jwt';

/**
 * 1. ログイン開始：ユーザーをGoogleの認証画面へリダイレクトする
 * GET /api/auth/google/login
 */
export async function handleGoogleLogin(request: Request, env: any): Promise<Response> {
  const authUrl = new URL("https://accounts.google.com/o/oauth2/v2/auth");
  authUrl.searchParams.set("client_id", env.GOOGLE_CLIENT_ID);
  authUrl.searchParams.set("redirect_uri", env.GOOGLE_REDIRECT_URI);
  authUrl.searchParams.set("response_type", "code");
  authUrl.searchParams.set("scope", "openid email profile");
  
  // Googleのログイン画面へユーザーを飛ばす
  return Response.redirect(authUrl.toString(), 302);
}

/**
 * 2. 帰ってきたレスポンスからjwtの検証やDBにすでにいるならログイン、
 *    新規なら登録などの処理をする
 */

index.tsにハンドラを登録します。

import { handleGoogleLogin, handleGoogleCallback } from "./handlers/authHandler";
//上で作ったハンドラ
...

    // ログインボタンを押した時の入り口
    if (url.pathname === "/api/auth/google/login") {
      return await handleGoogleLogin(request, env);
    }

接続テスト

ログインボタンを押して帰ってきてデータベース登録までできるかテストしてみました。
login用ボタンでの接続　127.0.0.1:8787/api/auth/google/login

ログインページに飛べることを確認

テストモードで設定したため、テストモード(google cloud console)で登録したユーザで接続しログインできます。ログイン成功したら、既存のポータルページに入れるようになっています。

以前の仮登録ユーザデータベースを完全削除したため、今回登録した１ユーザが登録できています。

再ログインテスト

アカウント登録はできたので、ログイン情報が保持されるかテストしてみました。最近のブラウザでは、一度ログインした情報をGoogleアカウント側のログインセッション（Cookieなど）が保持されているため、ログインした後、再度　127.0.0.1:8787/api/auth/google/login　と打つと勝手にログインしロビーまで入れます。

・別ウィンドウから再度ログイン

まとめ

今回はgoogleの認証との連携を行いました。これにより、googleアカウントで今回のシステムにログインし、自身のゲームデータにアクセスおよび、外部からのアクセス制限が可能となります。
最終的な実装では、同じアカウントに多重ログイン（スマホとPCそれぞれで同時ログインなど）ができないようにセッション管理する必要がありますが、それは後程、実装することにします。

CloudFlare Workersセットアップ
Cloudflare Workersの始め方：Wranglerによるローカル環境構築と世界公開の手順
【第２回】データベースを作る
D1データベース作成とテスト環境構築の手順【CFW P2P心理戦ゲーム開発記】 #2
【第３回】データベーススキーマ設計
D1データベーススキーマの設計：リレーショナルデータベースとは？【CFW P2P心理戦ゲーム開発記】 #3
【第４回】ユーザデータベース実装
D1データベース実装：ユーザデータ管理【CFW P2P心理戦ゲーム開発記】 #4

次回予告

今回の実装で仕組みとしてのログイン認証はできましたが、ユーザ名設定や、ちゃんとしたログイン後のホーム画面などのルーティングができていないので、次回は、ゲームに到達できるまでのベースとなるページルーティングを作っていきます。

次回：関連記事は、2026年6月20日に公開予定 (あと11時間)

ここまで読んでいただきありがとうございます。では、次の記事で。　lumenHero

Post Views: 3