How can I call B2C Graph API from angular?

Question

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://docs.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

Answer 1

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.

Answer 2

Have you tried prepending the User.Read scope with the graph URL, ie https://graph.microsoft.com/User.Read ? Just a stab in the dark...

The scenario of using a B2C app to call Microsoft Graph is described by this article:

https://docs.microsoft.com/en-us/azure/active-directory-b2c/microsoft-graph-get-started?tabs=applications

The OAUTH scenario implemented by that article is the client_credentials flow , also known as service account, or a daemon. I think the primary use case they're covering is to use Azure DevOps to maintain identity policies, and authenticating a DevOps deployment pipeline through to Graph to automate policy uploads.

Ideally other user-interactive oauth flows could be supported, eg on-behalf-of , or implicit grant flows.