Worried about Review Process

AnD4D · September 6, 2020, 2:18pm

I’ve created a program called ChallAcc that streamers add to their streaming software (such as OBS) that allows viewers to play mini-game through chat. In order to use this program, they need to be signed up to a database, and to confirm the correct user is logging in, they need to enter a random 4 character password via Twitch chat (to confirm they own the account).

Previously, viewers could only play turn based games via the chat, and had to deal with the natural Twitch stream delay. In order to expand somewhat, I have created a Twitch video overlay extension, which allows users to play these games in real time.

For 2 examples, please see the below clips:

Twitch

This is a Peggle clone that previously players could only control by typing angles into chat, but with ChallApp, they can now control it by hovering their mouse over the Twitch video and clicking.

Twitch

This is a Flappy Birds clone that allows viewers to play their own game directly within the Twitch video. A private version of the game is displayed for them via ChallApp, while their actions are sent to the streamer’s ChallAcc program, which displays all of the players at once. (Still in development, but working )

In order to gain access to ChallApp, the viewer must type in a 6 character command into chat so that they can gain access to the ChallAcc database on my server.

I am now at the point where I’d like to submit the app for Twitch Extension review, but I have concerns. I know of someone who recently submitted a similar program, in which viewers needed to sign in via chat, and they were rejected as not being intuitive. As my extension also requires the use of the ChallAcc program, I am worried that it will also be rejected out of hand.

I wished to make contact with Twitch before I submitted the extension so that we could work out how one would actually be able to test out the program fully. While the extension is currently restricted to users of ChallAcc, that program is available for free, and our customer base is slowly growing.

These two programs combined allow viewers to play games in real time with their streamers, similar to how the game Stream Raiders works, except they never have to leave the Twitch channel or open another tab. They can also play games in real-time. The examples linked are played with people in the UK, Canada and America, all at the same time.

Is there a way I can arrange a call with the review team so that I can set them up with an account so that they can have access to both ChallAcc and ChallApp? Without ChallAcc, unfortunately ChallApp can not be tested.

AnD4D · September 6, 2020, 2:20pm

Haha Someone hasn’t updated the Parent

BarryCarlyon · September 6, 2020, 2:21pm

Yeah this is un-intuitive, a user shouldn’t have to do anything, except grant your extension access to their userID (via Panel/Video whichever you are using).

And if I was building this I wouldn’t make a user do this extra step of sending (basically) a password via chat.

The method you describe is what you’d do in a pre-extensions world

A user hitting “share my twitchID” on the extension should act as the “login/6 character” message thing you need to create an account

TLDR: this seems like you are asking a user/viewer to login Twice, once via the extension and once via Chat

Theres no way to do that, you just have to submit for review and see what happens

So the user/viewer is supposed to download the program, in order to participate?

That is in violation of the rules/guidelines

4.8 Extensions may not require viewers to download third-party software in order to function.

4.7 allows broadcasters to download software, but viewers shouldn’t be required to download software

AnD4D · September 6, 2020, 2:27pm

I’ve been working on automating this process for around 2 months, but I have no idea how to grab both the name of the viewer and the channel the viewer is using the extension on.

At the moment, the login process solves both problems as well as confirms they have access to the database with a single word… but I do appreciate and understand that this isn’t intuitive.

If you happen to know of how I can remedy this, it would be appreciated. Alternatively, if you’d like me to create a new topic for this discussion, please let me know.

BarryCarlyon · September 6, 2020, 2:29pm

User “sharesID” with the Twitch Extension.

The users real Twitch ID is added to the JWT/session data

Send the JWT offsite/up to your EBS/server

github.com

BarryCarlyon/twitch_profile_extension/blob/main/extension/script.js#L36


      
          
          document.getElementById('share').addEventListener('click', (e) => {
              e.preventDefault();
          
              window.Twitch.ext.actions.requestIdShare();
          });
          
          function loadProfile() {
              document.getElementById('error').textContent = 'Loading';
          
              fetch(
                  my_ebs,
                  {
                      method: 'POST',
                      headers: {
                          authorization: 'Bearer ' + window.Twitch.ext.viewer.sessionToken
                      }
                  }
              )
              .then(resp => {
                  return resp.json();

On the server, decode the JWT,

github.com

BarryCarlyon/twitch_profile_extension/blob/main/ebs/server.js#L68


      
                  let token_body = await token_resp.json();
          
                  config.api_token = token_body.access_token;
                  console.log('Got a App Access Token', config.api_token);
                  console.log('Ready to start');
          
                  // now raise the server
                  // as we are ready to process
                  http.listen(config.port, function () {
                      console.log('booted express on', config.port);
                  });
          
                  return;
              } catch (e) {
                  console.error('Error at token generation parse', e);
                  process.exit();
              }
          }
          
          console.error('Error at token generation', token_resp.status, await token_resp.text());
          process.exit();

extract the userID, and then lookup the user on the API via ID, using an “App Access Token”/“Client Credentials”/Server to Server token as the authentication method

github.com

BarryCarlyon/twitch_profile_extension/blob/main/ebs/server.js#L107


      
          
          /*
          Bind a JWT parsing function
          Similar to cors probably want to make this route specific
          rather than global
          
          But if this server only does extension traffic then all good to global
          */
          app
              .use('/:route?', (req, res, next) => {
                  if (req.headers['authorization']) {
                      let [ type, auth ] = req.headers['authorization'].split(' ');
          
                      if (type == 'Bearer') {
                          jwt.verify(
                              auth,
                              config.secret,
                              (err, decoded) => {
                                  if (err) {
                                      console.log('JWT Error', err);

That’ll get your the Username of the viewer from the JWT/userID

ChannelID is in the onAuthorised callback/in the JWT as well

onAuthorized
twitch.ext.onAuthorized: function(authCallback: Function)

This callback is fired each time the JWT is refreshed.

authCallback is a function with one argument, an object with these properties:


Property	Type	Description
channelId	string	Channel ID of the page where the extension is iframe embedded.
clientId	string	Client ID of the extension.
token	JWT	JWT that should be passed to any EBS call for authentication.
userId	string	Opaque user ID.

userID/Opaque user ID, in this callback, is not the users real TwitchID

AnD4D · September 6, 2020, 2:35pm

As far as I’m aware, they only need to login once via chat. However, they typically need to initially activate the app on that channel. Perhaps that can be seen as logging in twice.

Sorry, that’s not what I meant. Imagine the streamer downloading OBS, and the extension simply allowing the viewer to change the scenes simply by clicking on a button via the extension. The viewer doesn’t need to download anything.

I have tested this via hosted test, and it works very well. It’s just the initial login process that I wish to improve upon.

Using the OBS example again, my concerns are that the review team will not be able to test out the extension if they don’t have OBS active. The extension is essentially a remote controller for my program which the streamers need to add to their streaming software.

BarryCarlyon · September 6, 2020, 2:37pm

Your extension should be doing the logging in/out, users shouldn’t be logging in via chat.

Then you either need to provide a way for the extension to run mock/test data.

Generally they don’t want to download extra software to run the test, as the software side of things is not part of what the review team tests.

AnD4D · September 6, 2020, 2:47pm

Thank you for your help, but I have no idea how I would even start with that.

It’s like creating an extension that will allow you to play a streamer’s copy of DOOM directly via a Twitch extension, then figuring out a way to test that without installing DOOM.

However, saying that, my program does not need to be installed as it’s browser based… I may be able to have a channel running the program 24/7 until they review it. It’s ironic, as the review process seems somewhat restrictive and un-intuitive But I can appreciate that the review team do not have the time to jump through hoops for every unusual request they come across.

Looking through your guide (Thank you for that btw), am I correct in thinking that there is no way to avoid having a EBS? At the moment it’s not required. Do I need to host the EBS or will Twitch manage that? I assume I’ll need to create another program that grabs the ID and somehow sends that info over to the front end.

BarryCarlyon · September 6, 2020, 2:50pm

You already have an EBS, thats where your they can gain access to the ChallAcc database on my server. database is

You host the EBS. Twitch only hosts your static HTML/JS/CSS (and any images you choose to put on Twitch’s CDN)

Given that the review team tests a video extension on a channel you left a test stream running on.
Then the computer that is running the test stream can also have Doom open. For example

AnD4D · September 6, 2020, 3:07pm

Terribly sorry, but I’m afraid I’m not sure what you mean. As far as I am aware, I do not have an EBS… or I’m guessing I simply do not know what an EBS is. I figured that would be a server that was constantly on.

When I set the extension up in the Twitch Developer Rig, I do not add, nor need to add anything to the EBS section.

I understand that the process you’re asking me to do involves sending a request for an ID… which isn’t the viewer’s real ID, which then sends approval back to the extension, granting them access to the extension.

Am I not able to perform all of this on the front end? Similar to how I obtain the Bearer Token?

I really am sorry, but I’m still relatively new to web communications, Twitch api, etc. Making the games are easy for me compared to this

BarryCarlyon · September 6, 2020, 3:10pm

Yes, EBS is just a name for “Extension Backend Service”

When you wrote:

I assumed you already had an “always on server”, so the server with the database on can also act as the server to run the extension backend operations

No, since all of Helix requires an Access Token, there is no way to generate said bearer/token in pure front end code in an extension scenario. (Simply put)

AnD4D · September 6, 2020, 3:33pm

Again, still pretty new to the web side of coding, so please forgive my ignorance.

I have a webhost that provides me with a website. That webhost also provides me with a database that I use to store usernames of those that have signed up to use my code.

Is there a particular reason as to why Twitch doesn’t host a link so that I can grab the user ID in the same way that they provide access to Bearer tokens? I.E. “https://id.twitch.tv/oauth2/token?”

The “Simply put” made me chuckle

So just to clarify… My extension already has access to a bearer token, but in order to get the name of the user, I have to create a program that I somehow host on the internet, that I can contact to get their name? Will this also provide me with the alias of the channel that the viewer is currently watching?

BarryCarlyon · September 6, 2020, 3:35pm

Yes as the front end of the Twitch Extension cannot perform this lookup itself.

So your Front end doesn’t have a Bearer token, it has a JWT.

The JWT cannot be used to call the API with.

It does. But you just can’t do it from the extension front end.

For an extension, you have to do it like the Example GitHub I linked to.

AnD4D · September 6, 2020, 4:50pm

Might you be able to share said link so I can look into things online?

BarryCarlyon · September 6, 2020, 4:55pm

If you have a User Token

curl  -H 'Client-ID: uo6dggojyb8d6soh92zknwmi5ej1q2' \
-H 'Authorization: Bearer USERTOKEN' \
-X GET 'https://api.twitch.tv/helix/users

Or if you have a user token

curl -H "Authorization: OAuth USERTOKEN" https://id.twitch.tv/oauth2/validate

If you have the user ID and any token

curl  -H 'Client-ID: uo6dggojyb8d6soh92zknwmi5ej1q2' \
-H 'Authorization: Bearer ANYTOKEN' \
-X GET 'https://api.twitch.tv/helix/users?id=1234

if you have the username and any token

curl  -H 'Client-ID: uo6dggojyb8d6soh92zknwmi5ej1q2' \
-H 'Authorization: Bearer ANYTOKEN' \
-X GET 'https://api.twitch.tv/helix/users?login=somename

If you are an extension, you have to send the JWT from your Frontend to your EBS, the EBS extracts the userID and uses any kind of token (usually App Access) to perform the lookup. Like this example extension

If you are pure front end the this example

https://barrycarlyon.github.io/twitch_misc/authentication/implicit_auth/

Would work, but this is not practical inside an extension. As it’s double authentication.

AnD4D · September 6, 2020, 5:15pm

Thanks @BarryCarlyon

I’m able to get the userid, bearer token, client-id, etc… but I have no idea how I know who is using the extension, nor the channel they are using it on.

So if you were on my channel, using my extension, at the moment I grab that info from you simply typing a word into my chat, but we’ve established that’s un-intuitive.

Normally, as you’ve shown, I’d just send an ajax request to one of the helix links, but unless I know both these names, I’m kind of stuck

BarryCarlyon · September 6, 2020, 5:22pm


window.Twitch.ext.onAuthorized((auth) => {
    if (window.Twitch.ext.viewer.isLinked) {
        console.log('token', window.Twitch.ext.viewer.sessionToken);
        console.log('channel_id', auth.channelId);
        console.log('user_id', window.Twitch.ext.viewer.id);
    }
});

That is the userID of the user using your extension, and the channelID of the page the extension is installed upon

And both userID and channelID are encoded in the “sessionToken”

AnD4D · September 6, 2020, 5:27pm

I note that I can have my extension get the user’s Twitch ID as well as the opaque ID.

Do you know how the extension grabs this data? Is it when the extension is first loaded up?

BarryCarlyon · September 6, 2020, 5:28pm

If a user has chose to “share their ID” with the extension, either via clicking the person icon or when prompted by the extension.

This then calls the onAuthorised callback.

AnD4D · September 6, 2020, 5:38pm

I imagine then, that I would need to have a listen set up… Something I also don’t know how to do

Is there no way to grab all of this data from an AJAX request? Usually I put in a request, and I am set a JSON that I obtain the data from.

At the moment, I’m reading the chat using a WebSocket… but I could perhaps instead focus on listening out for the onAuthorised callback.