1

I am using MSAL for JavaScript in a react app to authenticate against Azure AD. I am able to successfully authenticate user and get id token and access token. But the retrieved access token cannot access the API that is secured with Azure AD.

Everything is configured find on Azure AD side as I can use the retrieved access token to talk to the API using a dotnet core web app.

The difference between dotnet core app and react app is the "resource" attribute. I am not sure how to include that in the request with MSAL.

My React Code:

userAgentApplication = new UserAgentApplication(
    "<clientid>",
    "<azureAdUrl>",
    this.authCallback,
    { redirectUri: "http://localhost:3000/", cacheLocation: "localStorage" }
  );

  authCallback(errorDesc, token, error, tokenType) {
    if (token) console.log(token);
  }


login() {
    this.userAgentApplication.loginRedirect().then(function(idToken) {

      this.userAgentApplication.acquireTokenSilent().then(
        function(accessToken) {
          console.log('Access Token: ' + accessToken);
        }
      );
    });
  }

With a dotnet core app, I am using same configurations as both URL's configured in Azure AD app with one addition.

.AddOpenIdConnect(o =>
                {
                    ....
                    o.Resource = "GUID of the API";
                });

I am not sending this resource parameter with MSAL.Not sure how to send that and if that is that is the problem.

Any help is appreciated.

user1868744
  • 963
  • 1
  • 13
  • 27
  • I took me awhile to understand the value of scopes in `msal.js`. Are you using Fiddler or equivalent to capture your traffic? Postman is great to confirm requests before adding to code. https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-core/README.md -- – DeanB_Develop Nov 08 '18 at 12:29

1 Answers1

3

MSAL uses the notion of scopes, not resources. My impression reading your question is that this is a v1 Web API (registered with the App registration blade in the Azure portal ? if that's the case the scope for your resource is probably o.Resource+"/user_impersonation"

if it's a v2.0 API (registered with apps.dev.microsoft.com) or the Azure portal but with the New Application registration (Preview), then the scope is provided at registration

For an ASP.NET Core application you might want to have a look at the following sample: https://github.com/Azure-Samples/active-directory-aspnetcore-webapp-openidconnect-v2, and probably this branch aspnetcore2-2-signInAndCallGraph

Jean-Marc Prieur
  • 1,553
  • 11
  • 11
  • 2
    yes, it is registered as v1 web api. I tried using scope as /user_impersonation. I can see that consent screen now includes the API access, but still the api call with the token do not work. I delete my Azure Apps and recreted them again, just to make sure, now the access_token from my dotnet app is also not working. May be some issue with how I setup the app, but couldn't figure out. – user1868744 Nov 08 '18 at 19:16
  • I was able to make my .net core app to work but not the react app. Only difference I noted is that the .net core app is using client_secret to get the access_token where are react app is not. I do not want to use the secret. – user1868744 Nov 13 '18 at 05:45