Geek Answers Handbook

Authentication with webapi using azure b2c from spa (angular and adal.js)

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

My AD is an azure tenant b2c.

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

My setup: Webapi and the web site have the same client interface (this seems to work just like that) SPA has its own client, because otherwise I get "api version not supported" errors when trying to log in. I have included oauth2AllowImplicitFlow for all applications, granted application permissions from the spa on webapi. Cors is included in Webapi and SPA.

I can even get the token after the login is complete, but when I try to call the api, I get access to this request.

Should this work like that? I could not find an example of how to use b2c with a spa and api running on different servers.

Thank you in advance

Peter

+6
source share
3 answers

This is not officially supported by Microsoft, but with some changes to the experimental branch on github azure-activedirectory-library-for-js you can make it work.

Fix logout url to vauto endpoint of the oauth2 protocol with the policy setting in the logOut method for adal.js on 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 the _createUser adal.js. method The username is used in the process of updating the token, correct it by adding three lines:

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

Finally, in adal-angular.js on line 146, purchaseTokenSilent is called with the wrong type parameter. This method accepts only the type of the array as the scopes parameter, corrects it by placing clientId in the array:

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

I already pulled out a github request about this, you can use it as a link.

When you initialize the adal provider in angular, put your b2c login policy in extraQueryParameter as follows:

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

This is not currently supported .

Single Page Applications (Javascript)

Many modern applications have a single-page front-end (SPA) application, written primarily in Javascript and often using SPAs such as AngularJS, Ember.js, Durandal, etc. This stream is not yet available in Azure AD B2C Preview.

+2
source

It looks like the sample script for the AzureAD B2C script for SPA was just released on github. See here here .

"The example shows how to create a web application using Hello.js that performs identity management using Azure AD B2C. The application is a simple web application that performs login, registration, and checkout functions with the -in and signIn-signUp signs , and also edit the profile using the EditProfile policy. "

NOTE. During this answer, functionality is still in the "preview"

+2
source

More articles:


All Articles