Search code examples
angularazure-ad-b2cmsal.js

How can I call B2C Graph API from angular?

I’m trying to understand how to call the graph API to pull back some user info using msal-angular ("@azure/msal-angular": "^0.1.4"). I have not been able to find a working example / tutorial for this.

I have set up a Azure AD B2C. Created a local account provider with username as the sign in key. I created the signup/signin flow and registered a webapp ‘b2c-app01’. For the API Permissions I gave the app ‘user.read’ permission.

I have login working with the following configuration for the msal

    MsalModule.forRoot({
      clientID: "00000000-0000-0000-0000-000000000000", // b2c-app01 in app registration
      authority: "https://b2c-app01.b2clogin.com/tfp/b2c-app01.onmicrosoft.com/B2C_1_SignInOrSignUp",
      validateAuthority: false,

Next I’m trying to access the graph API following this example https://learn.microsoft.com/en-us/azure/active-directory/develop/tutorial-v2-javascript-spa.

However, I’m not able to get pass the acquireTokenSilent call. I pass [‘user.read’] for scope, and get the following error 

        this._user = this.authService.getUser();
        let tokenResponse = await this.authService.acquireTokenSilent(
            ['user.read'],
        );
        console.log(tokenResponse);

The scope 'user.read' provided in the request is not supported.

I tried to use the identity provider url returned in the user for the authority property, but then I get a CORS error. I don’t even know if this is valid so I did not look more into the CORS error

        this._user = this.authService.getUser();
        let tokenResponse = await this.authService.acquireTokenSilent(
            ['user.read'],
            this._user.identityProvider,
            this._user,
        );
        console.log(tokenResponse);

blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource..

Any suggestions as to what I’m doing wrong or what I am missing ?

Edit:

below is the api permissions enter image description here

Solution

  • AAD B2C app registrations cannot be given permission to Graph API. Based off what you’ve said you’ve created an AAD App registration in a B2C directory.

    This is impossible “I created the signup/signin flow and registered a webapp ‘b2c-app01’. For the API Permissions I gave the app ‘user.read’ permission.”

    You mention AAD B2C, but your JS Sample is for AAD. For AAD B2C use case, return all required data in the users token. For any other graph api call, such as querying users groups, call your own API that authenticates time Graph api using client credentials against an AAD App Reg in your B2C tenant.