How to do the OAuth authentication for the MCP exposed from REST API based on Azure API Management service

Hi @Chris Bao

Thank you for reaching out to Microsoft Q&A.

The issue you’re experiencing with the Custom HTML Code widget in the Azure API Management Developer Portal is primarily due to how this widget is implemented and rendered. The Custom HTML widget is designed as a lightweight mechanism and renders the provided HTML inside an iframe. Because of this iframe behavior, after publishing the page, the widget may become difficult or impossible to select using the visual editor. As a result, you may not see the “Edit widget” option or may be unable to click on the widget at all. Although the developer portal supports editing widgets after publishing, this limitation specifically affects HTML widgets due to UI interaction constraints (iframe capturing clicks, layering issues, or portal rendering behavior). This is a known usability limitation rather than a permissions issue. [learn.microsoft.com]

Refer below points to resolve this issue or this is the workaround:

• Select the widget from the page structure (outline/tree view instead of clicking UI) In the Developer Portal editor, use the left-side hierarchy/structure panel to locate the widget. Select it from there and then click Edit widget. This bypasses the iframe click issue.
• Check and adjust parent containers or overlapping elements If the widget is placed inside a container or section, try selecting the parent container and repositioning or temporarily removing it. This can help expose the widget for selection.
• Delete and recreate the widget (if editing is blocked completely) If the widget cannot be selected or edited at all, the practical workaround is to delete it and add a new Custom HTML widget with the updated content.
• Use Custom Widgets (React/TypeScript) for advanced or editable scenarios For scenarios where you need frequent updates or better control, use a custom widget instead of the HTML widget. This approach provides proper lifecycle management and avoids iframe-related editing issues. [learn.microsoft.com]
• Try toggling the new Developer Portal UI (if available) In some cases, enabling the newer UI experience in the portal can resolve selection or rendering issues.

I think MCP on APIM just uses the normal APIM auth, and u call it with Ocp-Apim-Subscription-Key or Authorization: Bearer <token>. nothing special added for MCP.

I fixed the issue by myself.