Beschrijf de mechaniek van het inlogproces van de…

De gebruiker voert zijn inloggegevens (gebruikersnaam en wachtwoord) in op de inlogpagina.
De browser stuurt een HTTP POST-verzoek naar de server met de ingevoerde gegevens.
De server ontvangt het verzoek en geeft de inloggegevens door aan de authenticatiecomponent.
De authenticatiecomponent verifieert de ontvangen gegevens met de informatie in de gebruikersdatabase:
- Controleert of er een gebruiker bestaat met die gebruikersnaam.
- Hash het ingevoerde wachtwoord en vergelijkt het met de hash van het wachtwoord dat voor die gebruiker is opgeslagen.
Bij succesvolle authenticatie:
- De server maakt een sessie voor de gebruiker aan of genereert een toegangstoken (bijvoorbeeld JWT).
- De sessie/het token wordt gekoppeld aan een unieke gebruikersidentificatie en bevat informatie over de toegangsrechten.
- De server stuurt een HTTP-antwoorp met code 200 OK en verzendt de sessie (via cookie) of het toegangstoken naar de browser van de gebruiker.
- De browser slaat de cookie of het token op.
- De gebruiker wordt doorgestuurd naar de hoofdpagina of de doelpagina.
Bij mislukte authenticatie (onjuist login of wachtwoord):
- De server stuurt een HTTP-antwoorp met een foutcode (bijvoorbeeld 401 Unauthorized) en een foutmelding.
- De browser toont een foutmelding aan de gebruiker op de inlogpagina.
Bij volgende verzoeken naar beveiligde bronnen stuurt de browser automatisch de opgeslagen sessie (cookie) of het toegangstoken in de HTTP-headers.
De server controleert de geldigheid van de sessie/het token en staat toegang toe tot de bron als de authenticatie is bevestigd en de gebruiker de benodigde rechten heeft.

Voorbeeld (pseudocode):

# Op de server
def login(username, password):
    user = database.find_user(username)
    if user and hash(password) == user.hashed_password:
        session_id = generate_session_id(user.id)
        database.save_session(session_id, user.id)
        return {"status": "success", "session_id": session_id}
    else:
        return {"status": "fail", "message": "Ongeldige inloggegevens"}

# Aan de client (in de browser)
async function handle_login_submit(event):
    event.preventDefault();
    const username = document.getElementById("username").value;
    const password = document.getElementById("password").value;

    const response = await fetch("/api/login", {
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify({ username, password })
    });

    const data = await response.json();
    if (data.status === "success") {
        // De server zal een cookie met session_id instellen, of we kunnen de token uit de reactie opslaan
        window.location.href = "/dashboard";
    } else {
        alert(data.message);
    }

Beschrijf de mechaniek van het inlogproces van de gebruiker in het systeem.