メインコンテンツにスキップ

VS CodeをCasdoor MCPサーバーに接続する

このガイドでは、Copilotがエージェントモードでツールを呼び出せるように、GitHub Copilot in VS CodeをCasdoorのMCPサーバー、またはCasdoor MCPゲートウェイの裏側にあるMCPサーバーに接続する方法を説明します。

学習目標​

  • 手動で作成したアプリケーションなしで、VS CodeがCasdoorに対して自身を識別できるようにします。
  • mcp.json にMCPサーバーを追加します。
  • サインインし、ツールを確認してから、サインアウトします。

必要なもの​

  • 稼働中の Casdoor インスタンス。本番環境では HTTPS を使用してください。
  • VS Code と GitHub Copilot
  • Casdoor 管理コンソールへのグローバル管理者アクセス権

接続について​

VS CodeはHTTP経由でリモートMCPサーバーに接続し、PKCEを含むOAuth 2.0認可コードフローを実行します。MCPサーバーがHTTP 401で応答した場合、VS Codeはサーバーの保護されたリソースメタデータを読み取り、その認可サーバーとしてCasdoorを見つけ、以下の方法のうち最初に成功した方法でクライアントIDを取得します:

  1. mcp.json内のクライアントID: Casdoorで作成したアプリケーションです。自分で作成したアプリケーションを使用するを参照してください。
  2. クライアントIDメタデータドキュメント (CIMD): VS Codeは、公開しているドキュメントのURL https://vscode.dev/oauth/client-metadata.json をクライアントIDとして使用します。Casdoorはこのドキュメントを読み取り、登録は不要です。
  3. 動的クライアント登録 (DCR): VS CodeはCasdoorの登録エンドポイントを通じて自身を登録します。

VS Codeのドキュメントには、デスクトップアプリ用の http://127.0.0.1:33418/ と、Web版VS Code用の https://vscode.dev/redirect の2つのリダイレクトURIが記載されています。VS CodeドキュメントのMCP開発者ガイドを参照してください。

CasdoorでのVS Codeの承認​

CIMDとDCRの両方は、組織の Enable dynamic client registration によって管理されます。

  1. Casdoor管理コンソールで、User Management > Organizations に移動し、VS Codeにサインインするユーザーの組織を開きます。Casdoor MCPサーバーの場合は built-in、MCPゲートウェイの裏側のサーバーの場合は、そのサーバーの組織です。
  2. Enable dynamic client registration をオンにします。
  3. 組織を保存します。

最初のサインイン時に、CasdoorはクライアントID https://vscode.dev/oauth/client-metadata.json、cimd_ で始まる名前、およびタグ cimd を持つアプリケーションを作成します。すべての組織がこの1つのアプリケーションを共有します。メタデータドキュメントURLによって識別されるクライアントを承認するを参照してください。

VS CodeへのMCPサーバーの追加​

  1. コマンドパレットを開き、すべてのワークスペース用に MCP: Open User Configuration を実行するか、ワークスペースに .vscode/mcp.json を作成します。

  2. サーバーを追加します。your-casdoor.com を自分のCasdoorインスタンスのドメインに置き換えてください。

    CasdoorのMCPサーバーの場合:

    {
      "servers": {
        "casdoor": {
          "type": "http",
          "url": "https://your-casdoor.com/api/mcp"
        }
      }
    }

    MCPゲートウェイの裏側のサーバーの場合は、ゲートウェイURL https://your-casdoor.com/api/server/<organization>/<server-name> を使用します:

    {
      "servers": {
        "acme-tools": {
          "type": "http",
          "url": "https://your-casdoor.com/api/server/acme/tools"
        }
      }
    }

  3. ファイルを保存します。VS Codeはサーバーの上に Start CodeLensを表示します。それを選択してください。

サインイン​

  1. VS Codeは、サーバーがCasdoorでサインインしてよいかどうかを尋ねます。Allow を選択してください。
  2. ブラウザでCasdoorのサインインページが開きます。サインインしてください。
  3. Casdoor に同意画面が表示された場合は、Allow をクリックします。
  4. ブラウザからVS Codeに戻り、サーバーが起動します。

結果の確認​

  1. チャットビューを開き、Agent モードに切り替えます。
  2. Tools ボタンを選択し、サーバーのツールがリストされていることを確認します。
  3. 例えば「List all applications in Casdoor」といったように、Copilotにそれらを使用するように依頼します。

Casdoor側でクライアントを確認するには、Identity > Applications を開き、クライアントIDが https://vscode.dev/oauth/client-metadata.json である cimd_ アプリケーションを探すか、Tokens を開いてユーザーのトークンを探します。

自分で作成したアプリケーションを使用する​

動的クライアント登録を有効にしたくない場合は、クライアントを手動で作成します:

  1. Casdoor管理コンソールで、Identity > Applications に移動し、ユーザーの組織にアプリケーション（例：vscode-mcp）を追加します。

  2. Redirect URLs に http://127.0.0.1:33418/ と https://vscode.dev/redirect を追加します。

  3. アプリケーションを保存し、その Client ID をコピーします。

  4. クライアントIDを mcp.json に入力します:

    {
      "servers": {
        "casdoor": {
          "type": "http",
          "url": "https://your-casdoor.com/api/mcp",
          "oauth": {
            "clientId": "<client-id>"
          }
        }
      }
    }

  5. アプリケーションにクライアントシークレットが必要な場合、サーバーの上にある Set Client Secret CodeLensを選択し、Client Secret を貼り付けます。VS Codeはこれを mcp.json ではなく、秘密ストレージに保持します。

サインアウト​

  • サインアウトするには、アクティビティバーの下部にある Accounts メニューを開き、Casdoorアカウントを選択し、Sign Out を選択します。
  • DCRを通じて登録したクライアントをVS Codeに忘れさせるには、Authentication: Remove Dynamic Authentication Providers を実行します。
  • クライアントを Casdoor 側で遮断するには、Tokens ページでそのトークンを削除します。

トラブルシューティング​

リダイレクト URL の不一致が報告される​

VS Code はコールバックのためにポート 33418 でリッスンしています。他のプロセスがこのポートを使用している場合、リダイレクト URI が一致しなくなります。ポートを解放して再試行してください。

Casdoor がクライアント ID メタデータドキュメントを拒否する​

エラー "client ID metadata documents are not accepted" は、組織に対して Enable dynamic client registration がオフになっていることを意味します。Accept VS Code in Casdoor を参照してください。また、Casdoor がインターネット経由で https://vscode.dev に到達できる必要があります。

VS Code がクライアント ID を要求する​

VS Code は CIMD と DCR のいずれも使用できない場合にクライアント ID を要求します。Enable dynamic client registration をオンにするか、自分で作成したアプリケーションのクライアント ID を入力してください。

サインイン後にゲートウェイが 401 を返す​

MCP ゲートウェイガイドの Troubleshooting を参照してください。

関連項目​