如何在 Angular v17 独立版中实现 Azure AD B2C 登录

Question

我能够使用此文档：将我的登录实现到非独立项目中。对于独立版本，我使用了此示例。我几乎没有尝试正确配置应用程序来连接到我的 B2C 租户。

我用这样的东西替换了environmet.dev.ts：

export const environment = {
    production: false,
    msalConfig: {
        auth: {
            clientId: 'b5c2e510-4a17-4feb-b219-e55aa5b74144',
            authority: 'https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/b2c_1_susi_reset_v2'
        }
    },
    apiConfig: {
        scopes: ['user.read'],
        uri: 'https://graph.microsoft.com/v1.0/me'
    }
};

当我尝试登录时出现此错误：

ClientAuthError: endpoints_resolution_error: Endpoints cannot be resolved

Answer 1

我关注了这个 GitHub 存储库，并在 authority 中使用了下面的 URL。我成功登录B2C租户了。

authority: 'https://login.microsoftonline.com/common'

代码：

环境.dev.ts：

export const environment = {
    production: true,
    msalConfig: {
        auth: {
            clientId: '<client_ID>',
            authority: 'https://login.microsoftonline.com/common'
        }
    },
    apiConfig: {
        scopes: ['user.read'],
        uri: 'https://graph.microsoft.com/v1.0/me'
    }
};

我在 Azure B2C 应用程序的身份验证中添加了下面的输出 URL 作为单页应用程序，如下所示。

http://localhost:4200/

输出：

以下独立Angular项目运行成功，如下所示。

浏览器输出：

如以下步骤所示，我成功登录并退出了 B2C 租户。