How do I make sure that the request my EBS is getting, is genuinely them?

Extensions
1

I need to be able to get the viewer’s username, id, or whatever else I can, every time they click on screen. I have tried so many things, but I have no idea what I’m doing wrong. I’ve tried verifying the JWT token, but I don’t understand the concept of them, and either way, I get an “invalid signature” error.

Here’s what I’m doing client-side when people click: (using socket.io)

socket.emit('draw', {
  x: mouseX+1,
  y: mouseY+1,
  color: color
})

And server-side:

socket.on(‘draw’, function (data) {
canvas[data.x - 1][data.y - 1] = data.color;
console.log(data.x, data.y, data.color);
io.emit(‘canvas’, canvas)
})

Like I said, I want to be able to get their IDs so every viewer can only click every 5 seconds. How would I accomplish this?

Btw, I’m a very new developer, so I don’t 100% get everything that’s going on. I’d really appreciate any help, with a slightly noobish explaination. Anything helps!

2

The JWT contains all the data you need, the fields you have access to are shown in the docs: https://dev.twitch.tv/docs/extensions/reference/#jwt-schema

The JWT includes a signature which means that only those with your extensions secret (your EBS and Twitch) can sign the JWT, meaning a user can’t edit any values without it failing verification. For a NodeJS EBS you can see the Hello World example and how they handle verifying the secret: https://github.com/twitchdev/extensions-hello-world/blob/master/services/backend.js

Simply put, you use the jsonwebtoken module to verify/sign tokens, and you need to make sure you don’t attempt to use your secret as a string or otherwise it will fail, you need to first change your secret from a string to a Buffer type using const secret = Buffer.from(YourExtensionSeret, 'base64');

1 Like
3

So I’ve tried what I can. Here’s what I’m doing:

CLIENT:

  socket.emit('draw', {
    x: mouseX+1,
    y: mouseY+1,
    color: color,
    token: auth.token
  })

SERVER:

var secret = Buffer.from('SECRET', 'base64');

socket.on('draw', function (data) {
jwt.verify(data.token, secret, function (err, decoded) {
  if (err) {
    console.log(err);
  } else {
    console.log('is good' + decoded);
  }
})
})

and I’m still getting the “JsonWebTokenError: invalid signature” error. Any suggestions?

4

Are you sure you’re using the correct secret? You need to use the secret in the Extension Client Configuration section of the extension console, not the Twitch API Client Secret which is separate and is use for the API side of things and wont work for JWT verification/signing.

5

Damn I’m on my phone and looked at my dashboard. I do believe I’ve used the wrong one. I’ll try it tomorrow and let you know how it goes!

6

Amazing, it worked. How would I go about storing the number of times a user has clicked? I would prefer a way that also allows me to see their name so I can make a leaderboard. I would prefer user_id over opaque_user_id since I can get their username, but can I force viewers to grant access to their Twitch ID?

7

I got it. I just check if user_id exists, and if not, I tell them to grant access.