使用来自 spa 的 azure b2c (angular 和 adal.js) 对 webapi 进行身份验证答案

【问题标题】：Authenticating against a webapi using azure b2c from an spa (angular and adal.js)使用来自 spa 的 azure b2c (angular 和 adal.js) 对 webapi 进行身份验证
【发布时间】：2015-11-28 18:39:50
【问题描述】：

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

我的 AD 是一个 azure b2c 预览租户。

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

我的设置： Webapi 和网站共享相同的客户端 ID（似乎只能以这种方式工作） SPA 有自己的客户端 ID，否则我在尝试登录时会收到“不支持 api 版本”错误。我为所有应用程序启用了 oauth2AllowImplicitFlow，授予了从 spa 到 webapi 的应用程序权限。在 Webapi 和 SPA 上启用了 Cors。

我什至似乎能够在完成登录后获得一个令牌，但是当我尝试调用我的 api 时，我得到了一个拒绝此请求的访问。

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

提前致谢

彼得

【问题讨论】：

自 2016 年 11 月 28 日起，此功能可用。看到这个：feedback.azure.com/forums/169401-azure-active-directory/…

标签： angularjs azure asp.net-web-api2 adal

【解决方案1】：

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

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

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

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

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);

【讨论】：

【解决方案2】：

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

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

注意：在回答此问题时，该功能仍处于“预览”状态

【讨论】：

【解决方案3】：

这是not currently supported。

单页应用程序 (Javascript)

许多现代应用程序都有单页应用程序 (SPA) 前端主要用 Javascript 编写，经常使用 SPA AngularJS、Ember.js、Durandal 等框架。这个流程是 Azure AD B2C 预览版中尚不可用。

【讨论】：