Model Context Protocol (MCP) Server + Google OAuth

これは、リモートMCP接続をサポートし、Google OAuthが組み込まれたModel Context Protocol (MCP)サーバーです。

自分のCloudflareアカウントにデプロイでき、独自のGoogle Cloud OAuthクライアントアプリを作成すれば、そこから拡張できる完全なリモートMCPサーバーを利用できます。ユーザーはGoogleアカウントでサインインして、あなたのMCPサーバーに接続できるようになります。

これは、CloudflareにデプロイされたMCPサーバーに他のOAuthプロバイダーを統合する方法のリファレンス例として使用できます。workers-oauth-provider libraryを使用しています。

このMCPサーバー（Cloudflare Workersを搭載）は、次のように動作します。

• あなたのMCPクライアントに対してOAuth サーバーとして動作する

• あなたの実際のOAuthサーバー（この場合はGoogle）に対してOAuth クライアントとして動作する

[!WARNING] これは、すぐに開始できるようにするためのデモテンプレートです。いくつかのセキュリティ対策は実装していますが、本番環境にデプロイする前に、予防的かつ多層防御的なセキュリティ対策をすべて実装する必要があります。包括的なセキュリティガイド（Securing MCP Servers）をご確認ください。

はじめに

リポジトリをクローンして依存関係をインストールします：npm install

本番環境の場合

新しい Google Cloud OAuth アプリを作成します：

• Homepage URLには、https://mcp-google-oauth.<your-subdomain>.workers.devを指定します

• Authorization callback URLには、https://mcp-google-oauth.<your-subdomain>.workers.dev/callbackを指定します

• Client IDをメモし、Client secretを生成します

• Wranglerを使ってシークレットを設定します

wrangler secret put GOOGLE_CLIENT_ID
wrangler secret put GOOGLE_CLIENT_SECRET
wrangler secret put COOKIE_ENCRYPTION_KEY # add any random string here e.g. openssl rand -hex 32
wrangler secret put HOSTED_DOMAIN # optional: use this when restrict google account domain

KV名前空間を設定する

• KV名前空間を作成します： wrangler kv:namespace create "OAUTH_KV"

• WranglerファイルにKV IDを反映します

デプロイとテスト

MCPサーバーをデプロイして、自分のworkers.devドメインで利用できるようにします wrangler deploy

Inspectorを使ってリモートサーバーをテストします：

npx @modelcontextprotocol/inspector@latest

https://mcp-google-oauth.<your-subdomain>.workers.dev/mcpを入力して接続します。認証フローを完了すると、ツールが動作しているのが確認できます：

これでリモートMCPサーバーのデプロイが完了です。

アクセス制御

このMCPサーバーは認証にGoogle Cloud OAuthを使用します。認証済みのすべてのGoogleユーザーは、「add」などの基本的なツールにアクセスできます。ユーザーをホスト型ドメインに制限する場合は、HOSTED_DOMAIN環境変数を設定します。

Claude DesktopからリモートMCPサーバーにアクセスする

Claude Desktopを開き、「Settings」→「Developer」→「Edit Config」の順に移動します。これにより、ClaudeがアクセスできるMCPサーバーを制御する設定ファイルが開きます。

内容を次の設定に置き換えます。Claude Desktopを再起動すると、OAuthのログインページがブラウザウィンドウで開きます。認証フローを完了して、ClaudeにMCPサーバーへのアクセスを許可します。アクセスを許可すると、ツールが使用できるようになります。

{
  "mcpServers": {
    "math": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://mcp-google-oauth.<your-subdomain>.workers.dev/mcp"
      ]
    }
  }
}

インターフェースにツール（🔨の下）が表示されたら、Claudeにそれを使うよう依頼できます。例：「mathツールを使って23と19を足してもらえますか？」Claudeはツールを呼び出し、MCPサーバーが生成した結果を表示するはずです。

ローカル開発の場合

MCPサーバーを反復しながらローカルでテストしたい場合は、Google Cloudで別のOAuthアプリを作成する必要があります：

• Homepage URLには http://localhost:8788 を指定します

• Authorization callback URLには http://localhost:8788/callback を指定します

• Client IDをメモし、Client secretを生成します

• プロジェクトルートに.dev.varsファイルを作成し、次の内容を記述します：

GOOGLE_CLIENT_ID=your_development_google_cloud_oauth_client_id
GOOGLE_CLIENT_SECRET=your_development_google_cloud_oauth_client_secret

開発とテスト

サーバーをローカルで実行し、http://localhost:8788で利用できるようにします wrangler dev

ローカルサーバーをテストするには、Inspectorにhttp://localhost:8788/mcpを入力して「接続」を押します。プロンプトに従うと、「List Tools」が実行できるようになります。

Claudeとその他のMCPクライアントを使用する

Claudeを使ってリモートMCPサーバーに接続すると、エラーメッセージが表示されることがあります。これはClaude DesktopがまだリモートMCPサーバーをサポートしていないためで、混乱することがあります。MCPサーバーが接続されているか確認するには、Claude画面の右下にある🔨アイコンにマウスを重ねてください。ツールがそこに表示されているはずです。

Cursorとその他のMCPクライアントを使用する場合

CursorをMCPサーバーに接続するには、Typeで「Command」を選択し、Commandフィールドにコマンドと引数をまとめて入力します（例：npx mcp-remote https://<your-worker-name>.<your-subdomain>.workers.dev/mcp）。

なお、CursorはHTTP+SSEサーバーをサポートしていますが、認証には対応していないため、mcp-remoteを引き続き使用する必要があります（HTTPサーバーではなく、STDIOサーバーとして使用します）。

Windsurfなど他のMCPクライアントに接続するには、クライアントの設定ファイルを開き、Claude設定で使用したのと同じJSONを追加して、MCPクライアントを再起動します。

どのように動作するか

OAuth Provider

OAuth Providerライブラリは、Cloudflare Workers向けの完全なOAuth 2.1サーバー実装を提供します。トークンの発行・検証・管理など、OAuthフローの複雑な処理を担当します。このプロジェクトでは、OAuthフローの複雑さを処理するという役割を担います：

• サーバーに接続するMCPクライアントの認証

• Google CloudのOAuthサービスへの接続管理

• KVストレージへのトークンと認証状態の安全な保存

Durable MCP

Durable MCPは、CloudflareのDurable Objectsで標準のMCP機能と組み合わせて、以下を提供します：

• MCPサーバーの永続的な状態管理

• リクエスト間で認証コンテキストを安全に保存

• this.propsを使った認証済みユーザー情報へのアクセス

• ユーザーIDに基づくツールの条件付き利用可否のサポート

MCP Remote

MCP Remoteライブラリは、サーバーがInspectorのようなMCPクライアントから呼び出せるツールを公開できるようにします。これにより：

• クライアントとサーバー間の通信用プロトコルを定義

• ツールを定義するための構造化された方法を提供

• リクエストとレスポンスのシリアライズおよびデシリアライズを処理

• クライアント通信用にStreamable HTTP（推奨）とServer-Sent Events（SSE）の両プロトコルをサポート

トランスポートプロトコルの移行

この例は非推奨となったServer-Sent Events（SSE）プロトコルに置き換わる、新しいStreamable HTTPトランスポートプロトコルをサポートするように更新されました。サーバーは現在、次の両方のエンドポイントを公開しています：

• /mcp - 推奨: 新しいStreamable HTTPプロトコルを使用

• /sse - 非推奨: レガシーSSEプロトコル（後方互換性のために維持）

新しい統合はすべて/mcpエンドポイントを使用してください。SSEエンドポイントは将来のバージョンで削除される予定です。