question

Dev-8176 avatar image
0 Votes"
Dev-8176 asked DhruvilDave-8114 commented

CORS issue while getting token with Oauth 2.0 Client credential flow using just React?

I am able to get the Bearer token from the postman.

https://login.microsoftonline.com/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx/oauth2/v2.0/token

client_id : <cient-id/app-id>,
scope : "https://graph.microsoft.com/.default",
client_secret:<client-secret>,
grant_type : "client_credentials"

Content-Type : "application/x-www-form-urlencoded"

but same thing when I am doing with React using Fetch() method it's giving me the CORS issue. I am using client_cerdentials flow using Oauth2.0.

86819-image.png

86902-image.png


azure-ad-authenticationmicrosoft-graph-sdk
image.png (72 B)
image.png (57.6 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Dev-8176 avatar image
0 Votes"
Dev-8176 answered Dev-8176 edited

It is not the flow or configuration that is causing the issue. The real issue is front-end or SPA. IF you want to call the API for getting token with client Credential flow,You must follow either of the two approaches that is a mandatory thing I guess.
1.Daemon Services
2.Server side Implementation
I have called the api with Node and with same configuration as mention in the docs its working fine now.
Thanks

5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Danstan-MSFT avatar image
0 Votes"
Danstan-MSFT answered DhruvilDave-8114 commented

You are getting cors error because AAD rejects the request when you include Origin header while using client_credentials. To start with You are using the client_credentials flow the wrong way.
Consider reading through this guide on client credentials flow to help you understand why its preferred for server side / daemon applications.

To see the error just add Origin header to postman and do the request again.

Also read here to understand the oauth2 flows that you can use

For your case, you can use authorization code flow


· 3
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi @Danstan-MSFT
I am trying to use same flow in Powerapps PCF Component.

https://login.microsoftonline.com/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx/oauth2/v2.0/token

client_id : <client-id/app-id>,
resource : <resource>,
client_secret:<client-secret>,
grant_type : "client_credentials"

Content-Type : "application/x-www-form-urlencoded"

and this PCF component is embedded into a canvas app.
I can use grant_type=authorization_code but I have to add a redirect_uri and I don't want to add any redirection to my code.
Is there any way, I can get the access token and don't get any cors issues?
I want to acquire a token without a login popup if possible.


Error on local environment
144451-screenshot-2021-10-28-at-112633-am.png

Error in canvas app when i embed PCF solution on canvas app
144462-screenshot-2021-10-28-at-113119-am.png

Thanks


0 Votes 0 ·

I suggest you open a new community question for your issue.

0 Votes 0 ·