1

Summary

I try to implement Azure AD B2C authentication in our project. We have a react Frontend and a .net core Backend (REST API's).

How it should be:

  1. Open Frontend -> Redirect to microsoft b2c site (works)
  2. Enter credential and get the token from Azure B2c (works)
  3. Redirect to our Frontend (works)
  4. Call a REST API on the Backend (works) I can see the token in the HttpContext Header (see Link "Token in Header") so the token will be delivered from our frontend to the backend properly. Token in Header
  5. Gets the Identity and claims information out of the httpContext. (doesn't work). -> The user is not set property, no Identity, no claims, nothing (see Link "User Identity/Claims") User Identity/Claims

This my Startup.cs configuration. -> This is the example from Microsoft on github with b2c configuration.

            {
              // This lambda determines whether user consent for non-essential cookies is needed for a given request.
              options.CheckConsentNeeded = context => true;
              options.MinimumSameSitePolicy = SameSiteMode.Unspecified;
              // Handling SameSite cookie according to https://learn.microsoft.com/en-us/aspnet/core/security/samesite?view=aspnetcore-3.1
              options.HandleSameSiteCookieCompatibility();
            });

            // Configuration to sign-in users with Azure AD B2C
            services.AddMicrosoftIdentityWebAppAuthentication(Configuration, "AzureAdB2C");
            services.AddControllers();

            //Configuring appsettings section AzureAdB2C, into IOptions
            services.AddOptions();
            services.Configure<OpenIdConnectOptions>(Configuration.GetSection("AzureAdB2C"));

This is my token which I get from Azure AD B2c. (see Link "Token") Token

This is my application setting (see Link "Settings") Settings

I also tried this -> Azure AD B2C Token returns name but User.Identity.Name is null But doesn't work.

Can Some tell me what I am doing wrong? Why is the User Identiy/Claims always null?

React code for axios calls handling. Adding the token to the header:

export function buildHTTPHeaders(config: AxiosConfig) {
    const headers: { [key: string]: string } = {
        Accept: CONTENT_TYPE,
        'Content-Type': CONTENT_TYPE,
    };

    const apiToken = sessionStorage.getItem('msal.idtoken');

    const auth = apiToken ? `Bearer ${apiToken}` : config.authorization;
    if (auth) {
        headers['Authorization'] = auth;
    }

    return headers;
}

export const getApiBaseURL = () => temporaryStaticConfig.API_BASE_PATH;

export function getAxios(config: AxiosConfig = { throwNotFoundException: false }) {
    const { dispatch, getState } = store;

    const instance = Axios.create({
        validateStatus: validateStatus(dispatch, getState),
        baseURL: getApiBaseURL(),
        headers: buildHTTPHeaders(config),
    });
    instance.interceptors.response.use(transformNotFound(config.throwNotFoundException));

    return instance;
}
Infinity
  • 11
  • 2
  • Can you share the react code that makes a call to backend .net api to pass the token? Also, are you using userflow or custom policy in b2c? – Razi Sep 02 '20 at 15:00
  • Of course, I added the react code and we are using userflow in b2c. – Infinity Sep 03 '20 at 07:37
  • @Infinity According to the code you provide, I think you use `id_token` to call the api, please use the access token to call the api. – Jim Xu Sep 03 '20 at 08:53
  • @JimXu We compared the accessToken and the idToken, but they are the same, ist that normal? – Infinity Sep 03 '20 at 12:52
  • @Infinity accessToken and idToken are different. Idtoken is used to validate that a user is who they claim to be and get additional useful information about them. AccessToken is used to enable clients to securely call protected APIs. And they have different claims : https://learn.microsoft.com/en-us/azure/active-directory/develop/access-tokens and https://learn.microsoft.com/en-us/azure/active-directory/develop/id-tokens – Jim Xu Sep 03 '20 at 13:00
  • @JimXu I'm aware of that, but why do we get from Azure AD B2C the exact same token. We compared the idToken and the AccesssToken and they are excactly the same, that cannot be right. There are a bunch of post on the web, who have the same. – Infinity Sep 04 '20 at 06:38
  • COuld you please tell me how you get token in your react application? – Jim Xu Sep 04 '20 at 07:08
  • If you want to project the api application, in api application we should use `services.AddMicrosoftIdentityWebApiAuthentication(Configuration, "AzureAdB2C");` to integrate b2c auth. – Jim Xu Sep 07 '20 at 01:45

0 Answers0