--- title: "Auth0 と Cloudflare を使ってリモート MCP サーバーを安全にデプロイする方法" description: "Auth0 を使用して、Cloudflare Workers で構築するリモート MCP サーバーを保護し、保護された API へアクセスする方法を紹介します。" authors: - name: "Will Johnson" url: "https://auth0.com/blog/authors/will-johnson/" - name: "Jessica Temporal" url: "https://auth0.com/blog/authors/jessica-temporal/" date: "Jun 25, 2025" category: "AI" tags: ["auth0", "cloudflare", "mcp", "api"] url: "https://auth0.com/blog/jp-secure-and-deploy-remote-mcp-servers-with-auth0-and-cloudflare/" --- # Auth0 と Cloudflare を使ってリモート MCP サーバーを安全にデプロイする方法 > 本記事は 2025年6月25日 に更新された「[Secure and Deploy Remote MCP Servers with Auth0 and Cloudflare](https://auth0.com/blog/secure-and-deploy-remote-mcp-servers-with-auth0-and-cloudflare/)」を翻訳した記事です。 **TL;DR** - Auth0 は Cloudflare と協力し、リモート MCP サーバーを構築する開発者が認証と認可をより簡単に実装できるようにします。リモート MCP サーバーは、AI アプリケーションが外部サービスに安全にアクセスする方法を提供します。本記事では、外部サービスにアクセスするリモート MCP サーバーを Cloudflare Workers で構築し、Auth0 を使用して安全にする方法を詳しく説明します。サンプルの Todo API を外部サービスとして使用します。 ## MCP サーバーとは何か？ 開発者は開発やデプロイに大規模言語モデル (LLM) や AI アプリケーションを使用しています。これらのアプリケーションは LLM がすでに学習したデータを使用する場合に優れていますが、外部サービスに接続してさらに多くの情報を取得できたらどうでしょうか。そこで [Model Context Protocol (MCP)](https://auth0.com/blog/an-introduction-to-mcp-and-authorization/) です。MCP は、標準化された方法で LLM が外部ツールや API に接続するためのプロトコルです。MCP を使用すると、AI アプリケーションは各 API の仕様を知らなくても外部サービスに接続できます。MCP は、クライアントサーバーのモデルを使用してこれを実現します。 * **MCP クライアント** — クライアントは、LLM ベースのアプリケーション内から MCP サーバーへの接続を維持します。 * **MCP サーバー** — サーバーは常に実行され、MCP クライアントからの呼び出しを待機します。 リモート MCP サーバーはインターネットからアクセスできます。ユーザーはサインインし、使い慣れた認可フローを使用して MCP クライアントに権限を付与できます。これにより、ローカルマシンで MCP サーバーを実行したくないが、API 操作を行いたいユーザーにとって、新しい方法になります。 ## Auth0 と Cloudflare でリモート MCP サーバーを保護する Auth0 は [Cloudflare Workers](https://developers.cloudflare.com/workers/) を利用したリモート MCP サーバーの保護を開発者が実装できるように Cloudflare と協力してきました。MCP の採用が急速に進む中、Cloudflare は技術進化に追随して行っています。Cloudflare は認可の実装を容易にする OAuth プロバイダーである `workers-oauth-provider` の提供をはじめとして、リモート MCP サーバー構築の困難な部分に対応するための機能を[プラットフォームに追加](https://blog.cloudflare.com/remote-model-context-protocol-servers-mcp/) しています。[MCP サーバーを Auth0 で保護する](https://auth0.com/blog/jp-an-introduction-to-mcp-and-authorization/) ことにより、AI アプリケーションはリモート MCP サーバー経由で接続し、認証済みユーザーの代わりに API 呼び出しを行って、外部 API と対話できます。 本ブログ記事の残りの部分では、実践的な例を順を追って説明します。Auth0 によって保護された MCP サーバーを使用して、AI アプリケーションがサンプルの Todos API に接続するようにセットアップして使用します。サーバーと API は Cloudflare Workers プロジェクトであり、アクセス トークンとリフレッシュ トークンを要求して受け取るのに Auth0 を使用します。 ![MCP クライアントから Todo API にリクエストを送るために Auth0 と Cloudflare を使用する](https://images.ctfassets.net/23aumh6u8s0i/7LF05DzMqEeHQXrKkTK2jA/a332d0e0ba499da2f8eef42f72aac460/cloudflare-remote-mcp-protected-with-auth0-flow__2_.png) まず、必要なアカウントを作成して Todos API をセットアップし、次に Auth0 に接続する MCP サーバーをデプロイして設定します。最後には、MCP クライアントが Todos API に情報を要求できるようになります。 ## はじめに 手順を行うにはローカルの開発環境をセットアップする必要があります。以下を準備してください。: * [Auth0 アカウント](https://auth0.com/jp/signup)を作成します。 * [Cloudflare アカウント](https://www.cloudflare.com/ja-jp/)を作成します。 * Visual Studio Code (またはお好みのコードエディター) をインストールします。 アカウントを作成したら、以下をインストールします。 * [Node.js](https://nodejs.org/en/download) (v18+) * [Git](https://git-scm.com/downloads) * Cloudflare Wrangler CLI ※Wrangler のインストールに関するドキュメントは[こちら](https://developers.cloudflare.com/workers/ja/wrangler/install-and-update/)を確認ください。 ### Todo API とリモート Auth0 MCP サーバーのサンプルアプリケーションを取得する サンプルの Todos API とリモート MCP サーバーは [Cloudflare AI monorepo](https://github.com/cloudflare/ai) 内にあります。リポジトリをクローンし、各アプリケーションに移動して、ターミナルで次のコマンドを使用して依存関係をインストールします。 **Todos API**: ``` git clone https://github.com/cloudflare/ai.git cd ai/demos/remote-mcp-auth0/todos-api npm install ``` Todos API は [Hono web framework](https://hono.dev/) で構築されています。 **リモート MCP サーバー**: ``` cd ../mcp-auth0-oidc npm install ``` 両方のプロジェクトをローカルで利用可能にし、依存関係をインストールしたら、次のステップに進み、Todos API を Auth0 で保護します。 ### Auth0 で Todos API を 設定する Todos API を Auth0 で保護するように設定しましょう。設定すると、Auth0 は Todos API 向けのアクセストークンやリフレッシュトークンを作成することができるようになり、トークンを受け取ったリモート MCP サーバーはエンドユーザーに代わってアクションを実行できます。開始するには、[Auth0 アカウントにログイン](https://manage.auth0.com/)して Auth0 ダッシュボードにアクセスします。 Auth0 ダッシュボードで [Applications > APIs](https://manage.auth0.com/#/apis/) に移動して API を作成します。**Create API** をクリックします。以下のフィールドに次の値を入力します。 * **Name** フィールドに、「Todos API」と入力します。 * **Identifier** フィールドに、`urn:todos-api` と入力します。この値は、MCP サーバーが Todos API のために認可呼び出しを行う際の `audience` パラメーターとして使用されます。 * **Create** ボタンを押します。 ![Auth0 ダッシュボードの API 作成画面](https://images.ctfassets.net/23aumh6u8s0i/klUW8q2EKjmE0CnTpaTU6/bb20af2cc6123644879ec38f09c51c73/Screenshot_2025-04-10_at_3.27.31_PM.png) 次のステップでは、リモート MCP サーバーから要求されたときにリフレッシュ トークンを取得できるようにします。[Applications > APIs](https://manage.auth0.com/#/apis/) に移動し、Todos API のエントリをクリックします。**Settings** にアクセスし、**Access Settings** までスクロールダウンして、**Allow Offline Access** ボタンをトグルして有効にします。そして **Save** をクリックします。 ![Auth0 ダッシュボードの API アクセス設定](https://images.ctfassets.net/23aumh6u8s0i/6qoFrMXPUzyt5Z6SWK9o9w/517bf73eac7a9f701c984d18aec18fdf/Screenshot_2025-04-10_at_3.33.40_PM.png) Allow Offline Access をオンにすると、MCP サーバーが [リフレッシュ トークン](https://auth0.com/docs/ja/secure/tokens/refresh-tokens) を取得できるようになり、アクセス トークンの有効期限が切れてもユーザーが再認証する必要がなくなります。 最後に、Auth0 ダッシュボードでパーミッション (スコープ) を設定する必要があります。設定したパーミッションは、ユーザーがアプリケーションに API へのアクセスを認可する際に付与することができます。Todos API の API 設定で **Permissions** タブに移動し、パーミッション名として `read:todos` と `read:billing` を入力し、説明を追加し、**+ Add** ボタンを押してパーミッションを登録します。 ![Auth0 ダッシュボードの API Permissions タブ](https://images.ctfassets.net/23aumh6u8s0i/4KSfabe2W5eQh5TuOF2cts/3ddf1ea4fd1eceadbff80d31ad5eed6c/Screenshot_2025-04-10_at_3.37.04_PM.png) パーミッションを設定したら、Todos API のための Auth0 内で作成および設定は完了です。Todos API に Auth0 の情報を設定する必要があります。 お好みのコードエディターで Todos API プロジェクトを開き、Auth0 ダッシュボードで作成した API 設定を利用するための設定値を追加し、Wrangler CLI を使ってデプロイします。 Todos API プロジェクトのルートに、`.dev.vars` ファイルを作成します。ファイルは次のような形式になります。: ``` AUTH0_DOMAIN= AUTH0_AUDIENCE=urn:todos-api ``` `AUTH0_AUDIENCE` には API を作成したときに定めた値を入力します。次に、Auth0 ドメインを入力する必要があります。 Auth0 ダッシュボードで新しい API を作成するたびに、アクセス トークンを取得したり、保護された API へのリクエストを行ったりするためのテストアプリケーションも自動的に作成されています。[Applications > Applications](https://manage.auth0.com/#/applications) でテストアプリケーションを確認できます。 ダッシュボードの Applications 一覧から「*Todos API (Test Application)*」をクリックすると、設定が表示され、**Domain** の値をコピーできます。 ![Auth0 ダッシュボードの Todo API テストアプリケーション設定](https://images.ctfassets.net/23aumh6u8s0i/1tYPzi9JnFGx0UfzIIU2p9/ea37c64f67666bc254ea05e6aef3d352/Screenshot_2025-04-07_at_1.03.54_PM.png) `.dev.vars` ファイルを更新して、次のようにドメインを含めます。: ``` AUTH0_DOMAIN=Auth0 ドメイン (例:acme.auth0.com) AUTH0_AUDIENCE=urn:todos-api ``` ### Todos API をテストする Todos API を Auth0 とローカルの両方で設定したので、リクエストを送信できます。 次のコマンドで Todos API を実行します。: ``` cd ../todos-api npm run dev ``` これによりワーカーが起動し、Todos API にリクエストを送信できるようになります。 API を呼び出すための `access_token` を取得するには、Auth0 ダッシュボードで **Applications > APIs** を開き、**Todos API** をクリックしてから **Test** タブを選択します。アクセス トークンを要求するための cURL コマンドが表示されます。 ![Todos API の Test タブ](https://images.ctfassets.net/23aumh6u8s0i/3aXJxxBRZP75mib0aGAJyS/22204edc710ede9ae7c7b4a706dbe2d8/Screenshot_2025-04-09_at_1.52.22_PM.png) ターミナルで **Test** タブのコマンドを実行します。ダッシュボード上のコマンドに含まれている Auth0 ドメイン、`client_id`、`client_secret` の値を必ず使用してください。 ``` curl --request POST \ --url https://dev-aggvwbxi.us.auth0.com/oauth/token \ --header 'content-type: application/json' \ --data '{"client_id":".....","client_secret":".....","audience":"urn:todos-api","grant_type":"client_credentials"}' ``` cURL コマンドは、以下のようにアクセス トークンを含む結果を返します。: ``` { "access_token": ".......", "token_type": "Bearer" } ``` 次に、Authorization ヘッダーでアクセストークンを渡して API にリクエストを送信します。 ``` curl --request GET \ --url http://localhost:8789/api/me \ --header 'Authorization: Bearer eyJhbGciOiJSUzI1NiIsInR5cCI6Im...' ``` 呼び出しが成功すると、結果に JWT トークンのクレームが返されます。 ## Todos API を Cloudflare にデプロイする Todos API は Cloudflare Workers のプロジェクトで、Wrangler コマンドでデプロイできます。これまでに準備したものを使用して、Wrangler でローカルにシークレットを設定し、API を Cloudflare にデプロイできます。ターミナルを使用して、プロジェクトフォルダーに移動し、次のコマンドを実行します。: ``` wrangler secret put AUTH0_DOMAIN wrangler secret put AUTH0_AUDIENCE ``` シークレットが設定されたので、次のコマンドで Todos API を Cloudflare にデプロイします。: ``` wrangler deploy ``` これで、Todos API は Cloudflare にデプロイされ、Auth0 によって保護されています。 Cloudflare ダッシュボードの **Compute (Workers) > Workers & Pages** で、**todos-api** を開きます。**Settings** タブの **Domains & Routes** セクションで、**workers.dev** の値をメモします。デプロイされた Todos API にアクセスするためのドメインです。 ## リモート MCP サーバーの設定とデプロイ このステップでは、Auth0 で保護されたリモート MCP サーバーを設定し、Todos API にリクエストを送信します。このために、Auth0 ダッシュボードでアプリケーションを作成し、Cloudflare にデプロイします。 Auth0 ダッシュボードに戻り、[Applications > Applications](https://manage.auth0.com/#/applications) に移動して Web アプリケーションを作成します。**Create Application** をクリックし、次の値を入力します。: * **Name** フィールドに、「Remote MCP Server」と入力します。 * アプリケーションタイプとして **Regular Web Applications** を選択します。 * **Create** ボタンをクリックします。 ![Auth0 ダッシュボードのアプリケーション作成画面](https://images.ctfassets.net/23aumh6u8s0i/3HJs03fVbMD1dRZzGpcLGh/efa94e5434af3d0bc12dfd7565eae4fd/Screenshot_2025-04-07_at_1.53.58_PM.png) 次に、ユーザー認証後に呼び出し元にリダイレクトされるアプリケーションの URL であるコールバック URL を設定します。設定するために、MCP サーバーアプリケーションの **Settings** に移動し、**Application URIs** セクションの **Allowed Callback URLs** までスクロールして、次の URL を設定します。: ``` http://localhost:8789/callback ``` > *注意:* この URL はデプロイした後に変わります。 ![Auth0 ダッシュボードのアプリケーション設定にある Application URIs](https://images.ctfassets.net/23aumh6u8s0i/33JERIy2jfJoolqITnQkVz/ec5e2cc720424c80c00cc6e3c2ce39f7/jp-secure-and-deploy-remote-mcp-servers-with-auth0-and-cloudflare_app-callback.png) Auth0 ダッシュボードで **Connections** タブに移動し、デフォルトで作成される Database の **Username-Password-Authentication** が有効になっていることを確認します。有効になっていない場合は、有効にします。 次は、[Cloudflare Workers KV](https://developers.cloudflare.com/kv/) 名前空間の作成です。この名前空間は、リモート MCP サーバーと `workers-oauth-provider` が認可リクエストを処理するために使用します。 Wrangler で **KV 名前空間** を作成するには、ターミナルで次のコマンドを実行します。: ``` wrangler kv namespace create "OAUTH_KV" ``` コードエディターで Remote MCP Server プロジェクトを開き、`wrangler.jsonc` ファイル内の `` をコマンドの実行結果の値で置き換えて、保存します。: ```js //wrangler.jsonc { "kv_namespaces": [ { "binding": "OAUTH_KV", "id": "" } ] } ``` KV 名前空間を作成したので、次のステップは Wrangler の設定値を更新して、リモート MCP サーバーを Cloudflare にデプロイすることです。アプリケーションを設定するには、Auth0 ダッシュボードのアプリケーション設定からいくつかの値が必要です。 [Applications > Applications](https://manage.auth0.com/#/applications) に移動し、Remote MCP Server アプリケーションをクリックします。表示された Auth0 ドメイン、クライアント ID、クライアントシークレットをメモします。 ![Auth0 アプリケーション設定](https://images.ctfassets.net/23aumh6u8s0i/3HJs03fVbMD1dRZzGpcLGh/efa94e5434af3d0bc12dfd7565eae4fd/Screenshot_2025-04-07_at_1.53.58_PM.png) `mcp-auth0-oidc` プロジェクトのルートに `.dev.vars` ファイルを作成し、次の値を追加します。 ``` AUTH0_DOMAIN=Auth0 ドメイン (例: acme.auth0.com) AUTH0_CLIENT_ID=Auth0 で作成したアプリケーションのクライアント ID AUTH0_CLIENT_SECRET=Auth0 で作成したアプリケーションのクライアントシークレット AUTH0_AUDIENCE=urn:todos-api AUTH0_SCOPE=openid email profile offline_access read:todos NODE_ENV=development API_BASE_URL=Cloudflare にデプロイされた Todos API のドメインに https:// を付けた URL ``` ### MCP サーバーを Cloudflare にデプロイする リモート MCP サーバーを Cloudflare にデプロイするには、まず Wrangler でシークレットを設定する必要があります。これには次のコマンドを実行します。: ``` wrangler secret put AUTH0_DOMAIN wrangler secret put AUTH0_CLIENT_ID wrangler secret put AUTH0_CLIENT_SECRET wrangler secret put AUTH0_AUDIENCE wrangler secret put AUTH0_SCOPE wrangler secret put API_BASE_URL ``` シークレットが設定されたら、次のコマンドを実行して MCP サーバーを Cloudflare にデプロイします。 ``` wrangler deploy ``` MCP サーバーがデプロイされたので、Cloudflare ダッシュボードでデプロイされた MCP サーバーのドメインを確認し、Auth0 ダッシュボード内のアプリケーション設定で **Allowed Callback URLs** を更新します。 Allowed Callback URLs を変更するには、Auth0 ダッシュボードで **Applications > Applications** に移動し、**Settings** をクリックし、**Application URIs** までスクロールダウンして、次の形式の URL を追加します。 ``` https://mcp-auth0-oidc..workers.dev/callback ``` ![Auth0 Application URI 設定](https://images.ctfassets.net/23aumh6u8s0i/69X5vC9Cna1nKKvicpWTp6/79de976d5939062bc416d46037c550f6/app-urls-callback.png) これにより、ユーザーが認証した後、Todos API を呼び出すためにリモート MCP サーバーにリダイレクトして戻されます。準備ができたので、リモート MCP サーバーの動作を確認します。 ### リモート MCP サーバーの呼び出しをテストする Todos API への呼び出しをテストするには、Workers AI LLM Playground を使用します。[Cloudflare の AI Playground](https://playground.ai.cloudflare.com/) に移動し、リモート MCP サーバーの URL に接続します。: ``` https://mcp-auth0-oidc..workers.dev/sse ``` URL を MCP Servers というラベルのセクションに入力し、**Connect** をクリックします。 ![Cloudflare AI workers playground](https://images.ctfassets.net/23aumh6u8s0i/1Jwt30QY8vuTTO3ZMNTZXr/5757f0dc6a99600d8ab404eca3f97061/Screenshot_2025-04-10_at_12.33.42_PM.png) 認可フローが開始されます。アクセスを許可する必要があります。: ![MCP サーバーのアクセスリクエスト](https://images.ctfassets.net/23aumh6u8s0i/57yVFkdC5sEhBIXEICo9jo/00327fda1167ae4b61f6d64582f78934/auth-request.png) ブラウザで新しいウィンドウが開き、ユーザーは Auth0 で認証します。これにより、リモート MCP サーバーが Todos API のリソースにアクセスできるようになります。 ![Auth0 universal login](https://images.ctfassets.net/23aumh6u8s0i/MJX7hQveJh6BYaMKmIHDn/3ef06aa1a2a047c649278d9a0ee37de9/auth-ul.png) 権限が付与されると、LLM を使用して MCP サーバーにリクエストを送信し、Todos API から情報を取得できます。 ![cloudflare AI playground](https://images.ctfassets.net/23aumh6u8s0i/1sO7ZqO9aF7o0VzYEex9VZ/2aa6f63cf1bd01862dde09a0efdfe221/playground.png) Todos API は、Todo と請求情報へのアクセスを提供します。請求情報のリクエストは失敗することに注意してください。これは、LLM が権限を持つ情報に対してのみアクセスできることを示しています。 ## Claude でリモート MCP サーバーを設定 Auth0 でリモート MCP サーバーを保護し、Cloudflare にデプロイする方法を理解しましたので、お気に入りの MCP ホストに設定する方法を確認しましょう。ここでは Claude Desktop に MCP サーバーを設定します。 Claude Desktop を開き、**Settings** に移動し、**Developer** をクリックして **Edit Config** を選択します。コンピュータ上の Claude のフォルダーと `claude_desktop_config.json` という名前のファイルが表示されます。 ![Claude Desktop Config JSON ファイル](https://images.ctfassets.net/23aumh6u8s0i/4JAy6wjNRtCEVaLIUSJxDv/ebab95cd543009cac72cf1a22fb90e1e/claude-desktop-config-in-folder.png) お好みのエディターでファイルを開き、次を追加します。: ```json { "mcpServers": { "math": { "command": "npx", "args": [ "mcp-remote", "https://mcp-auth0-oidc..workers.dev/sse" ] } } } ``` ファイルを編集し、引数リスト内のリモート MCP サーバーの URL を Cloudflare にデプロイされた URL に更新してください。この設定は、`npx` コマンドを `mcp-remote` パッケージと URL をパラメータとして渡して実行する MCP サーバーを「`math`」という名前で登録します。 [`mcp-remote` パッケージ](https://www.npmjs.com/package/mcp-remote) は、Claude Desktop や Cursor のような `stdio` を利用できる MCP ホストを、デプロイしたばかりのリモート MCP サーバーに安全にアクセスするために接続する役割を担います。 ファイルを保存して Claude を再起動すると、Todo リストについて Claude にプロンプトを出せるようになります。 ![リモート MCP サーバーを使用して Todo リストを表示する Claude の画面](https://images.ctfassets.net/23aumh6u8s0i/7HE3fATATP2E1Mxr69V11J/84d1c2267567d095f4b9b5cf5a1bbadb/claude-todos-list-mcp-server-and-api.png) ## まとめ 本記事では Auth0 で MCP サーバーを保護し、サードパーティ API に接続するために必要な手順を順を追って説明しました。また、MCP サーバーを Cloudflare にデプロイする方法も学びました。MCP サーバーは Auth0 をサードパーティの IdP として使用し、AI ツールがユーザーの代わりに保護された API を呼び出すことを許可します。 リモート MCP サーバーは、LLM をより便利にし、ユーザーにとって重要な情報へのより迅速なアクセスを提供できるツールを提供します。生成 AI アプリケーションを構築されている場合は、当社の新しい製品 [Auth0 for AI Agents](http://a0.to/ai-content) を確認ください。AI エージェントが、わずか数行のコードで安全にツールやワークフローにアクセスでき、きめ細かな制御をしながらデータにアクセスできるようになります。 このデモで使用したコードを [Github](https://github.com/cloudflare/ai/tree/main/demos/remote-mcp-auth0) で確認し、ご自身で試して頂けます。 --- _本ブログには、Okta 以外のウェブサイトへのハイパーリンクが含まれています。これらのウェブサイトは第三者によって作成・維持されており、そのコンテンツについては当該第三者が単独で責任を負います。_