Freecodecamp: Client-ID Required for Kraken API calls

[noelnoche]

Challenge Name

https://www.freecodecamp.com/challenges/use-the-twitchtv-json-api

Issue Description

JSONP calls to the channels API result in a bad request. This is due to an update to the Twitchtv API which now requires a client id, which means creating an account and registering your application with the service. Details can be read from the official developer blog:

https://blog.twitch.tv/client-id-required-for-kraken-api-calls-afbb8e95f843#.pm46cq40d

I confirmed this by console logging the response object from the channels API on my application and comparing it with the example provided by Free Code Camp (see screenshots).

Browser Information

N/A

Your Code

Screenshot

[dhcodes]

Confirmed, at least to the extent that my (previously-working) Twitch app is now yielding Bad Request as well. Should we update the instructions on this challenge to have campers create a Twitch Developer account and read the blog post about setting a Client ID?

[zelite]

On the codepen it should be an easy fix. Freecodecamp already has a twitch account. Whoever is in charge of that needs to get a client ID. Then just add this to the js before the other code:

$.ajaxSetup({
  headers : {
    "Client-ID": "<clientID>"
  }});

[dhcodes]

cc @FreeCodeCamp/issue-moderators

[noelnoche]

Yup, looks like all heck is breaking loose:

https://github.com/justintv/Twitch-API/issues/609

Wish I copied the response object before the change. It would be nice to use a mock response data instead of having to create an account for just learning purposes..

[QuincyLarson]

@genkibit yes - it definitely would have helped!

We are getting ready to semi-retire this challenge anyway (we're moving it to the optional practice projects section).

@dhcodes I've created a gist with an array of 5 responses (two live, two offline, one invalid). This is an array instead of a series of API calls, but it should work fine for the purpose of the challenge: https://gist.github.com/QuincyLarson/2ff6892f948d0b7118a99264fd9c1ce8

Could one of you create a PR that tells links campers to that gist and tells them to use that JSON for their responses?

Note that this PR would have to be made against the backup/master branch so we can deploy it sooner (rather than a couple weeks from now when we deploy react + the expanded curriculum).

[noelnoche]

@QuincyLarson - Ok. Just made the pull request. Hope I did it right..

[Manish-Giri]

I'm about to complete the two remaining projects for my Front End certification. Do I need to redo the Twitch App (that I submitted a while back) based on the new client ID requirement?

[dhcodes]

@manish-giri probably so it will work going forward, or you could make a twitch dev account and get your own client id

[Manish-Giri]

@dhcodes you mean it's fine if I leave it as-is, from the certification POV?

[dhcodes]

I'm saying I recommend updating it because if you ever use it in a portfolio, you would want it to function.

[Manish-Giri]

Okay, I didn't really get the first part of your message before. Thanks.

[phyrenight]

Would this need to be updated then?

[mones-cse]

please update the wiki cause it's misleading. spent lots of time figuring out what is the problem :(

[QuincyLarson]

@mones-cse we have deprecated that wiki and will delete it completely. The current article is here: http://forum.freecodecamp.com/t/use-the-twitchtv-json-api/19541 and yes it needs to be updated. Does anyone on this thread use the forum a lot? If so, you should be able to update this article yourself. Any volunteers? 😄

[anarchyrucks]

@QuincyLarson There is no link provided for the sample API response.

[QuincyLarson]

@anarchyrucks I've included it: http://forum.freecodecamp.com/t/use-the-twitchtv-json-api/19541

[noelnoche]

Ah, apologies. I forgot to close the link tag. Should I submit a PR with correction?

[QuincyLarson]

@genkibit yes please

[jonataswalker]

It's being a hard time to finish "Twitchtv JSON API" challenge.

@QuincyLarson said:

I've created a gist with an array of 5 responses (two live, two offline, one invalid).

But Twitch-API docs says, if offline:

{
  "stream": null
}

And in @QuincyLarson's gist there's no stream property. Maybe in the meantime they've changed their API?

If I understood, to complete this challenge we won't use Twitchtv JSON API, we will use @QuincyLarson's gist instead. But what is _online/offline/invalid_ in this fake response?

[QuincyLarson]

@jonataswalker Yes - you should use my gist instead of using the API. We plan to retire this challenge as soon as we can launch our expanded curriculum.

[jonataswalker]

Right @QuincyLarson but what is _online/offline/invalid_ in your (kinda) json?

[QuincyLarson]

@jonataswalker I'm not sure I understand you. I retrieved these directly from queries to Twitch using an API key. These are the raw responses, concatenated into a single JSON document.

[anarchyrucks]

@QuincyLarson your gist doesn't have a stream property anywhere which is used to know if someone is online/offline

[jonataswalker]

your gist doesn't have a stream property anywhere which is used to know if someone is online/offline

That's what I meant in my first comment. The gist (guessing here) must be out-of-date.

[QuincyLarson]

@anarchyrucks @jonataswalker I just made this gist a few days ago, but if it's out of date for some reason (maybe I used an older version of the API?) then could one of you create a version that's up to date? I can then update my gist based on it.

[Em-Ant]

@QuincyLarson if someone has some good data we can make a fake API on Hyperdev or Heroku that works only for the 7-8 accounts that we use in the project. I don't know if it's worth it since we are retiring the project.

[QuincyLarson]

@Em-Ant Yes - let's do that. Let's create a pass-through API on HyperDev with an API key in its .env file. Would you be interested in building this? I know you are quite busy writing tests for the back end challenges still though.

[Em-Ant]

@QuincyLarson I don't know if the pass-through is a good idea. We had the same discussion about the Open Wheater Map service some times ago. See this comment and Berkeley's answer below...

[zelite]

My opinion is that there should be one static JSON version for those who do not want to create a twitch account and leave instructions about the requirement for a Client ID, for those who don't mind creating a twitch account.

The privacy of the Client ID is a non-issue, as I wrote here ( https://github.com/FreeCodeCamp/FreeCodeCamp/issues/11015#issuecomment-250957089 )

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

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

I think everyone is making a big fuss over this project, since it is very easy to create a client ID and there is no problem in having it public. The only issue I see is the objection of some people in creating an account in a third party website (which is also an issue for using the OpenWeather API and there making the API key public is actually sensitive).

[jonataswalker]

@QuincyLarson

Here's your gist forked and modified to reflect the actual response from Twitch API.

curl -H 'Client-ID: .....' -X GET https://api.twitch.tv/kraken/streams/ESL_SC2

So, offline is stream == null and online is a valid stream object.

display_name is present when channel is offline just for the sake of simplicity, it's not part of original response.

[QuincyLarson]

@zelite Yes, it's easy enough to create the API key, but it is a bad practice to expose private API keys in a public space, so we should discourage this.

@jonataswalker OK - great! I've updated my original gist with the text of your gist. Thank you for doing this. So to be 100% clear, the gist you created will mimic the actual API responses? Could you incorporate it into your own twitch.tv viewer or the one we're using here: https://codepen.io/FreeCodeCamp/pen/Myvqmo/

[jonataswalker]

That's it, @QuincyLarson!

http://codepen.io/jonataswalker/pen/EgEbEo

Cheers.

[zelite]

@QuincyLarson

But the client ID is not a private API key. It is part of the OAuth2 authentication protocol ( https://www.digitalocean.com/community/tutorials/an-introduction-to-oauth-2 )

Client ID and Client Secret

Once your application is registered, the service will issue "client credentials" in the form of a client identifier and a client secret. The Client ID is a publicly exposed string that is used by the service API to identify the application, and is also used to build authorization URLs that are presented to users. The Client Secret is used to authenticate the identity of the application to the service API when the application requests to access a user's account, and must be kept private between the application and the API.

That's why I don't understand all the fuss. You don't need the Client Secret for the kinds of queries that are necessary for this project.

[jgresalfi]

I'm a bit of a newb at API-fu so someone please educate me if I'm wrong, but I'm able to get data from the Twitch API using my client id in a custom request header, so it's not showing up as a query string in the URL. Is that an acceptable way to complete the project while still using the API as originally intended? Cheers!

PS - Postman is awesome.

[Em-Ant]

@jgresalfi I think it's ok if you use the original API.
We set up the pass-through server to allow people who don't want to create an API key to keep working on this challenge as before. On codepen your code is public, so anyone could access your key reading the code, even if you put it in a header. I think it's not a big problem (read the comment above). Anyway you can switch to our server in the future, if you feel uncomfortable exposing your key in a public space.

[jgresalfi]

@Em-Ant Thanks for the reply...my brain cells weren't totally firing on that one. Of course people can see my key in Codepen. I'm not a Twitch user and there is nothing at all in my user profile so, unless there's something nefarious someone can do with my key and my blank profile, I'm comfortable putting it out there. I'm tempted to try an get OAuth to work, but also want to stay focused on getting my app done. Thanks again.