For some reason i keep experimenting with the scratch data and api, lol.
Anyways, to the topic! Here’s how to create a safe and secure authentication system using… scratch!
This system uses secure javascript fetching cloud variable fetching thing to make sure you cannot log in as other users. If you somehow do, then you will hear your alarm clock waking you up in 5… 4… 3… (I’m serious).
To use this authentication system, you will need to know the basics of javascript.
So, it’s simple. Create an authentication page, and create a variable called “generatedcode” & a code that will generate a long random number (It should only only only only use numbers, because scratch does not support letters in cloud variables), and display it to the user.
Now, ask the user to enter the code you generated into the verification project, and after they’ve done it, create a button that will run the function “check”.
function check() {
fetch(`https://clouddata.scratch.mit.edu/logs?projectid=${524136137}&offset=0&limit=40`)
.then(res => res.json())
.then(res => {
if (res[0].value == generatedcode) {
location.href = "index.html#" + res[0].user;
}else{
alert("auth failed!")
location.reload()
}
})
}
Now, insert this code in your main page:
var cookie = document.cookie;
if (cookie.length > 8) {
// INSERT A CODE HERE THAT WILL REMOVE THE LOG IN BUTTON AND DISPLAY A WELCOME MESSAGE
}
if (location.hash !== ""){
document.cookie = "username=" + location.hash.substring(1);
location.href = "index.html";
}
Now, the username of the logged-in user will be in document.cookie displayed as username=LankyBox01
If you want to log out the user, use this code:
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC;";
location.reload;
Please let me know if i used unoptimized code, you spot a vulnerability, or you receive an error while trying to implement this into your website. An example of this system can be seen in my website: https://lankybox01.leahcimto.com/
