Problem with Client ID in TwitchTV project

Code Feedback
1

Hello all,

I’m trying to work through the Twitch.tv intermediate front-end project and have encountered a problem. I’ve gotten as far as being able to set up the AJAX function call and it is successful but does not return anything. To be a bit clearer on this confusing point, I have a success function and an error function set up in my AJAX call. When I call getStreams, the error function is not triggered, hence it is a ‘successful’ AJAX call but the server refuses to return the object I’m requesting. Here is the code for the AJAX function:

 function getStreams(users) {
    var streams = "streams/";
    var streamUrls = getUrl(streams, users);

    $.ajax({
      url: streamUrls[0],
      type: 'GET',
      dataType: 'json',
      success: function(data) {
        var isStreaming = data.stream;
        var game = data.stream.game;
        var link = "https://www.twitch.tv/" + users[0];
        if (isStreaming !== null) {
          display for online with code below
          displayUser(users[0]);
          displayInfo(users[0], game, link);
          console.log(data);
        }
      },
      error: function(err) {
        //display for error
        console.log("error");
      }
    });
  }

Note that streamsUrls is an array but to test it out it only has one item in it at the moment hence the hard-coded index of 0.

Upon trying to troubleshoot this, I get the following error in my console log: Object {error: “Bad Request”, message: “No client id specified”, status: 400}

The API’s general documentation on https://github.com/justintv/Twitch-API says the following:

"Rate Limits

We require you to send your application’s client_id with every request you make to ensure that your application is not rate limited. You should do so by sending the following HTTP header:

Client-ID: <client_id>

In situations where headers cannot be set, you can also specify a client ID as a querystring parameter: client_id=<client_id>"

I have looked at quite a few codepens of other campers and so far the only one I have noticed working ‘properly’ has a client_id so my question is: how do you get one? Sorry if that seems like such a basic question but that’s the one thing they don’t seem to mention in the API documentation.

I guess there is no way around this step?

2
4 Likes
3

Thank you for this. This is what I was looking for. I’m surprised that there is no mention of it in the description of the project.

4

They started to enforce this only yesterday.

FCC is informed: https://github.com/FreeCodeCamp/FreeCodeCamp/issues/10740

1 Like
5

Wow, I made it just in time. :stuck_out_tongue:

That also explains all of the campers with now-broken apps…

3 Likes
6

Here’s how I fixed mine:

  1. Go to https://www.twitch.tv/settings/connections
  2. Log in to twitch and scroll down to “Register your application”
  3. Add a name for your project and set the Redirect URI to your CodePen project URL without the editors part (mine was http://codepen.io/ColtonBoston/pen/wGEzQg). Then click register. You should now see your Client ID.
  4. This part could differ based on how you retrieve your JSON, but here’s how to edit yours if you used $.getJSON:

My original code:

$.getJSON('https://api.twitch.tv/kraken/streams/' + channel + '?callback=?', function(data) { ... });

New code with Client ID (use your ID):

$.getJSON('https://api.twitch.tv/kraken/streams/' + channel + '?client_id=3ayqtffruo2goxf0cvyp75wjm28g4pq&callback=?', function(data) { ... });

This should get it working again. If there’s a better way, please let me know. Also, remember to add the Client ID to your other twitch json calls if you have any (I had one for online users (/streams/) and another for offline users (/channels/)). I hope this helped!

10 Likes
7

Hey ColtonBoston, many thanks. This was clear and to the point. Worked perfectly.

1 Like
9

Please note that the client ID from the twitch IP is not the same as an API key. You don’t need it to keep it private.

Client IDs are public and can be shared (e.g. embedded in the source of a web page)

From https://github.com/justintv/Twitch-API/blob/master/authentication.md

10

@zelite Wow, I just managed to miss that paragraph in their authentication section as I quickly skimmed over it last night, tired I guess.

Thanks for making that clear zelite!

I guess FreecodeCamp accidently mistook a
client ID for an API key also?

Regardless, I’m glad to be in the clear to use the actual API w/o security concerns.

Thanks again!

11

Hi,

If this works is going to be great. You have even clarify for me how/where to insert the client_id in the http request string (right after “?”), something that nobody did as far as I have read so far.

This will allow me to use vanilla JS (I don´t see the point of using libraries if not needed). Let´s see if I am lucky!

Cheers.

1 Like
12

thanks ColtonBoston!

1 Like
13

Just came back after taking time off from FCC and was checking over my old projects. Several were broken, including the Twitch TV app, so a big thank you for this information.

1 Like
14

Thanks from here too. I was trying to figure out a way to send this as a query string parameter on the URL and couldn’t manage to get that to work, but this example works perfectly :slight_smile: