mcpField
I
Implementing Streamable HTTP MCP Server with Browser-based OAuth

Implementing Streamable HTTP MCP Server with Browser-based OAuth

ローカル
github.com/asibyl開発ツール077 週間前に更新
リポジトリ

Implementing Streamable HTTP MCP Server with Browser-based OAuth について

MCP クライアントの認可を実装する Streamable HTTP サーバーのプロジェクトです。ブラウザー経由の GitHub OAuth を使い、有効なアクセストークンを持つリクエストを処理します。

主な機能

  1. 01Streamable HTTP サーバー
  2. 02ブラウザー経由の GitHub OAuth 認可
  3. 03アクセストークンの検証
  4. 04セッション単位でのリクエスト処理

活用シーン

  1. 01GitHub ログイン対応の MCP サーバーを構築
  2. 02クライアントリクエストに OAuth 認可を追加
  3. 03セッション ID 付きリクエストを処理

MCP 対応

MCP サーバーとして Streamable HTTP でクライアントリクエストを受け付け、`/authorize` と `/token` の認可エンドポイントを実装します。

#mcp#oauth#http-server

設定

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

mcp.json · 共通設定
{
  "mcpServers": {
    "mcp_oauth_server_web": {
      "command": "npx",
      "args": [
        "-y",
        "tsx"
      ],
      "env": {
        "GITHUB_CLIENT_ID": "<GITHUB_CLIENT_ID>",
        "GITHUB_CLIENT_SECRET": "<GITHUB_CLIENT_SECRET>"
      }
    }
  }
}
起動コマンドnpx -y tsx
設定が必要な環境変数
GITHUB_CLIENT_ID
GITHUB_CLIENT_SECRETシークレット

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

パッケージ
npmtsx

ツール

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

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

詳細

ブラウザーを使用した OAuth 対応の Streamable HTTP MCP サーバーの実装

概要

このプロジェクトの目的は、MCP サーバーを通じて MCP クライアントが認可を要求できるようにすることです。そのためには、GitHub 用のカスタム OAuthProvider を実装する必要があります。

そのため、このプロジェクトでは次の機能を提供します。

  1. StreamableHTTP サーバー
  2. GitHub の OAuth を使用した、ブラウザー経由のクライアント認可
  3. 認可済みクライアントリクエストの処理
実行フローの概要

フローは次のとおりです。

  1. クライアントが /mcp エンドポイントに POST リクエストを送信します。
  2. サーバーは Authorization ヘッダーに含まれるアクセストークンを検証します。期限切れの場合（または認識できない場合）、サーバーはエラーを返します。アクセストークンが有効な場合、サーバーは次のステップに進みます。
  3. クライアントリクエストに有効な sessionId が含まれている場合、サーバーは既存のトランスポート接続を使用します。含まれていない場合は、新しい sessionId を持つトランスポート接続を作成します。サーバーはそのトランスポート接続を使ってリクエストを処理します。
認可

サーバーは /authorize および /token エンドポイントを通じて、クライアントからの認可リクエストを受け取ります。これらは、OAuthServerProvider を実装するクラスによってサポートされます。

/authorize エンドポイントへのリクエストに対して、サーバーの認証プロバイダーは次の処理を行います。

  1. PKCE verifier と challenge を生成します。
  2. GitHub OAuth エンドポイントにリダイレクトします（GITHUB_CLIENT_ID と GITHUB_CLIENT_SECRET の環境変数を設定する必要があります）。
  3. コールバックの一部として、次の処理を行います。
    • コールバックで返されたコードを使用して、GitHub からアクセストークンを取得します。
    • このアクセストークンを clientId とともに保存します。
    • 新しい認証コードを生成し、クライアントに返します。

クライアントがこの認証コードを指定して /token エンドポイントにアクセスすると、サーバーはクライアントに独自のアクセストークンを提供します。

使用方法

  1. このリポジトリをクローンします。
  2. 依存関係をインストールします：npm install
  3. GitHub の Developer Settings（Settings 内）に移動し、OAuth アプリを作成します。Client ID と Client Secret を控えておきます。
  4. ローカルの開発環境で、GITHUB_CLIENT_ID と GITHUB_CLIENT_SECRET の環境変数を設定します。
  5. MCP サーバーを起動します：npx tsx server/index_streamable.ts

コメント

Markdown 対応

MCP は初めてですか？

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

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