Mit Links
Login Programmieren?
Ich bin gerade dabei eine Webseite zu Programmieren und will sie dan kostenlos über Cloudflare Hosten. Dabei stose ich auf probleme. Also in meiner webseite soll man sich anmelden können ich hebe dazu ein test erstellt. In cloutflare habe ich einen Worker erstellt dann habe ich diesen code eingegeben
const users = [
{ username: 'user1', password: 'password1' },
{ username: 'user2', password: 'password2' }
];
addEventListener('fetch', event => {
event.respondWith(handleRequest(event.request));
});
async function handleRequest(request) {
if (request.method === 'POST') {
try {
const { username, password } = await request.json();
const user = users.find(
user => user.username === username && user.password === password
);
if (user) {
return new Response(JSON.stringify({ success: true, message: 'Login erfolgreich' }), {
headers: { 'Content-Type': 'application/json' },
});
} else {
return new Response(JSON.stringify({ success: false, message: 'Ungültige Anmeldedaten' }), {
headers: { 'Content-Type': 'application/json' },
});
}
} catch (error) {
return new Response(JSON.stringify({ success: false, message: 'Fehler beim Verarbeiten der Anfrage' }), {
headers: { 'Content-Type': 'application/json' },
});
}
} else if (request.method === 'GET') {
if (request.url.endsWith('/favicon.ico')) {
// Hier können Sie eine spezifische Antwort für favicon.ico zurückgeben
return new Response(null, { status: 204 }); // Hier 204 bedeutet "No Content"
} else {
// Beispiel: Eine allgemeine Antwort für GET-Anfragen
return new Response('Hello from Cloudflare Worker!', {
headers: { 'Content-Type': 'text/plain' },
});
}
} else {
return new Response('Method Not Allowed', { status: 405 });
}
}
wenn ich ihn starte gibt er das aus:
Hello from Cloudflare Worker!
das ist das anmelde formular:
wenn man sein password eingibt kommt eine Fehlermeldung
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<title>Login</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.login-container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.login-container h2 {
margin-bottom: 20px;
}
.login-container input {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
.login-container button {
width: 100%;
padding: 10px;
background-color: #28a745;
border: none;
border-radius: 4px;
color: #fff;
font-size: 16px;
cursor: pointer;
}
.login-container button:hover {
background-color: #218838;
}
</style>
</head>
<body>
<div class="login-container">
<h2>Login</h2>
<form id="loginForm" onsubmit="handleLogin(event)">
<input type="text" id="username" placeholder="Benutzername" required>
<input type="password" id="password" placeholder="Passwort" required>
<button type="submit">Einloggen</button>
</form>
</div>
<script>
async function handleLogin(event) {
event.preventDefault();
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
try {
console.log('Sending login request...');
const response = await fetch('https://login. … .workers.dev/', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
// Weitere Header, falls erforderlich
},
body: JSON.stringify({ username, password })
});
console.log('Response received:', response);
if (!response.ok) {
throw new Error('Network response was not ok');
}
const result = await response.json();
console.log('Result:', result);
if (result.success) {
alert('Login erfolgreich');
// Weiterleitung oder zusätzliche Logik hier einfügen
} else {
alert('Ungültige Anmeldedaten');
}
} catch (error) {
console.error('Es gab ein Problem mit dem Fetch-Betrieb:', error);
alert('Es gab ein Problem mit dem Login. Bitte versuche es später erneut.');
}
}
</script>
</body>
</html>
HTML,
CSS,
JavaScript,
HTML5,
cloudflare
