Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Client-ID Required for Kraken API calls #10740

Closed
noelnoche opened this issue Sep 15, 2016 · 36 comments

Comments

Projects
None yet
@noelnoche
Copy link

commented Sep 15, 2016

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

screen shot 2016-09-14 at 10 44 41 pm

screen shot 2016-09-14 at 10 45 05 pm

@dhcodes

This comment has been minimized.

Copy link
Contributor

commented Sep 15, 2016

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

This comment has been minimized.

Copy link

commented Sep 15, 2016

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

This comment has been minimized.

Copy link
Contributor

commented Sep 15, 2016

cc @FreeCodeCamp/issue-moderators

@noelnoche

This comment has been minimized.

Copy link
Author

commented Sep 17, 2016

Yup, looks like all heck is breaking loose:

justintv/Twitch-API#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

This comment has been minimized.

Copy link
Contributor

commented Sep 17, 2016

@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 noelnoche referenced this issue Sep 17, 2016

Closed

Update to Twitchtv API challenge #10779

6 of 10 tasks complete
@noelnoche

This comment has been minimized.

Copy link
Author

commented Sep 17, 2016

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

@Manish-Giri

This comment has been minimized.

Copy link
Contributor

commented Sep 17, 2016

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

This comment has been minimized.

Copy link
Contributor

commented Sep 17, 2016

@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

This comment has been minimized.

Copy link
Contributor

commented Sep 17, 2016

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

@dhcodes

This comment has been minimized.

Copy link
Contributor

commented Sep 17, 2016

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

@Manish-Giri

This comment has been minimized.

Copy link
Contributor

commented Sep 17, 2016

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

@phyrenight

This comment has been minimized.

Copy link

commented Sep 17, 2016

Would this need to be updated then?

@mones-cse

This comment has been minimized.

Copy link

commented Sep 17, 2016

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

@QuincyLarson

This comment has been minimized.

Copy link
Contributor

commented Sep 18, 2016

@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

This comment has been minimized.

Copy link

commented Sep 28, 2016

screenshot

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

@QuincyLarson

This comment has been minimized.

Copy link
Contributor

commented Sep 28, 2016

@noelnoche

This comment has been minimized.

Copy link
Author

commented Sep 28, 2016

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

@QuincyLarson

This comment has been minimized.

Copy link
Contributor

commented Sep 29, 2016

@genkibit yes please

@jonataswalker

This comment has been minimized.

Copy link

commented Oct 6, 2016

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

This comment has been minimized.

Copy link
Contributor

commented Oct 6, 2016

@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

This comment has been minimized.

Copy link

commented Oct 6, 2016

Right @QuincyLarson but what is online/offline/invalid in your (kinda) json?

@QuincyLarson

This comment has been minimized.

Copy link
Contributor

commented Oct 7, 2016

@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

This comment has been minimized.

Copy link

commented Oct 7, 2016

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

@jonataswalker

This comment has been minimized.

Copy link

commented Oct 7, 2016

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

This comment has been minimized.

Copy link
Contributor

commented Oct 7, 2016

@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

This comment has been minimized.

Copy link
Member

commented Oct 8, 2016

@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

This comment has been minimized.

Copy link
Contributor

commented Oct 8, 2016

@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

This comment has been minimized.

Copy link
Member

commented Oct 9, 2016

@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

This comment has been minimized.

Copy link

commented Oct 9, 2016

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 ( #11015 (comment) )

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

This comment has been minimized.

Copy link

commented Oct 9, 2016

@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

This comment has been minimized.

Copy link
Contributor

commented Oct 9, 2016

@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

This comment has been minimized.

Copy link

commented Oct 9, 2016

@zelite

This comment has been minimized.

Copy link

commented Oct 10, 2016

@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.

@Em-Ant Em-Ant referenced this issue Oct 10, 2016

Merged

Add Twitch.tv pass-trough API link #11148

6 of 10 tasks complete
@jgresalfi

This comment has been minimized.

Copy link

commented Nov 21, 2016

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

This comment has been minimized.

Copy link
Member

commented Nov 21, 2016

@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

This comment has been minimized.

Copy link

commented Nov 21, 2016

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.