Angular 应用的 msal.service 文件中的 b2cscopes 数组究竟应该添加什么？

Question

我正在尝试为我的 Angular 应用程序使用 Azure AD B2C 身份验证，该应用程序在后端使用 ASP.NET 核心网络 api。我创建了一个新的 Azure AD B2C 租户并向租户注册了 angular 和 Web api 应用程序。

向租户注册的 Web api 应用程序的配置如下图所示。

我在 Angular 应用程序中添加了所需的 msal 代码。在 msal.service.ts 文件中，有一个 b2cscopes 数组，我在其中添加了上图中显示的 App ID URI，即“https://PCEFTPOSB2CTesting.onmicrosoft.com/api/”。当我运行应用程序在 'login' 函数内失败时，如下图所示。错误是 无法读取未定义的属性 'then' 在 MSALService.login (msal.service.ts:26)

我不确定要在 b2cscopes 数组中添加什么。请帮我解决这个问题。

Answer 1

更新答案：

b2cscopes 应该是在 Azure AD B2C 中注册的应用程序中的已发布范围。

这是我的应用程序发布范围：

所以，b2cScopes 的值应该是这样的：

 b2cScopes: ["<your App ID URI>/<SCOPE>"]

示例：

b2cScopes: ["https://mydomian.onmicrosoft.com/api/demo.read"]

转到 Azure 门户检查应用程序的发布范围，然后在 b2cscopes 的末尾添加 <SCOPE>。

另外，根据你的错误，你需要知道如何在msal.service.ts中定义login。这是一个示例：

public login(): void {
   var _this = this;
    this.clientApplication.loginPopup(this.tenantConfig.b2cScopes).then(function (idToken: any) {
        _this.clientApplication.acquireTokenSilent(_this.tenantConfig.b2cScopes).then(
            function (accessToken: any) {
                _this.access_token = accessToken;
            }, function (error: any) {
                _this.clientApplication.acquireTokenPopup(_this.tenantConfig.b2cScopes).then(
                    function (accessToken: any) {
                        _this.access_token = accessToken;
                    }, function (error: any) {
                        bootbox.alert("Error acquiring the popup:\n" + error);
                    });
            })
    }, function (error: any) {
        bootbox.alert("Error during login:\n" + error);
    });
}

在 this link 中查看有关此示例的更多详细信息。

Angular 应用的 msal.service 文件中的 b2cscopes 数组究竟应该添加什么？

What exactly should be added in the b2cscopes array in msal.service file for Angular app?

angular

azure-active-directory

azure-ad-b2c

msal