Angular 4/5 login with microsoft online account without creating a azure ad b2c app and communicate with Web API (.net core 2.0)

Question

I have created an Angular 5 app and a Web API with Asp.net core 2.0. Users are only allowed to login with their personal microsoft account. The requirement is as follows.

1. When the users enter the angular app url, they should be redirected to Microsoft's login page.
2. When they login successfully, the angular app should recieve an access token and the user's basic profile info.
3. The app should then communicate with the Web API with the recieved access token and the web api should authenticate the token as valid, and respond back with data.

So far I have done the following.

• created an app in microsoft app registration portal, obtained Application Id.
• Added web platform and set redirect url as http://localhost:4200 , allowing implicit flow.

• Added web api platform and obtained Application ID URI - api://{application Id}

• from my angular app, redirect to the following url url = "https://login.microsoftonline.com/common/oauth2/v2.0/authorize?" +"client_id=fa******c&" +"response_type=id_token+token&" +"redirect_uri=http://localhost:4200&" +"scope=openid api://fa******c&" +"response_mode=fragment&" +"state=12345&" +"nonce=678910"; url = "https://login.microsoftonline.com/common/oauth2/v2.0/authorize?" +"client_id=fa******c&" +"response_type=id_token+token&" +"redirect_uri=http://localhost:4200&" +"scope=openid api://fa******c&" +"response_mode=fragment&" +"state=12345&" +"nonce=678910";

• In the web api startup.cs, adding the following middleware.

   services.AddAuthentication(options => { options.DefaultScheme = JwtBearerDefaults.AuthenticationScheme; }).AddJwtBearer(jwtOptions => { jwtOptions.Authority = $"https://login.microsoftonline.com/common/v2.0"; jwtOptions.Audience = "fa*****c"; }); 

and added app.UseAuthentication() in Configure method and the [Authorize] attribute in controler actions.

The app properly redirects to the Microsoft login page and gives me an access_token to the redirect url. But when i use this token to authenticate with the web api, I get the 401 unauthorised response. I have taken the expiration time into consideration as well. Am I missing something here?

(Any other method to do this without the use of azure ad b2c are welcome) Thanks in advance. (I followed this link https://docs.microsoft.com/en-us/azure/active-directory/develop/active-directory-v2-protocols-implicit )

Answer 1

The access code returned from Microsoft account page is not the token for accessing the web api. Instead, it is the code to retrieve the user info from Azure AD. The front end should used it to request the token from the web api service(resource server).