使用自定义小组件扩展开发人员门户

API 管理开发人员门户提供视觉编辑器和内置小组件，以便你可以自定义门户的外观并设置其样式。 但是，你可能需要使用自定义功能进一步自定义开发人员门户。 例如，你可能希望将开发人员门户与涉及添加自定义界面的支持系统集成。 本文介绍将自定义功能（如自定义小组件）添加到 API 管理开发人员门户的方法。

下表汇总了两个选项，其中包含指向更多详细信息的链接。

托管开发人员门户包含一个“自定义 HTML 代码”小组件，你可以在其中插入用于小型门户自定义的 HTML 代码。 例如，使用自定义 HTML 嵌入视频或添加窗体。 门户会将以内联框架呈现自定义小组件 (iframe)。

1. 在开发人员门户的管理界面中，切换到要在其中插入小组件的页面或部分。

2. 选择指针悬停在页面上时显示的灰色“加号”图标 (+)。

3. 在“添加小组件”窗口中，选择“自定义 HTML 代码”。

   

4. 选择“铅笔”图标以自定义小组件。

5. 输入小组件的宽度和高度（以像素为单位）。

6. 要从开发人员门户继承样式（推荐），请选择“应用开发人员门户样式设置”。

   注意

   如果未选择此设置，则嵌入元素将为纯 HTML 控件，不含开发人员门户的样式。

   

7. 将示例 HTML 代码替换为您的自定义内容。

8. 完成配置后，请关闭窗口。

9. 保存更改并重新发布门户。

对于更高级的用例，可以创建自定义小组件并将其上传到开发人员门户。 API 管理为开发人员提供了一个代码基架，用于在 React、Vue 或纯 TypeScript 中创建自定义小组件。 该基架包含所需的工具来帮助你开发小组件并将其部署到开发人员门户。

• 在本地安装 Node.JS 运行时
• 对编程和 Web 开发有一个基本的了解

1. 在开发人员门户的管理界面中，选择“自定义小组件”>“创建新的自定义小组件”。

2. 输入小组件名称并选择“技术”。 有关详细信息，请参阅本文后面部分的小组件模板。

3. 选择“创建小组件”。

4. 打开终端，导航到要保存小组件代码的位置，运行以下命令以下载代码基架：

   npx @azure/api-management-custom-widgets-scaffolder
   

5. 导航到包含小组件代码基架的新建文件夹。

   cd <name-of-widget>
   

6. 在所选代码编辑器（例如 VS Code）中打开文件夹。

7. 安装依赖项并启动项目：

   npm install 
   npm start
   

   浏览器应打开一个新选项卡，其中的开发人员门户在开发模式下连接到小组件。

   注意

   如果选项卡未打开，请执行以下操作：

   1. 确保开发服务器已启动。 为此，请检查你上一步在其中启动了服务器的控制台上的输出。 它应显示运行服务器的端口（例如 http://127.0.0.1:3001）。
   2. 在 Azure 门户中转到 API 管理服务，使用管理界面打开开发人员门户。
   3. 将 /?MS_APIM_CW_localhost_port=3001 附加到该 URL。 如果服务器在另一端口上运行，请更改端口号。

8. 实现小组件的代码，并在本地测试它。 小组件的代码位于 src 文件夹的以下子文件夹中：

   • app - 可供已发布的开发人员门户的访问者查看和交互的小组件组件的代码
   • editor - 可以在开发人员门户的管理界面中用来编辑小组件设置的小组件组件的代码

   values.ts 文件包含小组件的自定义属性（在启用后可用于编辑）的默认值和类型。

   

   使用自定义属性，可以从开发人员门户的管理用户界面调整自定义小组件的实例中的值，而无需更改代码或重新部署自定义小组件。 需要将此对象传递给某些小组件的帮助程序函数。

1. 在位于项目的根目录中的 deploy.js 文件中指定以下值：

   • resourceId - API 管理服务的资源 ID，格式如下：subscriptions/<subscription-id>/resourceGroups/<resource-group-name>/providers/Microsoft.ApiManagement/service/<api-management service-name>

   • managementApiEndpoint - Azure 管理 API 终结点（取决于环境，通常为 management.chinacloudapi.cn）

   • apiVersion - 可选，用于替代默认管理 API 版本

2. 运行以下命令：

   npm run deploy
   

   如果出现系统提示，请登录到你的 Azure 帐户。

   注意

   出现登录提示时，必须使用与 API 管理服务所在的 Azure 订阅关联的 Microsoft Entra ID 租户的成员帐户。 该帐户不能是来宾帐户或联合帐户，并且必须具有访问门户的管理界面的适当权限。

自定义小组件现已部署到开发人员门户。 使用门户的管理界面，可以在开发人员门户中的页面上添加它，并为小组件中配置的任何自定义属性设置值。

在管理界面中配置小组件后，重新发布门户以使小组件在生产中可用。

我们为可用于小组件的以下技术提供模板：

• TypeScript（纯实现，无任何框架）
• React
• Vue

所有模板都基于 TypeScript 编程语言。

React 模板包含 hooks.ts 文件中准备的自定义挂钩，并包含已建立的提供程序，用于通过具有专用 useSecrets、useValues 和 useEditorValues 挂钩的组件树共享上下文。

此 npm 包包含下述有助于开发自定义小组件的函数，并提供多种功能，其中包括在开发人员门户与小组件之间进行通信的功能：

一个返回 JSON 对象的函数，该对象包含小组件编辑器中设置的值和默认值（作为参数传递）。

Import {getValues} from "@azure/api-management-custom-widgets-tools/getValues" 
import {valuesDefault} from "./values" 
const values = getValues(valuesDefault) 

它预期用在小组件的运行时 (app) 部件中。

一个函数，其工作方式与 getValues 相同，但只返回在编辑器中设置的值。

它预期用在小组件的编辑器中，但也可用在运行时中。

接受 TypeScript 类型并返回一个函数来更新小组件值。 返回的函数采用 JSON 对象作为参数（其中包含更新的值），不返回任何内容。

import {Values} from "./values"
const onChange = buildOnChange<Values>()
onChange({fieldKey: 'newValue'})

此函数返回 JavaScript 承诺，该承诺在解析后返回与后端通信所需的数据的 JSON 对象。 token 是进行身份验证所需的。 userId 是查询特定于用户的资源所需的。 当匿名用户查看门户时，这些值可能未定义。 Secrets 对象还包含 managementApiUrl（门户后端的 URL）和 apiVersion（开发人员门户当前使用的 apiVersion）。

此函数将小组件部署到 Blob 存储。 所有模板都已在 deploy.js 文件中预配它。

默认情况下，它接受三个参数：

• serviceInformation - 有关 Azure 服务的信息：

  • resourceId - API 管理服务的资源 ID，格式如下：subscriptions/<subscription-id>/resourceGroups/<resource-group-name>/providers/Microsoft.ApiManagement/service/<api-management service-name>

  • managementApiEndpoint - Azure 管理 API 终结点（取决于环境，通常为 management.chinacloudapi.cn）

• 小组件的 ID - 小组件的名称，采用“电脑友好”格式（拉丁字母数字小写字符和短划线；Contoso widget 变为 contoso-widget）。 可以在 package.json 中的 name 键下找到它。

• fallbackConfigPath - 本地 config.msapim.json 文件的路径，例如 ./static/config.msapim.json

此函数从开发人员门户返回传递到自定义小组件的所有数据。 它包含其他可能用在在调试方案或更高级方案中的数据。 此 API 预期会更改，可能会有中断性变更。 它返回一个包含以下键的 JSON 对象：

• values - 在编辑器中设置的所有值，getEditorData 所返回的对象

• instanceId - 小组件的此实例的 ID

使用自定义属性，可以从开发人员门户的管理用户界面调整自定义小组件的代码中的值，而无需更改代码或重新部署自定义小组件。 默认情况下，定义了四个自定义属性的输入字段。 可以根据需要添加或删除其他自定义属性。

若要添加自定义属性，请执行以下操作：

1. 在 src/values.ts 文件中，向 Values 类型添加要保存的属性名称和数据类型。
2. 在同一文件中，为其添加默认值。
3. 导航到 editor.html 或 editor/index 文件（确切位置取决于所选框架），并复制现有输入或自行添加它。
4. 确保输入字段将更改的值报告给 onChange 函数，该值可以从 buildOnChange 获取。

若要使用另一个 JavaScript UI 框架和库实现小组件，需要按照以下准则自行设置项目：

• 大多数情况下，建议从 TypeScript 模板开始。
• 像在任何其他 npm 项目中一样安装依赖项。
• 如果所选框架与 Vite 生成工具不兼容，请对其进行配置，以便将已编译的文件输出到 ./dist 文件夹。 （可选）通过提供相对路径作为 deployNodeJs 函数的第四个参数来重新定义已编译文件的位置。
• 对于本地开发，当服务器运行时，必须可以在 URL localhost:<port>/config.msapim.json 上访问 config.msapim.json 文件。

开源 React 组件工具包提供了一套 npm 包脚本，可帮助你将 React 应用程序转换为自定义小组件框架，对其进行测试，并将自定义小组件部署到开发人员门户。 如果你有权访问 Azure OpenAI 服务，该工具包还可以根据你提供的文本说明创建小组件。

目前，可以通过两种方式使用工具包来部署自定义小组件：

• 手动安装工具包并在本地运行 npm 包脚本。 按顺序运行脚本，以创建、测试 React 组件，并将其作为自定义小组件部署到开发人员门户。
• 使用 Azure Developer CLI (azd) 模板进行端到端部署。 azd 模板部署 Azure API 管理实例和 Azure OpenAI 实例。 预配资源后，交互式脚本可帮助你根据提供的说明创建、测试自定义小组件并将其部署到开发人员门户。

详细了解开发人员门户：

• Azure API 管理开发人员门户概述
• 常见问题解答
• Azure API 管理服务的开发人员门户自定义小组件的基架
• 适用于 Azure API 管理服务开发人员门户自定义小组件的工具