angularjs - 使用 spa 中的 azure b2c 对 webapi 进行身份验证(Angular 和 adal.js)

Question

我正在尝试验证我的 SPA(angular.js 和 adal.js(类似于 https://github.com/Azure-Samples/active-directory-angularjs-singlepageapp-dotnet-webapi示例)

我的 AD 是 azure b2c 预览租户。

我可以从我的网站成功登录到我的 webapi，但不能通过 Angular 从 JS SPA 登录。

我的设置:Webapi 和 Website 共享相同的 clientid (似乎只能以这种方式工作)SPA 有自己的 clientid，否则我在尝试登录时会收到“api 版本不支持”错误。我已为所有应用程序启用 oauth2AllowImplicitFlow，并授予从 spa 到 webapi 的应用程序权限。Cors 在 Webapi 和 SPA 上启用。

我什至似乎能够在完成登录后获得 token ，但是当我尝试调用我的 api 时，我的请求被拒绝。

这应该是这样的吗？我找不到如何将 b2c 与 spa 和在不同服务器上运行的 api 一起使用的示例。

提前致谢

彼得

Answer 1

官方不支持微软，但对github上的实验分支做了一些修改 azure-activedirectory-library-for-js你可以让它工作。

使用 adal.js 第 546 行的 logOut 方法中的策略参数将注销 URL 修复为 oauth2 协议(protocol)的 v2.0 端点:

var urlNavigate = this.instance + tenant + '/oauth2/v2.0/logout?' + logout + (this.config.extraQueryParameter ? '&' + this.config.extraQueryParameter : '');

用户名属性从未在 adal.js 的 _createUser 方法中设置。用户名用于更新 token 过程，通过添加以下三行来修复它:

if (parsedJson.hasOwnProperty('emails')) {
    user.userName = parsedJson.emails[0];
}

最后，在 adal-angular.js 的第 146 行，使用错误的类型参数调用 acquireTokenSilent。此方法仅接受数组类型作为范围参数，通过将 clientId 放入数组来修复它:

_adal.acquireTokenSilent([_adal.config.clientId], null, function (error, tokenOut) {

我已经在 github 上拉取了一个请求关于这一点，你可以作为引用。

当您在 Angular 上初始化 adal 提供程序时，请将您的 B2C 登录策略放入 extraQueryParameter 中，如下所示:

adalProvider.init({
    tenant: 'tenant.onmicrosoft.com',
    clientId: 'clientid',
    extraQueryParameter: "p=B2C_1_SignIn"
}, $httpProvider);