Error 400 receieved when fetching from trovo API

Question

I've been granted acces to an API that uses OAuth 2, I've tried it with different API's and my requests were working. However with the trovo API I seem to get error 400 at every endpoint. I also get a "blocked by CORS policy: o 'Access-Control-Allow-Origin' header is present on the requested resource."

function fetching() {
  fetch("https://open-api.trovo.live/openplatform/validate", {
    "method": "GET",
    "headers": {
        "Accept": "application/json",
        "Authorization": "myKey",
        "Client-Id": "myID"
    }
  })
  .then(response => {
    console.log(response.json());
  })
  .catch(err => {
    console.error(err);
  });
}

I also recieved a Client Secret not sure what to do with that. Here is the documentation from Trovo: https://developer.trovo.live/docs/APIs.html

Altogether I'm quite new to working with API's.

Answer 1

The OAuth flow requires a server, and cannot be done entirely on the front-end. In this example, you would need a server running somewhere other than StreamElements that would keep track of the access and refresh token.

You would then have the front end connect to the server to get the access token instead of directly to Trovo. Reason for this: security. To get the access token you need the private key, and you don't want to be sending that to the front end, or else they can do stuff as if they were you.

Even though stream overlays don't seem like a front end, it's most often just a browser being rendered, as if you just had a website open in chrome.

https://www.digitalocean.com/community/tutorials/an-introduction-to-oauth-2
https://www.youtube.com/watch?v=3pZ3Nh8tgTE