Destiny 2 API recieving an auth token from endpoint using POST-CodePudding

Couple things to keep in mind, I'm a fairly beginner computer science student with a couple big projects under my belt. I mostly have been working with java so web is kinda new but seems easy enough to get used to.

I'm trying to send a post request to an endpoint that will return a membership id that I need.

I've been trying to follow along with these two documentation/guides:

https://github.com/Bungie-net/api/wiki/OAuth-Documentation

https://lowlidev.com.au/destiny/authentication-2#/tab-popup

On a side note, I really feel like there aren't many "get started" guides out there for working with the Bungie API but maybe that's intentional to prevent people from doing stupid stuff with people's accounts.

Anyways, I have successfully done the first part which is authorizing my app (registered on the bungie developers site) with the user's account using my client ID provided by Bungie. This returns a code inside the url that is your authorization code with the user's account. I have a kind of janky way of pulling it from the url, so any ideas of how I can improve it would be most appreciated.

document.getElementById("authButton").addEventListener("click", function(event) {
  location.href = "https://www.bungie.net/en/OAuth/Authorize?client_id={my-client-id}&response_type=code&state="   makeState(32);
});

var authCode = undefined;
if (window.location.href.includes("code=")) {
  removeAuthButton();
  authCode = window.location.href;
  console.log(authCode);
  var codeLoc = authCode.indexOf("code=");
  var codeEndLoc = authCode.indexOf("&", 15);
  authCode = authCode.substring(codeLoc   5, codeEndLoc);

  console.log(authCode);
}

This code is just executed after pressing a simple authorization button in the webpage, and bungie handles the redirect back to my page for me when I register my app.

Now after this, the documentation shows a POST request I need to make with the following:

POST https://www.bungie.net/platform/app/oauth/token/ HTTP/1.1
Authorization: Basic czZCaGRSa3F0MzpnWDFmQmF0M2JW
Content-Type: application/x-www-form-urlencoded

grant_type=authorization_code&code=SplxlOBeZQQYbYS6WxSbIA

To stay with the urlencoded format, I have tried this code using an answer I found:

https://stackoverflow.com/a/53189376/16910197

document.getElementById("linkButton").addEventListener("click", function(event) {
  fetch('https://www.bungie.net/Platform/App/OAuth/token/', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: new URLSearchParams({
      'client_id': "{my-client-id}",
      'grant_type': "authorization_code",
      'code': authCode
    })
  }).then(function(response) {
    console.log(response);
    return response.json();
  });
});

This isn't working and I have modified it every way possible to try and get it to work to no avail. What am I missing?

Here is what I am getting back if needed:

Response { type: "cors", url: "https://www.bungie.net/Platform/App/OAuth/token/", redirected: false, status: 400, ok: false, statusText: "Bad Request", headers: Headers, body: ReadableStream, bodyUsed: false }

I'm a little new to stackoverflow and this is my first question, so let me know if I can format it any better.

CodePudding user response：

You need to call toString on URLSearchParams and send the Authorization header. If you haven't already, you should switch your API key to use the "Confidential" OAuth Client Type

document.getElementById("linkButton").addEventListener("click", function(event) {
  fetch('https://www.bungie.net/Platform/App/OAuth/token/', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
      'Authorization': `Basic ${window.btoa(`${bungie_client_id}:${bungie_client_secret}`)}`
    },
    body: new URLSearchParams({
      'client_id': "{my-client-id}",
      'grant_type': "authorization_code",
      'code': authCode
    }).toString()
  }).then(function(response) {
    console.log(response);
    return response.json();
  });
});

In case you didn't, check the network request in browser dev tools to see what JavaScript is actually POSTing to the endpoint.

From a fellow Destiny API dev, please capitalise "token" in the endpoint path before I lose my mind!