メインコンテンツまでスキップ

Logto で MCP 対応アプリの認証 (Authentication) を有効化

ヒント:

Logto の AI ソリューション をご覧ください：MCP サーバー、AI エージェント、およびアプリ向けの認証 (Authentication) と認可 (Authorization)。

このガイドでは、 mcp-auth と MCP 公式 SDK v2 を使って Logto を MCP サーバーと統合し、ユーザーを認証 (Authentication) し、アクセス トークン (Access token) から検証済みのアイデンティティを安全に取得する方法を説明します。

このガイドで学べること：

  • MCP サーバーの認可サーバーとして Logto を設定する方法
  • MCP サーバーに「whoami」ツールをセットアップし、現在のユーザーのクレーム (Claims) を返す方法
  • VS Code（MCP クライアント）でフローをテストする方法

このチュートリアルの後、MCP サーバーは次のことができるようになります：

  • Logto テナントでユーザーを認証 (Authentication)
  • Logto が発行した JWT アクセス トークン (Access token)（署名、発行者 (Issuer)、オーディエンス (Audience)、有効期限）を検証
  • 「whoami」ツールの呼び出し時に検証済みのクレーム (Claims)（sub, iss, aud など）を返す

統合が完了したら、VS Code の代わりに独自の MCP クライアント（Web アプリなど）を使って、MCP サーバーが公開するツールやリソースにアクセスできます。

サンプルコード:

このガイドの完全な実行可能サンプルコードは、 mcp-auth/js リポジトリで確認できます：

  • whoami-express：このガイドで紹介している「whoami」サーバー（Node.js + Express）。
  • whoami：同じサーバーを fetch-native（Web 標準の Request / Response と Hono）で構築し、Cloudflare Workers へデプロイ可能。

前提条件​

  • Logto Cloud （またはセルフホスト型）テナント
  • Node.js >= 20 の環境

アーキテクチャの理解​

  • MCP サーバー：MCP クライアントにツールやリソースを提供するサーバーです。最新の MCP 仕様 に従い、Logto が発行するアクセス トークン (Access token) を検証する OAuth 2.0 リソースサーバーとして動作します。
  • MCP クライアント：認証 (Authentication) フローを開始し、統合をテストするためのクライアントです。このガイドでは VS Code（MCP サポート内蔵）をクライアントとして使用します。
  • Logto：OpenID Connect プロバイダー（認可 (Authorization) サーバー）として機能し、ユーザーアイデンティティを管理し、MCP サーバー向けにオーディエンスバウンドの JWT アクセス トークン (Access token) を発行します。

規範的でないシーケンス図で全体の流れを示します：

注記:

MCP は急速に進化しているため、上記の図は最新でない場合があります。最新情報は mcp-auth ドキュメントを参照してください。

Logto でアプリをセットアップ​

MCP クライアントは、認可フローを開始するために Logto でアプリケーションとして登録する必要があります。このガイドでは VS Code をクライアントとして登録します：

  1. Logto コンソールにサインインします。

  2. アプリケーション → アプリケーションの作成 → フレームワークなしでアプリを作成 を選択します。

  3. 種類を「ネイティブアプリ」にします。

  4. アプリ名（例：「VS Code」）やその他の必須項目を入力し、アプリケーションの作成 をクリックします。

  5. 設定 / リダイレクト URI セクションで、VS Code 用に次のリダイレクト URI を追加し、変更を保存します：

    http://127.0.0.1
    https://vscode.dev/redirect

  6. App ID と 発行者エンドポイント (Issuer endpoint) を保存してコピーします。

MCP サーバーのセットアップ​

MCP 公式 SDK v2 と mcp-auth を使用して、現在のユーザーのアイデンティティクレームを返す "whoami" ツール付きの MCP サーバーを作成します。

プロジェクトの作成と依存関係のインストール​

mkdir mcp-server
cd mcp-server
npm init -y
npm pkg set type="module"
npm pkg set main="whoami.js"
npm pkg set scripts.start="node whoami.js"
npm install @modelcontextprotocol/server @modelcontextprotocol/express @modelcontextprotocol/node express mcp-auth
  • @modelcontextprotocol/server は MCP SDK v2 のコアであり、Web 標準の Request / Response を扱います。
  • @modelcontextprotocol/express および @modelcontextprotocol/node は、これを Node.js の Express に適応させます。
  • mcp-auth は、トークン検証機能と MCP SDK 用の OAuth ディスカバリーメタデータを提供します。
注記:

MCP SDK v2 および mcp-auth は ESM のみ対応で、Node.js >= 20 が必要です。

MCP サーバーを API リソースとして登録する​

最新の MCP 仕様 では、アクセストークンが発行対象のリソースにバインドされている必要があります（RFC 8707）。mcp-auth もこれを強制します：トークンの aud クレームは MCP サーバーのリソース識別子と一致しなければなりません。Logto では、MCP サーバーの URL と一致するインジケーターを持つ API リソースを作成することで対応します：

  1. Logto コンソールにサインインします。
  2. API リソース → API リソースの作成 に進みます。
  3. 詳細を入力し、API リソースの作成 をクリックします：
    • API 名：例として「Who am I」など任意の名前を入力します。
    • API 識別子：http://localhost:3001/ を入力します。これは後で MCP サーバーで設定するリソース識別子と一致している必要があります。
リソースインジケーターの末尾スラッシュ:

リソースインジケーターには必ず末尾にスラッシュ（/）を含めてください。MCP 公式 SDK の現在のバグにより、SDK を利用するクライアントは認証リクエスト時にリソース識別子へ自動的に末尾スラッシュを付与します。リソースインジケーターにスラッシュが含まれていない場合、これらのクライアントでリソース検証が失敗します。

MCP Auth を Logto で設定する​

MCP サーバーを保護されたリソースとして宣言します：リソース識別子と、信頼する認可サーバーを指定します。<your-logto-issuer-endpoint> は、先ほどコピーした発行者エンドポイント（アプリケーション詳細ページの Endpoints & Credentials に記載、例： https://my-project.logto.app/oidc）に置き換えてください。

whoami.js 内：

import { MCPAuth } from 'mcp-auth';

const authIssuer = '<your-logto-issuer-endpoint>';

const mcpAuth = new MCPAuth({
  protectedResourceMetadata: {
    // リソース識別子。Logto で登録した API リソースインジケーターと一致させる必要があります
    resource: 'http://localhost:3001/',
    // この MCP サーバーが信頼する認可サーバー
    authorizationServer: { issuer: authIssuer, type: 'oidc' },
  },
});

認可サーバーメタデータは初回利用時に遅延取得され、その後キャッシュされます。MCPAuth インスタンスは、Logto の JWKS を使って JWT アクセストークンを検証します ― 署名、発行者、オーディエンス、有効期限すべてが強制されます。手書きのトークン検証は不要です。

"whoami" ツールの実装​

次に、検証済みアクセストークンから現在のユーザーのアイデンティティクレームを返す "whoami" ツールを実装します。getAuthInfo を使って、mcp-auth が検証した認証情報をツールのコールバックコンテキストから取得します。

import { McpServer } from '@modelcontextprotocol/server';
import { getAuthInfo } from 'mcp-auth';

// MCP サーバーインスタンスを作成するファクトリ関数
// 各リクエストごとに独立したサーバーインスタンスを生成し、リクエストを分離します
const createMcpServer = () => {
  const mcpServer = new McpServer({
    name: 'WhoAmI',
    version: '0.0.0',
  });

  // 現在のユーザー情報を返すツールをサーバーに追加
  mcpServer.registerTool(
    'whoami',
    {
      description: '現在のユーザー情報を取得',
    },
    (context) => {
      const { claims } = getAuthInfo(context);
      return {
        content: [{ type: 'text', text: JSON.stringify(claims) }],
      };
    }
  );

  return mcpServer;
};

サーバーの起動​

最後に、OAuth ディスカバリードキュメント（RFC 9728 / RFC 8414）を公開し、MCP クライアントが認可サーバーを見つけられるようにします。また、SDK の Bearer 認証ミドルウェアで MCP エンドポイントを保護します。

import {
  createMcpExpressApp,
  mcpAuthMetadataRouter,
  requireBearerAuth,
} from '@modelcontextprotocol/express';
import { toNodeHandler } from '@modelcontextprotocol/node';
import { createMcpHandler } from '@modelcontextprotocol/server';

const PORT = 3001;

// MCP ハンドラーは Web 標準の Request / Response を扱います。`toNodeHandler` で Express に適応
const mcpNodeHandler = toNodeHandler(createMcpHandler(createMcpServer));

const app = createMcpExpressApp();

// OAuth ディスカバリードキュメント（`/.well-known/...`）を公開。設計上パブリックです
app.use(mcpAuthMetadataRouter(await mcpAuth.getAuthMetadataOptions()));

app.all(
  '/',
  // 有効な Bearer トークンを要求。検証済み認証情報は `req.auth` 経由でハンドラーに渡されます
  requireBearerAuth(mcpAuth.getBearerAuthOptions()),
  // `createMcpExpressApp` は `express.json()` を適用し、リクエストストリームを消費するため
  // パース済みボディを明示的に渡します
  async (request, response) => mcpNodeHandler(request, response, request.body)
);

app.listen(PORT);

サーバーの起動は次のコマンドで行います：

npm start

統合をテストする​

  1. MCP サーバーを起動します：

    npm start

  2. VS Code を MCP サーバーに接続します：

    1. Command + Shift + P（macOS）または Ctrl + Shift + P（Windows / Linux）を押してコマンドパレットを開きます。
    2. MCP: Add Server... と入力して選択します。
    3. サーバータイプに HTTP を選択します。
    4. MCP サーバーの URL を入力します：http://localhost:3001/
    5. OAuth フローが開始されると、VS Code で Client ID の入力を求められるので、先ほどコピーした App ID を貼り付けます。
    6. アプリシークレットが不要なパブリッククライアントなので、そのまま Enter を押してスキップします。
    7. ブラウザでサインインフローを完了します。

  3. サインイン後、VS Code で whoami ツールを実行します。

アクセス トークン (Access token) から次のような検証済みクレーム (Claims) が表示されるはずです：

{
  "iss": "https://my-project.logto.app/oidc",
  "sub": "user_XXXX",
  "aud": "http://localhost:3001/",
  "client_id": "<your-app-id>"
}

さらに学ぶ​

MCP サーバーは受信したアクセス トークン (Access token) を検証できるようになりました。次のステップとして、トークンのパススルーやユーザーコンテキストの喪失なしに、ユーザーの代理でダウンストリームのビジネス API を安全に呼び出す方法を学びましょう：

MCP サーバーがユーザーの代理で API を呼び出す方法：本番環境向けトークン戦略