请求推荐：从部署在Azure服务的Angular应用安全调用Azure Function的方案

针对部署在Azure App Service或Azure Storage静态网站的Angular应用，推荐一套AAD身份认证+API Management管控+MSAL.js令牌管理的组合方案来安全调用Azure Function，具体实现细节如下：

1. 配置Azure Active Directory（AAD）身份认证 #

• 为Azure Function注册独立的AAD应用，设置令牌受众为后续集成的APIM地址或Function的客户端ID，确保仅持有效AAD令牌的请求能访问Function。
• 为Angular应用注册另一款AAD应用，配置对应App Service/静态网站域名的重定向URI，并在AAD中为该应用授予访问Azure Function的API权限。

2. 集成Azure API Management（APIM）做额外管控 #

• 将Azure Function导入APIM，以APIM作为请求转发中间层，实现流量控制、速率限制、访问日志记录等额外安全管控能力。
• 在APIM中配置AAD身份验证策略，过滤未携带有效令牌的请求；同时可设置请求转换、头部标准化规则，规范令牌传递逻辑，还能隐藏Function的原始访问地址，降低暴露风险。

3. Angular端用MSAL.js安全获取并传递令牌 #

• 在Angular项目中安装依赖包：npm install @azure/msal-angular @azure/msal-browser
• 在app.module.ts中导入并配置MsalModule，填入Angular应用的AAD客户端ID、租户ID等信息，指定登录跳转路径。
• 在需要调用Function的组件或服务中，注入MsalService，调用acquireTokenSilent（静默获取）或acquireTokenPopup（弹窗获取）方法获取访问令牌。
• 发起HTTP请求时，将令牌放入请求头的Authorization字段，格式为Bearer {token}，通过APIM地址转发请求到Azure Function。

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