0

I have been trying to migrate a web app from Flask to react, and I had trouble getting a valid access token. In Flask, I used adal and had following codes:

authority_host_uri = 'https://login.microsoftonline.com'
tenant = '<my tenant id>'
authority_uri = authority_host_uri + '/' + tenant
resource_uri = 'https://management.core.windows.net/'
client_id = '<my client id>'
client_secret = '<my client secret>'
context = adal.AuthenticationContext(authority_uri, api_version=None)
mgmt_token = context.acquire_token_with_client_credentials(resource_uri, client_id, client_secret)

and the response was 

{'tokenType': 'Bearer',
 'expiresIn': 3599,
 'expiresOn': '2020-05-27 18:22:07.128189',
 'resource': 'https://management.core.windows.net/',
 'accessToken':'<the access token that was needed>'
 'isMRRT': True,
 '_clientId': '<client id info>',
 '_authority': '<authority above>'}

However, while I was trying to implement the same thing in msal in React, the access token that I got from 

const tokenRequest = {
    scopes: [clientId + "/user_impersonation"]
};    
const response = await myMSALObj.acquireTokenSilent(tokenRequest)

was not valid, like it will get a 403 error from Azure catalog API, as the access token I got from Flask worked just fine. Are there different types of access token or is it because of the scoping? Is it possible to do the exact same thing as adal did in Flask (like no need to specify the scope, just using client secret to get the right access key? )

Eric Cai
  • 83
  • 2
  • 8
  • Can you share more of your final solution? I have a daemon client that is written in REACT. I want to get a token with the client secret to use with future calls to my secure WEBAPI. – Bobby Ortiz Feb 13 '21 at 18:09
  • @BobbyOrtiz hi, so what happened was that we are not supposed to store client secret in react... and what I did was I added a middleware by flask, and when the react app is trying to retrieve the token it can call the middleware instead – Eric Cai Feb 18 '21 at 19:13
  • I will try something similar. Thanks – Bobby Ortiz Feb 19 '21 at 21:08
  • Thanks. Your experience helped me find a similar solution to my issue. Here is a link to my post. https://stackoverflow.com/questions/66188406/react-application-to-call-secure-azure-webapi-service-no-users – Bobby Ortiz Feb 22 '21 at 14:04
  • @BobbyOrtiz of course man – Eric Cai Feb 24 '21 at 23:05

1 Answers1

2

The scope is not correct. As you want to access this resource https://management.core.windows.net/

The scope should be:

scopes: ["https://management.core.windows.net/.default"]

Reference:

https://learn.microsoft.com/en-us/azure/active-directory/develop/msal-v1-app-scopes#scopes-to-request-access-to-all-the-permissions-of-a-v10-application

This is due to insufficient permissions, and you grant the administrator consent in accordance with the following procedure:

enter image description here

enter image description here

You can also obtain administrator consent through browser interaction:

https://login.microsoftonline.com/{tenant}/adminconsent?client_id={your-client_id}&state=12345&redirect_uri={your-redirect_uri}

enter image description here

Carl Zhao
  • 8,543
  • 2
  • 11
  • 19
  • Hi Carl, thanks for your reply. I have made the changes and however, this error message occurred: `AADSTS65001: The user or administrator has not consented to use the application with ID '' named ''. Send an interactive authorization request for this user and resource.` It seems to be a privilege issue - is there a way that we can get the same level of privileges by using client secret? – Eric Cai May 28 '20 at 03:49
  • @EricCai Hi,Based on your question I updated the answer. – Carl Zhao May 28 '20 at 07:27
  • Hi Carl! Thanks, that is so cool! (I need to raise a ticket to get the organization admin's approval) Sorry just another quick question, is it possible to get access token with the whole app as a client using client secret on MSAL.js in React only? – Eric Cai May 28 '20 at 22:01
  • @EricCai Is your application a single-page application? – Carl Zhao May 29 '20 at 02:06
  • Yes, only in react, and all the information was pulled from Azure data catalog API and Azure AD! – Eric Cai May 29 '20 at 14:07
  • @EricCai It is recommended that single-page applications use implicit flow, which is user-interactive, so you cannot use the client secret to obtain the access token of the entire application as the client, refer to this: https://learn.microsoft.com/en-us/azure/active-directory/develop/v2-oauth2-implicit-grant-flow – Carl Zhao Jun 01 '20 at 10:45
  • Got it! Thanks for your patience!! – Eric Cai Jun 02 '20 at 15:51