Azure active directory 如何配置MSAL以支持AAD、Angular 7+；，Azure Funcs

我想了解如何配置MSAL和相关工件以促进以下配置

Azure Function App
Platform features
    Authentication / Authorization
        App Service Authentication: On
        Action to take when request is not authenticated
            Log in with Azure Active Directory
        Authentication Providers
            Azure Active Directory Configured (Express: Existing App)
            Advanced Settings Token Store
            ALLOWED EXTERNAL REDIRECT URLS
                Link to static website of storage container where Angular site is deployed
                E.g., https://<storagecontainer>.z5.web.core.windows.net/
    CORS
    ALLOWED ORIGINS
        https://<storagecontainer>.z5.web.core.windows.net/
        http://localhost:4200
Function Signatures
    `public static async Task<IActionResult> Function1([HttpTrigger(AuthorizationLevel.Function, "get", "post", "options", Route = null)] HttpRequest httpRequest, ILogger log) {`

• 前端Angular 7+网站/应用程序发布到Azure存储帐户，并作为静态网站使用
• 用于在Cosmos DB数据库上执行CRUD操作的后端Azure函数API项目
• Angular网站前端和Azure Functions API后端应仅限于Azure Active Directory中的个人

我试图通过研究这个演示项目来了解如何为我的预期用例配置MSAL:。不幸的是，该项目引用的是一个不再运行的API后端站点。并且后端位不包括在存储库中

用于js\lib\msal angular\samples\MSALAngularDemoApp的演示项目

msal microsoft身份验证库

无法正常工作。登录尝试失败。一旦遇到

Uncaught（承诺中）：AADSTS650052:应用程序需要访问服务（\”api://a88bb933-319c-41b5-9f04-eff36d985612\）您的组织尚未订阅或启用。

在我当前的配置中，当MSAL尝试发出以下形式的请求时，我在浏览器中遇到请求取消：

所以我显然至少做错了一件事。以下是我的配置摘要。但是，与其尝试调试我的配置，不如更容易（更有效）地描述建立工作配置所需的所有步骤

Azure Function App
Platform features
    Authentication / Authorization
        App Service Authentication: On
        Action to take when request is not authenticated
            Log in with Azure Active Directory
        Authentication Providers
            Azure Active Directory Configured (Express: Existing App)
            Advanced Settings Token Store
            ALLOWED EXTERNAL REDIRECT URLS
                Link to static website of storage container where Angular site is deployed
                E.g., https://<storagecontainer>.z5.web.core.windows.net/
    CORS
    ALLOWED ORIGINS
        https://<storagecontainer>.z5.web.core.windows.net/
        http://localhost:4200
Function Signatures
    `public static async Task<IActionResult> Function1([HttpTrigger(AuthorizationLevel.Function, "get", "post", "options", Route = null)] HttpRequest httpRequest, ILogger log) {`

Azure函数应用程序
平台特征
认证/授权
应用程序服务身份验证：打开
请求未通过身份验证时要采取的操作
使用Azure Active Directory登录
身份验证提供者
已配置Azure Active Directory（Express:现有应用程序）
高级设置令牌存储
允许的外部重定向URL
链接到部署Angular站点的存储容器的静态网站
例如。，https://.z5.web.core.windows.net/
科尔斯
允许的来源
https://.z5.web.core.windows.net/
http://localhost:4200
函数签名
`公共静态异步任务函数1（[HttpTrigger（AuthorizationLevel.Function，“get”，“post”，“options”，Route=null）]HttpRequest HttpRequest，ILogger日志）{`

我使用

adal Angular

而不是

msal Angular

（msal.js）使用Angular+AZ Storage静态网站+AZ Funcs后端获得AAD身份验证。我适应了Angular 7.2。为了与RxJs 6.3兼容，我使用了

@auth0/Angular jwt

而不是

angular2 jwt

。听起来对我来说是个不错的答案@CalvinDale