I have being going through the documentation and asking questions here(very helpfull) to get a very simple extension up and running to more or less understand the steps like the JWT tokens, there is other stuff like how to store correctly the secret and broadcast id of the client i still not sure what is the best practice, in any case.
The idea of the extension is to create a panel with a button that sends a random text to the chat.
So I go it working correctly :
panel.html
<!DOCTYPE html>
<html>
<head>
<title>Viewer Page</title>
</head>
<body>
<button class="yourButtonClass">Press</button>
<script src="https://extension-files.twitch.tv/helper/v1/twitch-ext.min.js"></script>
<script src="./assets/js/jquery.js" type="text/javascript"></script>
<script src="./assets/js/viewer.js" type="text/javascript"></script>
</body>
</html>
assets/js/viewer.js
/* From the twitch extension 101 */
/*https://dev.twitch.tv/docs/tutorials/extension-101-tutorial-series/introduction/*/
var token, userId;
// so we don't have to write this out everytime
const twitch = window.Twitch.ext;
// callback called when context of an extension is fired
twitch.onContext((context) => {
console.log(context);
});
// onAuthorized callback called each time JWT is fired
twitch.onAuthorized((auth) => {
// save our credentials
token = auth.token;
userId = auth.userId;
});
$(document).ready(function(){
$(".yourButtonClass").on('click', function(event){
event.stopPropagation();
event.stopImmediatePropagation();
/*https://stackoverflow.com/questions/35861012/how-to-send-a-token-with-an-ajax-request-from-jquery*/
$.ajax({
url : 'http://localhost:3000/questions',
type: 'GET',
// Fetch the stored token from localStorage and set in the header
headers: {"Authorization": "Bearer " + token}
});
});
});
backend.js
this file will be in charge of the backend, this is a server that the developer must be responsible for, you will to install nodejs , and use the following commands :
npm init -yes
npm install express body-parser jsonwebtoken jsdom jquery--save
the file (backend.js)
/* Importing Libraries */
var express = require("express");
var bodyParser = require('body-parser');
const jwt = require('jsonwebtoken')
var jsdom = require('jsdom');
const { JSDOM } = jsdom;
const { window } = new JSDOM();
const { document } = (new JSDOM('')).window;
global.document = document;
var $ = jQuery = require('jquery')(window);
const sharedSecret = 'YouCanFindThisInYourExtension';
const broadcasterId = 'BroadcasterId';
const tokenPayload = {
user_id: broadcasterId,
role: 'external'
}
const token = jwt.sign(tokenPayload, Buffer.from(sharedSecret, 'base64'), { expiresIn: '1d' })
/* Express Step 1: Creating an express application */
var app = express();
//set port
var port = 3000;
/* Express Step 2: Start Server */
app.listen(port, () => {
/*console.log("Server listening on port " + port);*/
});
// Express Step 3: Use body-parser library to help parse incoming request bodies
app.use(bodyParser.json());
/* This is included because its allows extenion to run external javascript.
If you are interested in learning more, check out: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS */
app.use((req, res, next) => {
res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization, X-Requested-With');
res.setHeader('Access-Control-Allow-Methods', 'OPTIONS, GET, POST');
// Note that the origin of an extension iframe will be null
// so the Access-Control-Allow-Origin has to be wildcard.
res.setHeader('Access-Control-Allow-Origin', '*');
next();
});
var settings = {
"url": "https://api.twitch.tv/helix/extensions/chat?broadcaster_id=" + broadcasterId ,
"method": "POST",
"timeout": 0,
"headers": {
"Authorization": "Bearer " + token,
"Client-Id": "clientIdOfExtension",
"Content-Type": "application/json"
},
"data": JSON.stringify({
"text": "Hello",
"extension_id": "clientIdOfExtension",
"extension_version": "0.0.1"
}),
};
app.get('/questions', (req, res) => {
let [ type, auth ] = req.headers['authorization'].split(' ');
if (type == 'Bearer') {
/*https://www.jvt.me/posts/2019/02/25/verify-signed-jwt-nodejs/ */
/*Verify jwt */
console.log(auth);
res.send("done");
const decodedToken = jwt.decode(auth,{ complete: true});
if (!decodedToken){
throw new Error('Token decoded failed, syntax error');
}
try {
const decoded = jwt.verify(auth, Buffer.from(sharedSecret, 'base64'), { algorithms: ['HS256'] });
console.log("Token is valid:", decoded);
/*Send message to chat*/
$.ajax(settings).done(function (response) {
res.send(response);
});
} catch (error) {
console.error("Invalid token:", error.message);
}
}
});
Is the JWT verification correct? the token is coming from the viewer.js file
After this I create a new signed Token and send that, this is correct?
What is the best way to load the sharedSecret,broadcastId and extension_id so it is not hardcoded in? can I have a file inside the directory with these values store ? is it safe like that?
Hope this helps others, thanks!