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)

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

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

Answer 2

Looks like an AzureAD B2C scenario sample code for SPA was just released on github. See it here.

"The sample shows how to build a web application using Hello.js that performs identity management with Azure AD B2C. The app is a simple web application that performs sign-in, sign-up, and sign-out functions with sign-in and signIn-signUp policies and also edit profile using EditProfile Policy."

NOTE: At the time of this answer the functionality is still in "preview"

Answer 3

This is not currently supported.

Single Page Applications (Javascript)

Many modern applications have a Single Page Application (SPA) front-end written primarily in Javascript and often using a SPA frameworks such as AngularJS, Ember.js, Durandal, etc. This flow is not yet available in Azure AD B2C preview.