2024-05-14 01:23:03 +01:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
2024-05-14 07:35:55 +01:00
|
|
|
<link rel="stylesheet" type="text/css" href="/static/css/style.css">
|
2024-05-14 01:23:03 +01:00
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
2024-05-14 07:35:55 +01:00
|
|
|
<title>Login to Burgercat</title>
|
2024-05-14 01:23:03 +01:00
|
|
|
</head>
|
|
|
|
|
<body>
|
2024-05-14 07:35:55 +01:00
|
|
|
<div class="accountform">
|
|
|
|
|
<br>
|
|
|
|
|
<a href="/">back</a><br><br>
|
|
|
|
|
<h1 id="text">Login to Burgercat</h1>
|
|
|
|
|
<button onclick="authorize()">Log in with Burgerauth Account</button>
|
|
|
|
|
<br><br>
|
2024-05-15 19:45:36 +01:00
|
|
|
<button onclick="cuser_authorize()">Log in with Burgerauth Account (custom username)</button>
|
|
|
|
|
<br><br>
|
2024-05-14 07:35:55 +01:00
|
|
|
<button onclick="window.location.href = '/login'">Use legacy login</button>
|
|
|
|
|
</div>
|
2024-05-14 01:23:03 +01:00
|
|
|
|
|
|
|
|
<script>
|
2024-05-15 19:45:36 +01:00
|
|
|
function getCookie(name) {
|
|
|
|
|
var nameEQ = name + "=";
|
|
|
|
|
var ca = document.cookie.split(';');
|
|
|
|
|
for (var i = 0; i < ca.length; i++) {
|
|
|
|
|
var c = ca[i];
|
|
|
|
|
while (c.charAt(0) === ' ') c = c.substring(1, c.length);
|
|
|
|
|
if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
|
|
|
|
|
}
|
|
|
|
|
return null;
|
|
|
|
|
}
|
|
|
|
|
|
2024-05-14 01:23:03 +01:00
|
|
|
// Configuration
|
|
|
|
|
const clientId = 'jT89GqLCqobN3pb6Rgkk0klDyicUbdjY';
|
|
|
|
|
const redirectUri = 'https://cat.hectabit.org/oauth';
|
|
|
|
|
const authorizationEndpoint = 'https://auth.hectabit.org/login';
|
|
|
|
|
const tokenEndpoint = 'https://auth.hectabit.org/api/tokenauth';
|
|
|
|
|
const userinfoEndpoint = 'https://auth.hectabit.org/userinfo'; // Added userinfo endpoint
|
|
|
|
|
|
|
|
|
|
// Generate a random code verifier
|
|
|
|
|
function generateCodeVerifier() {
|
|
|
|
|
const charset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789-._~";
|
|
|
|
|
const length = 128;
|
|
|
|
|
return Array.from(crypto.getRandomValues(new Uint8Array(length)))
|
|
|
|
|
.map((x) => charset[x % charset.length])
|
|
|
|
|
.join("");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Create a code challenge from the code verifier using SHA-256
|
|
|
|
|
async function createCodeChallenge(codeVerifier) {
|
|
|
|
|
const buffer = new TextEncoder().encode(codeVerifier);
|
|
|
|
|
const hashArrayBuffer = await crypto.subtle.digest('SHA-256', buffer);
|
|
|
|
|
const hashBase64 = btoa(String.fromCharCode(...new Uint8Array(hashArrayBuffer)))
|
|
|
|
|
.replace(/=/g, '')
|
|
|
|
|
.replace(/\+/g, '-')
|
|
|
|
|
.replace(/\//g, '_');
|
|
|
|
|
return hashBase64;
|
|
|
|
|
}
|
|
|
|
|
|
2024-05-15 19:45:36 +01:00
|
|
|
|
|
|
|
|
function cuser_authorize() {
|
|
|
|
|
document.cookie = "prefuser" + "=" + window.prompt("Choose your custom username (cannot be longer than 20 characters)") + "; expires=Session" + "; path=/" + "; samesite=Strict";
|
|
|
|
|
authorize()
|
|
|
|
|
}
|
|
|
|
|
|
2024-05-14 01:23:03 +01:00
|
|
|
// Authorization function with PKCE
|
|
|
|
|
function authorize() {
|
|
|
|
|
const codeVerifier = generateCodeVerifier();
|
|
|
|
|
localStorage.setItem('codeVerifier', codeVerifier); // Store code verifier
|
|
|
|
|
createCodeChallenge(codeVerifier)
|
|
|
|
|
.then((codeChallenge) => {
|
|
|
|
|
const authorizationUrl = `${authorizationEndpoint}?response_type=code&client_id=${clientId}&redirect_uri=${encodeURIComponent(redirectUri)}&code_challenge=${codeChallenge}&code_challenge_method=S256`;
|
|
|
|
|
window.location.href = authorizationUrl;
|
|
|
|
|
})
|
|
|
|
|
.catch((error) => {
|
|
|
|
|
console.error('Error generating code challenge:', error);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Parse the authorization code from the URL
|
|
|
|
|
function parseCodeFromUrl() {
|
|
|
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
|
|
|
return urlParams.get('code');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Exchange authorization code for access token
|
|
|
|
|
async function exchangeCodeForToken(code) {
|
|
|
|
|
const codeVerifier = localStorage.getItem('codeVerifier'); // Retrieve code verifier
|
|
|
|
|
const formData = new URLSearchParams();
|
|
|
|
|
formData.append('client_id', String(clientId));
|
|
|
|
|
formData.append('code', String(code));
|
|
|
|
|
formData.append('redirect_uri', String(redirectUri));
|
|
|
|
|
formData.append('grant_type', 'authorization_code');
|
|
|
|
|
formData.append('code_verifier', String(codeVerifier));
|
|
|
|
|
|
|
|
|
|
const response = await fetch(tokenEndpoint, {
|
|
|
|
|
method: 'POST',
|
|
|
|
|
headers: {
|
|
|
|
|
"Content-Type": "application/x-www-form-urlencoded"
|
|
|
|
|
},
|
|
|
|
|
body: formData
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const data = await response.json();
|
|
|
|
|
const accessToken = data.access_token;
|
|
|
|
|
const idToken = data.id_token;
|
|
|
|
|
|
|
|
|
|
// Request userinfo with id_token in bearer format
|
|
|
|
|
fetch(userinfoEndpoint, {
|
|
|
|
|
headers: {
|
|
|
|
|
"Authorization": `Bearer ${idToken}`
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
.then((response) => {
|
|
|
|
|
async function doStuff() {
|
|
|
|
|
if (response.status == 200) {
|
|
|
|
|
const userinfoData = await response.json();
|
|
|
|
|
console.log("User:", userinfoData.name)
|
|
|
|
|
console.log("Sub:", userinfoData.sub);
|
2024-05-15 19:45:36 +01:00
|
|
|
let preferreduser = userinfoData.name
|
|
|
|
|
if (getCookie("prefuser") != "") {
|
|
|
|
|
preferreduser = getCookie("prefuser")
|
|
|
|
|
}
|
2024-05-14 01:23:03 +01:00
|
|
|
document.getElementById("text").innerText = "Authenticating, " + userinfoData.name;
|
|
|
|
|
fetch("https://cat.hectabit.org/api/oauth", {
|
|
|
|
|
method: "POST",
|
|
|
|
|
headers: {
|
|
|
|
|
"Content-Type": "application/json"
|
|
|
|
|
},
|
|
|
|
|
body: JSON.stringify({
|
2024-05-15 19:45:36 +01:00
|
|
|
username: preferreduser,
|
|
|
|
|
access_token: data.access_token,
|
|
|
|
|
sub: userinfoData.sub
|
2024-05-14 01:23:03 +01:00
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
.then((response) => {
|
|
|
|
|
async function doStuff2() {
|
|
|
|
|
let key = await response.json()
|
|
|
|
|
if (response.status == 200) {
|
|
|
|
|
document.cookie = "session_DO_NOT_SHARE" + "=" + (key["key"] || "") + "; expires=Session" + "; path=/" + "; samesite=Strict";
|
|
|
|
|
window.location.replace("/")
|
2024-05-15 19:45:36 +01:00
|
|
|
} else if (response.status == 422) {
|
|
|
|
|
document.getElementById("text").innerText = "Username taken. Migrate or choose a new custom username!"
|
2024-05-14 01:23:03 +01:00
|
|
|
} else {
|
|
|
|
|
document.getElementById("text").innerText = "Failed: " + key["error"]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
doStuff2()
|
|
|
|
|
});
|
2024-05-15 19:45:36 +01:00
|
|
|
localStorage.setItem("user", preferreduser)
|
2024-05-14 01:23:03 +01:00
|
|
|
} else {
|
|
|
|
|
document.getElementById("text").innerText = "Authentication failed"
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
doStuff()
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Main function to handle OAuth2 flow
|
|
|
|
|
async function main() {
|
|
|
|
|
if (localStorage.getItem("user") !== null) {
|
|
|
|
|
document.getElementById("text").innerText = "Welcome back, " + localStorage.getItem("user")
|
|
|
|
|
}
|
|
|
|
|
const code = parseCodeFromUrl();
|
|
|
|
|
if (code) {
|
|
|
|
|
await exchangeCodeForToken(code);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Call the main function on page load
|
|
|
|
|
main();
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
