Authenticating against a webapi using azure b2c from an spa (angular and adal.js)

Question

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)

Answer 1

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