I am developing an Outlook taskpane add-in in Angular and when the user clicks on the add-in button, i want to use Client Credential Flow to call a Protected Web API.
I tried using normal httpClient and do a POST request like below
let body=new HttpParams();
body=body.set("grant_type","client_credentials");
body=body.set("client_id","xxxxxxx");
body=body.set("client_secret","xxxxxx");
body=body.set("scope","https://xxxxxx/.default");
const url="https://login.microsoftonline.com/xxxxx/oauth2/v2.0/token";
this.httpClient.post(url,body)
I am getting the CORS error like below
Access to XMLHttpRequest at 'https://login.microsoftonline.com/xxxx/oauth2/v2.0/token' from origin 'https://xxxx.azurewebsites.net' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource..
Is there any way to resolve this error ? Tried to use MSAL as well here, but I couldn't find any documentation on Client Credential Flow for JS. It is available only for .NET
1.You should never put the client secret in the front-end.This is very unsafe!
2.We suggest you use https://github.com/AzureAD/azure-activedirectory-library-for-js. for frontend to integrate AAD with a ease.You can refer to No 'Access-Control-Allow-Origin' header with Microsoft Online Auth for details.
client_credentials grant_type is used in app only scenario. If you must use client credential flow, you need to get the access token in your app's backend and return it to the frontend.