0

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

AhmedVali
  • 185
  • 2
  • 16
  • If my answer is helpful, please accept it as answer( click on the check mark beside the answer to toggle it from greyed out to filled in). Thank you – Carl Zhao Apr 28 '20 at 06:07

1 Answers1

0

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.

Carl Zhao
  • 8,543
  • 2
  • 11
  • 19
  • Hi, Thank you for your reply. I understand the client_credential grant type can be used in App only scenario. But in my case, the backend API requires AAD Token Authentication and I dont want to set up another middle layer just to get the access token. Could you please elaborate why is it unsafe? Also i want to use MSAL instead and I couldn't find MSAL.js client_credential flow in any docs. – AhmedVali Apr 27 '20 at 07:51
  • 1. If the client secret is placed in the front-end js, it can be obtained through the js source parser. 2. The client_credential exists on the server. – Carl Zhao Apr 27 '20 at 08:20