How to fix the error when trying to access the API?-CodePudding

I want to generate token to do the CRUD operations in SharePoint Online list. I am able to generate the token in Postman. But I want that it automatically gets generated in my React app to do the CRUD operations. I copied the code snippet from the Postman and pasted in my React app, but it is throwing error. Here is the error :

UsingFetch.js:181          POST https://accounts.accesscontrol.windows.net/834fb7b4-624d-4de8-a977-2d46ad979bd9/tokens/OAuth/2 400 (Bad Request)

{"error":"invalid_request","error_description":"AADSTS900144: The request body must contain the following parameter: 'grant_type'.\r\nTrace ID: d2dcb2da-1aae-4af2-a3e3-aabc35ce4301\r\nCorrelation ID: c90dff14-b64d-4f47-a01c-dfe498ec2f40\r\nTimestamp: 2022-02-23 09:07:45Z","error_codes":[900144],"timestamp":"2022-02-23 09:07:45Z","trace_id":"d2dcb2da-1aae-4af2-a3e3-aabc35ce4301","correlation_id":"c90dff14-b64d-4f47-a01c-dfe498ec2f40","error_uri":"https://accounts.accesscontrol.windows.net/error?code=900144"}

Here is the screenshot of the

Here is the code snippet that I copied from Postman :

const generateToken = async () => {
    var myHeaders = new Headers();
    myHeaders.append("Content-Type", "application/x-www-form-urlencoded");
    myHeaders.append(
      "Cookie",
      "esctx=AQABAAAAAAD--DLA3VO7QrddgJg7WevrQx7IG43UK7gipYHXtqZImLB1jfBLK4PTkZlgLq3BvpTizt3xt8EZQrpUJGa0hTnSdpRf-AenJvnGNABiv2cWYWSyJj9QNm-vWalRGHuDZ6Km_DaX_5CQHUa4H8U-osEGCM48buOyj0G819e1NoxuvoOD6fZvMI5nnDWZyjNa1mogAA; fpc=An1vbDtRI8BAiCLlUBBGpFXf9_srAQAAACDgp9kOAAAA; stsservicecookie=estsfd; x-ms-gateway-slice=estsfd"
    );

    var formdata = new FormData();
    formdata.append("grant_type", "client_credentials");
    formdata.append(
      "client_id",
      "myclientid"
    );
    formdata.append(
      "client_secret",
      "mysecretcode"
    );
    formdata.append(
      "resource",
      "00000003-0000-0ff1-ce00-000000000000/cooponline.sharepoint.com@834fb7b4-624d-4de8-a977-2d46ad979bd9"
    );

    var requestOptions = {
      method: "POST",
      headers: myHeaders,
      body: formdata,
      redirect: "follow",
    };

    await fetch(
      "https://accounts.accesscontrol.windows.net/834fb7b4-624d-4de8-a977-2d46ad979bd9/tokens/OAuth/2",
      requestOptions
    )
      .then((response) => response.text())
      .then((result) => console.log(result))
      .catch((error) => console.log("error", error));
  };

Can anyone please provide me with a solution? Thank you.

CodePudding user response：

This error says what's wrong: The request body must contain the following parameter: 'grant_type'.

To fix this, just add it as a parameter (formData in this case). According to the SharePoint docs, this value must be set to client_credentials.

formdata.append(
    "grant_type",
    "client_credentials"
);

EDIT:

Apparently, the request body has an unusual format. You're trying to send it as application/json, but MS expects application/x-www-form-urlencoded like this:

POST /{tenant}/oauth2/v2.0/token HTTP/1.1           //Line breaks for clarity
Host: login.microsoftonline.com
Content-Type: application/x-www-form-urlencoded

client_id=535fb089-9ff3-47b6-9bfb-4f1264799865
&scope=https://graph.microsoft.com/.default
&client_secret=sampleCredentia1s
&grant_type=client_credentials

So, instead of passing formData object as the request body, you should wrap it into a string like this:

const body = Object.keys(formData)
    .map(key => `${key}=${formData[key]}`)
    .join('&');

and pass that as the body.