使用spa中的azure b2c对webapi进行身份验证（angular和adal.js）

Question

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

我的广告是一个天蓝色的b2c预览租户。

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

我的设置：Webapi和网站共享相同的clientid（似乎只是这样工作）SPA有自己的clientid，因为否则我在尝试登录时得到“api版本不支持”错误。我为所有应用程序启用了oauth2AllowImplicitFlow ，授予从spa到webapi的应用程序权限。 Coap在Webapi和SPA上启用。

我甚至似乎能够在完成登录后获得令牌，但是当我尝试呼叫我的api时，我得到了拒绝此请求的访问权限。

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

提前致谢

彼得

Answer 1

官方说它不受微软的支持，但是对github azure-activedirectory-library-for-js的实验分支进行了一些修改，你可以让它运行起来。

使用adal.js的logOut方法中第546行的策略参数，将logout url修复为oauth2协议的v2.0端点：

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

在adal.js的方法_createUser中永远不会设置username属性。 用户名用于续订令牌过程，通过添加以下三行来修复它：

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

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

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

我已经在github上提出了关于此的请求，您可以将其用作参考。

当您在角度上初始化adal提供程序时，将您的b2c登录策略放在extraQueryParameter中，如下所示：

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

Answer 2

看起来像SPA的AzureAD B2C场景示例代码刚刚在github上发布。 在这里看到它。

“该示例演示了如何使用Hello.js构建Web应用程序，该应用程序使用Azure AD B2C执行身份管理。该应用程序是一个简单的Web应用程序，可通过登录和登录执行登录，注册和注销功能。 signIn-signUp策略并使用EditProfile Policy编辑配置文件。“

注意：在此答复时，功能仍处于“预览”状态

Answer 3

目前不支持此功能。

单页应用程序（Javascript）

许多现代应用程序都有一个单页应用程序（SPA）前端，主要使用Javascript编写，并且经常使用SPA框架，如AngularJS，Ember.js，Durandal等。此流程尚未在Azure AD B2C预览中提供。