Hoe verloopt het authenticatieproces?

Het authenticatieproces van een gebruiker in een frontend-toepassing bestaat in grote lijnen uit de volgende stappen:

1. Verzoek om inloggegevens: De gebruiker voert zijn login en wachtwoord in op een formulier op de website of in de app.
2. Verzenden van gegevens naar de server: De frontend stuurt deze gegevens via een HTTP-verzoek (meestal POST) naar een speciale authenticatie-endpoint. De gegevens kunnen in JSON- of FormData-formaat worden verzonden.
3. Gegevens controleren op de server: De backend ontvangt de gegevens, controleert of ze in de database bestaan (bijvoorbeeld of de login overeenkomt met een bestaande gebruiker en of de hash van het ingevoerde wachtwoord overeenkomt met de hash in de database).
4. Token/sessie genereren: Als de gegevens correct zijn, genereert de server een unieke authenticatietoken. Dit kan zijn:
   • Sessies ID: De server maakt een sessie aan en koppelt deze aan de gebruiker, en stuurt de sessie-ID (bijvoorbeeld in een HttpOnly cookie).
   • Token (bijvoorbeeld JWT): De server genereert een token met informatie over de gebruiker en zijn rechten, ondertekend met een geheime sleutel. Dit token wordt naar de client gestuurd.
5. Verzenden van het token/de sessie naar de client: De server antwoordt de frontend met het gegenereerde authenticatietoken.
   • Als een sessie-ID wordt gebruikt, wordt deze meestal via de Set-Cookie header verzonden.
   • Als een token wordt gebruikt, kan deze in de JSON-respons of in de Authorization header worden verzonden (Bearer <token>).
6. Opslaan van het token op de client: De frontend ontvangt het token en slaat het op voor latere verzoeken.
   • Het sessie-ID wordt automatisch opgeslagen in cookies door de browser.
   • Het token kan worden opgeslagen in localStorage, sessionStorage of cookies (HttpOnly flag voor beveiliging tegen XSS). Het wordt aanbevolen om HttpOnly cookies te gebruiken voor toegangstokens.
7. Gebruik van het token voor beveiligde verzoeken: Bij het uitvoeren van vervolgverzoeken naar beveiligde bronnen (die authenticatie vereisen), stuurt de frontend het opgeslagen token mee.
   • Voor sessies stuurt de browser automatisch de cookies mee.
   • Voor tokens moet de frontend het token expliciet toevoegen aan de Authorization header (Authorization: Bearer <token>).
8. Verificatie van het token op de server: Bij het ontvangen van elk verzoek aan een beveiligde bron, haalt de server het token uit het verzoek en controleert het op geldigheid (bijvoorbeeld, de vervaldatum, handtekening, aanwezigheid van een sessie met dat ID).
9. Autorisatie: Als het token geldig is, identificeert de server de gebruiker die aan dat token is gekoppeld en controleert zijn toegangsrechten tot de gevraagde bron.
10. Uitvoeren van het verzoek: Als de gebruiker geauthenticeerd en geautoriseerd is, voert de server het verzoek uit en stuurt een antwoord. Anders stuurt de server een foutmelding (401 Unauthorized of 403 Forbidden).

Deze authenticatieschema's kunnen variëren (op basis van sessies, JWT-tokens, OAuth2, OpenID Connect, enz.), maar de basisstappen voor het verkrijgen en gebruiken van een token voor gebruikersidentificatie blijven vergelijkbaar.

Voorbeeld van het verzenden van gegevens naar de server met fetch API en token:

// Gebruikersgegevens
const userData = {
  username: 'user123',
  password: 'securepassword'
};

// Gegevens naar de server sturen
fetch('/api/login', { // Authenticatie-endpoint
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(userData)
})
.then(response => {
  if (!response.ok) {
    throw new Error('Inloggen mislukt');
  }
  return response.json(); // We verwachten JSON met token
})
.then(data => {
  const authToken = data.token; // Token uit de respons
  localStorage.setItem('authToken', authToken); // Token opslaan
  console.log('Inloggen succesvol, token opgeslagen.');
  // Gebruiker doorverwijzen naar beveiligde pagina
})
.catch(error => {
  console.error('Authenticatie fout:', error);
  // Foutmelding tonen aan gebruiker
});

// Beveiligde aanvraag met opgeslagen token
const token = localStorage.getItem('authToken');
if (token) {
  fetch('/api/protected-resource', {
    method: 'GET',
    headers: {
      'Authorization': `Bearer ${token}` // Token toevoegen aan header
    }
  })
  .then(response => {
    if (!response.ok) {
      if (response.status === 401) {
        console.log('Token verlopen of ongeldig. Doorverwijzen naar login.');
        localStorage.removeItem('authToken');
        // window.location.href = '/login';
      }
      throw new Error('Fout bij ophalen beveiligd resource');
    }
    return response.json();
  })
  .then(data => {
    console.log('Beveiligde data:', data);
  })
  .catch(error => {
    console.error('Fout bij ophalen beveiligd resource:', error);
  });
} else {
  console.log('Geen auth token gevonden. Doorverwijzen naar login.');
  // window.location.href = '/login';
}

Belangrijke beveiligingsaspecten:

• Gebruik altijd HTTPS.
• Bewaar tokens veilig.
• Gebruik korte geldigheidsduur voor JWT-toegangstokens en vernieuwing met refresh tokens.
• Valideer alle gegevens op de server.