API Authentication in JS

M_Lehmann · October 4, 2019, 10:17pm

I’m trying to build a wevsite with twitch embedded. I want to check whether the channel I want to display is currently streaming to decide whether to play a video of the current stream. Playing the current stream is no issue. But the checking part is giving me a head ache. I tried using some old code from here: Live vs online (using javascript)
I got to the point where I believe I understand that I need to authentice to use this part of the Api. Do I need to do this with a client ID or an Access Token? How do I obtain the access token exactly (reading the doc didn’t help me, I’m just getting started with using APIs of any kind)? I do not want for a user to have to log into their twitch account for this simple check which the doc on getting tokens seemed to imply. How do I go about this in javascript?

I have registered an application and do have a client ID.

Dist · October 4, 2019, 10:33pm

Use the Get Streams endpoint https://dev.twitch.tv/docs/api/reference#get-streams

You don’t need an access token, a client id will work fine, as shown in the example.

Just make a request to that endpoint, with your client id as the Client-ID header, and you can specify one or more channels using the user_id or user_login querystring params depending on if you want to use their username or their Twitch ID.

If the channel is live, you’ll get a stream object back in the results, if their offline you wont.

M_Lehmann · October 4, 2019, 10:46pm

How do I put the ID in the header using JS? GET https://api.twitch.tv/helix/streams/<channel>client-ID=uo6dggojyb8d6soh92zknwmi5ej1q2?

Dist · October 4, 2019, 11:57pm

You can’t put it in the URL like that. Just google whatever request library you’re using and how to set headers in it.

M_Lehmann · October 5, 2019, 8:59am

I tried using the XMLHttpRequst but I’m not sure how to use it.

function reqListener(){
              console.log(this.responseText);
            }
            var XML = new XMLHttpRequest();
            XML.addEventListener("load", reqListener);
            
            XML.open("GET", "https://api.twitch.tv/helix/streams/<channel>");
            XML.setRequestHeader('Client-ID', '<ID>');

The reqListener function I copied from the mozilla doc. I put the setRequestHeader after the open because XML complained headers can only be set for requests that are ‘opened’.

Using this I get a 404.

BarryCarlyon · October 5, 2019, 11:56am

https://api.twitch.tv/helix/streams/?user_id=CHANNELID

or

https://api.twitch.tv/helix/streams/?user_login=USERNAME

M_Lehmann · October 5, 2019, 12:06pm

Yes, but I’ll still need to send the client ID in the header and I think that’s the part that’s going wrong.
Correcting my code as described returns undefined for the call console.log(data);

            var XML = new XMLHttpRequest();
            
            XML.open("GET", "https://api.twitch.tv/helix/streams/?user_id=CHANNELID");
            XML.setRequestHeader('Client-ID', 'CLIENTID');
            var data = XML.send();
            console.log(data);

BarryCarlyon · October 5, 2019, 12:10pm

var xhr = new XMLHttpRequest();
xhr.open('GET', '/server', true);

xhr.onload = function () {
  // Do something with the retrieved data ( found in xmlhttp.response )
};

xhr.send(null);

xhr.send() doesn’t return anything

The response is in onload

Another way:

  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      callback(xhr.response);
    }
  }

M_Lehmann · October 5, 2019, 12:17pm

Thank you very much!

var XML = new XMLHttpRequest();
            
            XML.open("GET", "https://api.twitch.tv/helix/streams/?user_id=sugarincubes");
            XML.setRequestHeader('Client-ID', '<clientID>');
            XML.send();
            XML.onload = function () {
              console.log(XML.response);
            }

Gave me some meaningful output at last.
However, I only ever get a JSON object with data: [] regardles of the stream being online of not. Does the user_id differ from the name of a channel?

BarryCarlyon · October 5, 2019, 12:27pm

Is incorrect

For a username it’s

XML.open(“GET”, “https://api.twitch.tv/helix/streams/?user_login=sugarincubes”)

Please read the docs and what we wrote here

M_Lehmann · October 5, 2019, 12:44pm

I think I did indeed do everything according to your replies and the doc but still only receive data=[]

var XML = new XMLHttpRequest();
            var response = null;
            
            XML.open("GET", "https://api.twitch.tv/helix/streams/?user_login=sugarincubes");
            XML.setRequestHeader('Client-ID', '<clientID>');
            XML.send();
            XML.onload = function () {
              response = JSON.parse(XML.response);
              console.log(response);
            }

BarryCarlyon · October 5, 2019, 12:46pm

Data is only returned/not an empty array when that streamer is live

sugarincubes is not live

M_Lehmann · October 5, 2019, 12:51pm

does it take time to be updated? I went live several times during testing.
Sugarincubes is now live, also streaming live to the embedded twitch iframe but sata is still []

BarryCarlyon · October 5, 2019, 12:51pm

3/5 minutes