如何通过API App暴露Azure APIM API 实现Angular应用API安全访问

前端 Angular 应用运行在用户浏览器侧，硬编码 Azure APIM 订阅密钥必然会被逆向获取，不存在前端安全存储固定密钥的方案，因此最优方案核心逻辑是完全取消前端携带固定订阅密钥的校验逻辑，替换为更安全的校验规则：

• 针对需用户登录的业务接口：优先对接 Azure AD B2C 实现公共用户身份认证，Angular 端走 OAuth2.0 授权码流（PKCE 模式）获取短期有效的访问令牌，在 APIM 侧配置 JWT 校验策略，直接验证令牌有效性即可放行，无需再校验订阅密钥。
• 针对无用户态的公共开放接口：直接在 APIM 侧关闭对应 API 的订阅密钥校验要求，补充配置 IP 限流、速率限制、SQL 注入/敏感参数拦截 等防护策略即可，避免固定密钥泄露带来的全接口风险。
• 辅助防护：Angular 打包时开启代码混淆、禁用生产环境 sourcemap，降低接口规则被逆向的概率，但所有核心安全校验必须在 APIM/后端侧实现，不可依赖前端防护逻辑。

可以通过 Azure 原生功能零改造对齐原有 API 定义，无需手动重写接口规则：

• 改动最小的方案：不需要切换服务，直接在现有 APIM 中调整对应 API 组的配置，关闭订阅密钥强制校验，配置好上述安全策略后即可直接对外暴露，接口路径、请求响应规则和原有定义100%一致，全程操作不超过5分钟。
• 迁移到 Azure API App 的方案：首先从现有 APIM 导出 OpenAPI/Swagger 定义文件，再将该文件导入到 API App 的 API 定义配置栏，系统会自动生成对齐原有规则的接口转发逻辑，适配你现有后端服务的调用规则，无需调整 Angular 端的接口请求代码。
• 轻量替代方案：如果不需要 APIM 的全量能力，也可以使用 Azure Functions 代理功能，导入上述导出的 OpenAPI 定义文件后自动生成转发规则，所有请求直接透传到原有后端服务，对外暴露的 API 与原有定义完全一致。

注意：无论使用哪种快捷方案，都必须提前配置好鉴权、限流等安全防护规则，无防护直接暴露公网 API 会导致恶意爬取、数据泄露等风险。

内容的提问来源于stack exchange，提问作者Rajesh