I have a simple, handcrafted html website and I want to change the website depending on whether my channel is live. I really tried to understand the api but I just don’t. I don’t want any user-login required, I just want to execute a small javascript script which changes a div depending on whether I am live. I don’t have a server to communicate to, it’s a simple, static html. I have a client-id.
All Helix requests (such as Get Streams to check if a stream is online) requires an OAuth token. Since this is client-side that rules out using an App token, which means your only option is to have a login system so that you can the Implicit Auth flow to get a user token and use that to make requests.
It is currently possible to make requests to the old v5 endpoints with just a client id, but that is deprecated and will be removed in the near future and so shouldn’t be relied on.
It’s a quick, non-interactive website. So there’s no way to do this without user-interaction? I only need a boolean whether I am streaming!
I could use the old v5, but I can’t get it to work? I only get referrals to the new API!
Using Helix you need user interaction if it’s a client-side app, there’s no avoiding that.
If you want to you could use the OAuth flow, redirect to localhost even if you’re not running a webserver there, and copy the token out of the url and paste that into your page (only do this if it’s local HTML/JS/CSS that wont be shared! As you MUST NOT share the token). That’ll last about 60 days after which time the token will expire and you’ll have to do it again.
It’s not ideal but if you’re working within the limitations of a client-side HTML file with no actual server, or app to run on, then you don’t have a lot of options.
The Get Streams endpoint will work Reference | Twitch Developers
Make sure you’re correctly sending the Accept: application/vnd.twitchtv.v5+json header with the request to ensure it’s a v5 request, otherwise it’ll default to v3 which has already been removed (like v5 will in the near future).
run this in your browser after you replace the client_id with your id.
https://id.twitch.tv/oauth2/authorize?response_type=token&client_id=60xdja3y8iy87xmwm27spsliedd4cs&redirect_uri=http://localhost&scope=channel:manage:broadcast
make sure you don’t delete the & when replacing the id. after you run that you will get an access token.
then run this command but replace the asdf;asldfkja;sldkfj with the access token you got. also replace swervinmaximus with the user you are trying to look up.
curl -X GET ‘https://api.twitch.tv/helix/search/channels?query=swervinmaximus’
-H ‘Authorization: Bearer asdf;asldfkja;sldkfj’
-H ‘Client-Id: 60xdja3y8iy87xmwm27spsliedd4cs’
that should get you the information you need about your stream. write a function to parse the info to get the value to change your div. hope this helped. let me know if you have more questions.
That wont help them at all with a website like they said they are using, and there’s no need for that scope just to check if a channel is live, and using the search channels endpoint is also not the ideal way to check if a stream is live or not.
They can’t include an OAuth token on the page itself as it’s a violation of the dev agreement to make OAuth tokens public, and it would require updating the website each time the token expires. The correct way to do this client-side, such as on a website, would be to do the implict auth flow and have the user login to the site, then grab the token from the URL hash and use the Get Streams endpoint https://dev.twitch.tv/docs/api/reference#get-streams
I practical example of what Dist describes
Implict auths
Uses the token to get who the logged in user follows
Then gets those 100 per page from the streams endpoint.
@Dist you keep saying login to the site and grab the token. It sounds like LeanderK just has a static website with no login. Are you saying that the user should login to twitch before visiting his page or something? Couldn’t LeanderK write some sort of JS to run the query I provided so it wasn’t directly on the Webpage source? I’m still learning I was just trying to explain how to find the info he needed with the commands I gave.
A website with no login system can not make Twitch API requests as they require an OAuth token.
To get an OAuth token you need to use one of the OAuth flows, which for a client-side app (which a website is, whether it’s static or dynamically generated HTML) would be the implicit auth flow, as both the Auth Code flow and the Client Credentials flow require a backend server.
If you were to just generate a token yourself, and put it into the site, that site MUST not be public or accessible by anyone else, otherwise it would be a violation of the developer agreement as you can’t share tokens like that. Also like I previously mentioned you would need to keep updating the site each time the token expires where as if you use an auth flow you can just have the user seamlessly go through it each time they load the page (or use sessions so they only go through it as needed).
Yes, but that code has to run somewhere, ie a server, and they’re making a client-side app so that’s not applicable in this situation.
Okay that makes more sense to me. Still not sure what is meant by client-side app but I do understand the code needs to run on a server. I figured they had a web server to run the code on as its a website.
seeing as LeanderK doesn’t want people to login may I suggest another approach. When you go live on twitch the page has the following code.
<div class="channel-status-info channel-status-info--live tw-border-radius-medium tw-inline-block"><p class="tw-strong tw-upcase">Live Now</p></div>
Write something to chache/load the page and search for that string and based off if it is there or not you could get a boolean.
A client-side app is any app where the code is executed on the clients side, so for example if a website is making API requests in that page itself, then that’s client-side as the requests are being made from whichever user is viewing that page. Because the requests are made from the user in a client-side app, no private information, such as a client secret, or any OAuth token other than one from the user themselves, can be used.
Circumventing the 3rd party Twitch API and scraping the Twitch site itself could be a violation of the Twitch Developer Agreement. I’d strongly recommend against it.
Geez they make it hard to do stuff. I just try finding answers. Sorry wasn’t more help @LeanderK.
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.