CODEWITHSUNDEEP
reactjsazure-active-directoryaxiosadalazure-api-management
opticyclic
opticyclic

Reputation: 8136

How Do I Call Azure API Management From React?

My front end is using ReactJS and when I was testing locally I was using axios to make the calls. e.g.

axios.defaults.baseURL = process.env.REACT_APP_API_URL;

axios.get('/me').then((resp) => {
  this.setState({identity: resp.data});
}).catch(() => {
  console.log('Failed to retrieve identity');
});

I have now moved my API behind Azure API Management which is set up to require a subscription to use.

Part of the APIM policy checks the Active Directory group to validate the user is in the right group.

Therefore, I need to add 2 parts to my javascript

  1. authenticate against Active Directory
  2. send the Ocp-Apim-Subscription-Key in the header

react-adal looks like it might handle the login.

However, I can't work out how to modify my existing code to use it and send the header.

Its also not clear whether it is a security risk to hard code the Ocp-Apim-Subscription-Key in the javascript or if it should be retrieved on the fly.

If it should be retrieved on the fly, where should I store it and how should I retrieve it securely?

Upvotes: 1

Views: 3964

Answers (2)

Speedcat
Speedcat

Reputation: 315

If the React app is hosted in Azure App Service, then you should be able to register the React app with managed identity and use Azure KeyVault to keep the secret.

https://learn.microsoft.com/en-us/azure/key-vault/tutorial-net-create-vault-azure-web-app

Upvotes: 0

astaykov
astaykov

Reputation: 30903

After you handle the login with react-adal, you can also modify how you send the subscription key to APIM.

APIM lets you define how you want to send the subscription key - custom HTTP header or the query string: enter image description here

Both fields are text fields with pre-defined values which you can freely change (well keep in mind these are either HTTP header name or query string variable names).

To the question weather you should keep that secret. Well, you subscription key is your secret. And it is not short lived like the access token. So you should keep that as secret as possible and do not just put it in your JS code.

However I am not really convinced that a SPA application should use APIM subscription key to invoke the API. APIM subscription keys are just a symmetric keys used to authentication/authorization. As such (being symmetric keys) using these in a SPA application be would like using your username and password for the database in your SPA app. It doesn't really matter in what stage you put that key in the browser. The moment you put APIM subscription key in the browser, you cannot longer trust that key. Users can modify it, completely remove it, or use another valid subscription key if they find one.

For SPA application I would just use the Azure AD Authentication and shape the authorizations based on the bearer token. I suppose you already perform JWT validation checks in your policy? You can extract any and all claims form the token and you can make authorization decisions based on claim values.

Upvotes: 1

Related Questions