使用Spa中的Azure B2c针对Webapi进行身份验证（Angular和adal.js） [英] Authenticating against a webapi using azure b2c from an spa (angular and adal.js)

问题描述

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

我的广告是azure b2c预览租户。

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

我的设置：
Webapi和网站共享相同的clientid（似乎只能这样工作）
SPA有自己的clientid，
我为所有应用程序启用了oauth2AllowImplicitFlow，并授予了从spa到webapi的应用程序权限。
Cors在Webapi上启用，并且

完成登录后，我似乎还能够获得令牌，但是当我尝试调用我的api时，我获得了访问权限

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

预先感谢

Peter

解决方案

Microsoft官方不支持，但对github azure-activedirectory-library-for-js 您可以使其正常运行。 p>

在546行使用adal.js的logOut方法中的策略参数将注销URL固定到oauth2协议的v2.0端点：

  var urlNavigate = this.instance +租户+'/oauth2/v2.0/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类型参数错误。此方法仅接受数组类型作为范围参数，可通过将clientId放入数组中来进行修复：

  _adal.acquireTokenSilent（[_ adal.config .clientId]，null，函数（错误，tokenOut）{
  

我已经在 github ，您可以将其用作参考。

当您在angular上初始化adal provider时，将b2c登录策略放在extraQueryParameter中，如下所示：

  adalProvider.init（{
 tenant：'tenant.onmicrosoft.com'，
 clientId：'clientid'，
 extraQueryParameter： p = B2C_1_SignIn 
}，$ httpProvider）; 
  

I'm trying to authenticate my SPA (angular.js and adal.js (similar to the https://github.com/Azure-Samples/active-directory-angularjs-singlepageapp-dotnet-webapi example)

My AD is a azure b2c preview tenant.

I can successfully log in to my webapi from my Website, but not from the JS SPA via angular.

My Setup: Webapi and Website share the same clientid (does only seem to work this way) The SPA has its own clientid, because otherwise i get "api version not supported" errors when trying to log in. I have enabled oauth2AllowImplicitFlow for all applications, granted application permissions from the spa to the webapi. Cors is enabled on the Webapi and the SPA.

I even seem to be able to get a token after completing the login, but when i try to call my api, i get an access denied for this request.

Is this supposed to work this way? I could not find an example of how to use b2c together with a spa and the api running on different servers.

Thanks in advance

Peter

解决方案

Officially it's not supported by Microsoft, but with some modifications of experimental branch on github azure-activedirectory-library-for-js you can get it working.

Fix logout url to v2.0 endpoint of oauth2 protocol with the policy parameter in the logOut method of adal.js at line 546:

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

The username property is never set in method _createUser of adal.js. The username is used in renew token process, fix it by adding this three lines:

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

Finally, in adal-angular.js at line 146, acquireTokenSilent is called with wrong type parameter. This method accept only array type as scopes parameter, fix it by placing clientId in array:

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

I already pulled a request on github about this, you can use it as reference.

When you initialize adal provider on angular put your b2c sign in policy in extraQueryParameter like this:

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

这篇关于使用Spa中的Azure B2c针对Webapi进行身份验证（Angular和adal.js）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！