mcpField
M
Model Context Protocol (MCP) Server + Github OAuth

Model Context Protocol (MCP) Server + Github OAuth

ローカル
github.com/zaki-yama-labs開発ツール078 週間前に更新

Model Context Protocol (MCP) Server + Github OAuth について

Cloudflare WorkersにデプロイするリモートMCPサーバーのサンプルで、接続ユーザーをGitHub OAuthで認証します。GitHubログインを必要とするMCPサーバーの構築や、他のOAuthプロバイダー連携の参考に向いています。

主な機能

  1. 01GitHub OAuth対応のリモートMCP接続
  2. 02OAuthサーバーとクライアントの両方として動作
  3. 03KVによるトークンと認証状態の保存
  4. 04GitHubユーザー単位のツールアクセス制限
  5. 05Cloudflare Workersでのローカル開発とデプロイ

活用シーン

  1. 01独自のリモートMCPサーバーにGitHubログインを追加
  2. 02Cloudflare WorkersでのOAuth連携の参考
  3. 03ユーザーIDに応じた特定ツールへのアクセス制御

MCP 対応

SSE経由でMCPクライアントにツールを公開し、GitHub OAuthでユーザーを認証します。Cloudflare Workersにデプロイできます。

設定

ローカルサーバーの設定はどのクライアントでも共通です。コピーしてクライアントの MCP 設定ファイルに貼り付けてください。

mcp.json · 共通設定
{
"mcpServers": {
"my-mcp-server-github-auth": {
"command": "npx",
"args": [
"-y",
"mcp-remote"
]
}
}
}
起動コマンドnpx -y mcp-remote

ローカルサーバーにはマシン上の実行環境(Node.js 18 以上など)が必要です。設定ファイルの場所はクライアントごとに異なります。

パッケージ
npmmcp-remote

ツール

ツール一覧はまだ取得されていません

ローカルサーバーのツールはマシン上で起動して初めて取得できます。メンテナーはまだツール一覧を提供していません。

詳細

Model Context Protocol (MCP) サーバー + Github OAuth

これは、Github OAuth を組み込んだ、リモート MCP 接続に対応する Model Context Protocol (MCP) サーバーです。

ご自身の Cloudflare アカウントにデプロイし、独自の Github OAuth クライアントアプリを作成すると、拡張して利用できる、完全に機能するリモート MCP サーバーが完成します。ユーザーは GitHub アカウントでサインインして、MCP サーバーに接続できます。

Cloudflare にデプロイした MCP サーバーに他の OAuth プロバイダーを統合する方法を示す参考例として、workers-oauth-provider library を利用できます。

Cloudflare Workers を利用する MCP サーバーは、次のように動作します。

  • MCP クライアントに対して OAuth サーバー として動作します
  • 実際の OAuth サーバー(この例では GitHub)に対して OAuth クライアント として動作します

はじめに

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

本番環境の場合

新しい GitHub OAuth App を作成します:

  • Homepage URL には、https://mcp-github-oauth.<your-subdomain>.workers.dev を指定します
  • Authorization callback URL には、https://mcp-github-oauth.<your-subdomain>.workers.dev/callback を指定します
  • Client ID を控え、Client secret を生成します。
  • Wrangler でシークレットを設定します
wrangler secret put GITHUB_CLIENT_ID
wrangler secret put GITHUB_CLIENT_SECRET
wrangler secret put COOKIE_ENCRYPTION_KEY # add any random string here e.g. openssl rand -hex 32
KV 名前空間を設定する
  • KV 名前空間を作成します: wrangler kv:namespace create "OAUTH_KV"
  • KV ID で Wrangler ファイルを更新します
デプロイとテスト

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

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

npx @modelcontextprotocol/inspector@latest

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

画像

これで、リモート MCP サーバーをデプロイできました!

アクセス制御

この MCP サーバーは認証に GitHub OAuth を使用します。認証済みの GitHub ユーザーは全員、「add」や「userInfoOctokit」などの基本的なツールにアクセスできます。

「generateImage」ツールは、ALLOWED_USERNAMES 設定に記載された特定の GitHub ユーザーに制限されています:

// Add GitHub usernames for image generation access
const ALLOWED_USERNAMES = new Set([
  'yourusername',
  'teammate1'
]);
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-github-oauth.<your-subdomain>.workers.dev/sse"
      ]
    }
  }
}

インターフェースにツール(🔨の下)が表示されたら、Claude にそれらを使うよう依頼できます。たとえば、「数学ツールを使って23と19を足してもらえますか?」と頼むことができます。Claude はツールを呼び出し、MCP サーバーが生成した結果を表示します。

ローカル開発の場合

MCP サーバーを開発・テストする場合は、ローカル開発環境で作業できます。そのためには、GitHub で別の OAuth App を作成する必要があります:

  • Homepage URL には、http://localhost:8788 を指定します
  • Authorization callback URL には、http://localhost:8788/callback を指定します
  • Client ID を控え、Client secret を生成します。
  • プロジェクトのルートに .dev.vars ファイルを作成し、次の内容を記述します:
GITHUB_CLIENT_ID=your_development_github_client_id
GITHUB_CLIENT_SECRET=your_development_github_client_secret
開発とテスト

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

ローカルサーバーをテストするには、Inspector に http://localhost:8788/sse を入力して、接続をクリックします。画面の指示に従うと、「List Tools」を実行できるようになります。

Claude およびその他の MCP クライアントの使用

Claude を使用してリモート MCP サーバーに接続すると、エラーメッセージが表示される場合があります。これは、Claude Desktop がまだリモート MCP サーバーをサポートしていないため、混乱することがあるためです。MCP サーバーが接続されているか確認するには、Claude のインターフェース右下にある 🔨 アイコンにカーソルを合わせてください。利用可能なツールが表示されます。

Cursor およびその他の MCP クライアントの使用

Cursor を MCP サーバーに接続するには、Type に「Command」を選択し、Command フィールドで command と args の各フィールドの内容を 1 つにまとめます(例:npx mcp-remote https://<your-worker-name>.<your-subdomain>.workers.dev/sse)。

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

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

どのように動作しますか?

OAuth プロバイダー

OAuth Provider ライブラリは、Cloudflare Workers 向けの OAuth 2.1 サーバー実装を一式提供します。トークンの発行、検証、管理など、OAuth フローの複雑な処理を担います。このプロジェクトでは、次の 2 つの役割を果たします。

  • サーバーに接続する MCP クライアントを認証する
  • GitHub の OAuth サービスへの接続を管理する
  • KV ストレージにトークンと認証状態を安全に保存する
Durable MCP

Durable MCP は、Cloudflare の Durable Objects によって基本的な MCP 機能を拡張し、次の機能を提供します。

  • MCP サーバーの状態を永続的に管理する
  • リクエスト間で認証コンテキストを安全に保存する
  • this.props を介して認証済みユーザー情報にアクセスする
  • ユーザーの ID に基づいてツールの利用可否を切り替える
MCP Remote

MCP Remote ライブラリを使用すると、Inspector などの MCP クライアントから呼び出せるツールをサーバーで公開できます。次の機能があります。

  • クライアントとサーバー間の通信プロトコルを定義する
  • ツールを構造化して定義する方法を提供する
  • リクエストとレスポンスのシリアライズおよびデシリアライズを処理する
  • クライアントとサーバー間の Server-Sent Events(SSE)接続を維持する

コメント

MCP は初めてですか?

プロトコルの概要から最初のサーバーの導入まで、よくある疑問にまとめて答えます。

AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。