8

I would like to Redeem the code for access tokens following the Document Authorization and sign-in for OneDrive in Microsoft Graph

This is API that I use for this step

POST https://login.microsoftonline.com/common/oauth2/v2.0/token

I have already tested the API on Postman and it works fine.

Test Redeem Code on Postman enter image description here

But when I tried on my code JavaScript, I got an error "Cross-origin token redemption is permitted only for the 'Single-Page Application" ,

{
   "error":"invalid_request",
   "error_description":"AADSTS90023: Cross-origin token redemption is permitted only for the 'Single-Page Application' client-type.\r\nTrace ID: 57ebcf82-278c-4375-a4db-b81ab567fc00\r\nCorrelation ID: 5a80b3fa-1e0d-4265-8fbe-5e22df198bee\r\nTimestamp: 2021-04-26 10:26:36Z",
   "error_codes":[
      90023
   ],
   "timestamp":"2021-04-26 10:26:36Z",
   "trace_id":"57ebcf82-278c-4375-a4db-b81ab567fc00",
   "correlation_id":"5a80b3fa-1e0d-4265-8fbe-5e22df198bee"
}

So, I tried to fix this problem by add header to allow origin but it doesn't work. the following is my coding. my web is hosting on firebase.

function RedeemToken(){
    var myHeaders = new Headers();
    myHeaders.append("Access-Control-Allow-Origin", "*");
    myHeaders.append("Access-Control-Allow-Methods", "POST");
    myHeaders.append("Access-Control-Allow-Headers", "Content-Type");
    myHeaders.append("Access-Control-Max-Age", "3600");
    myHeaders.append("Content-Type", "application/x-www-form-urlencoded");

    var urlencoded = new URLSearchParams();
    urlencoded.append("client_id", "XXXX");
    urlencoded.append("redirect_uri", "https://XXXX.web.app/LinkToAuthen.html");
    urlencoded.append("client_secret", "XXXX");
    urlencoded.append("code", XXXX);
    urlencoded.append("grant_type", "authorization_code");

    var requestOptions = {
      method: 'POST',
      headers: myHeaders,
      body: urlencoded,
      redirect: 'follow'
    };

    fetch("https://login.microsoftonline.com/common/oauth2/v2.0/token", requestOptions)
      .then(response => response.text())
      .then(result => console.log(result))
      .catch(error => console.log('error', error));
}
wuerfelfreak
  • 2,363
  • 1
  • 14
  • 29
Siri
  • 91
  • 1
  • 1
  • 4
  • 1
    Could you please whicg type of application? Angular or react? – Jim Xu Apr 27 '21 at 05:22
  • Hi , it's web application with Basic Javascript – Siri Apr 27 '21 at 06:09
  • If you are a single page application, I suggest you use the package `@azure/msal-browser` to access token: https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/lib/msal-browser – Jim Xu Apr 27 '21 at 06:22
  • Also it seems you are using [Client Credential flow](https://learn.microsoft.com/en-us/azure/active-directory/develop/v2-oauth2-client-creds-grant-flow) on a single page application. Its meant for server side/ daemon applications - which is why you get cors issues. You can check [authorization code flow](https://learn.microsoft.com/en-us/azure/active-directory/develop/v2-oauth2-auth-code-flow) which may be better for your case – Danstan Apr 29 '21 at 15:16
  • Is there any solutions? – CodAvo Jul 03 '22 at 10:42

1 Answers1

11

Change the App registration -> Authentication->platform type should SPA instead of Web or viceversa.

Muni Chittem
  • 988
  • 9
  • 17