Comment se déroule le processus d'authentification…

Le processus d'authentification de l'utilisateur dans une application frontend consiste généralement en les étapes suivantes :

Demande d'identifiants : L'utilisateur saisit son nom d'utilisateur et son mot de passe dans un formulaire sur le site ou dans l'application.
Envoi des données au serveur : Le frontend envoie ces données au serveur (backend) via une requête HTTP (généralement POST) à un endpoint d'authentification spécifique. Les données peuvent être envoyées dans le corps de la requête au format JSON ou FormData.
Vérification côté serveur : Le backend reçoit les données, vérifie leur existence dans sa base de données (par exemple, si le nom d'utilisateur correspond à un utilisateur existant et si le hash du mot de passe saisi correspond au hash stocké).
Génération d'un token/session : Si les identifiants sont corrects, le serveur génère un jeton d'authentification unique. Cela peut être :
- ID de session : Le serveur crée une session et la lie à l'utilisateur, en envoyant au client un identifiant de session (par exemple, dans un cookie avec le drapeau HttpOnly).
- Token (par exemple, JWT) : Le serveur génère un jeton contenant des informations sur l'utilisateur et ses droits, le signant avec sa clé secrète. Ce jeton est envoyé au client.
Envoi du token/session au client : Le serveur répond au frontend en envoyant le jeton d'authentification généré.
- Si un ID de session est utilisé, il est généralement transmis dans l'en-tête HTTP Set-Cookie.
- Si un jeton est utilisé, il peut être envoyé dans le corps de la réponse (JSON) ou dans l'en-tête Authorization (par exemple, Bearer <jeton>).
Stockage du jeton côté client : Le frontend reçoit le jeton et le stocke pour les requêtes ultérieures.
- L'ID de session est stocké automatiquement dans les cookies du navigateur.
- Le jeton peut être stocké dans localStorage, sessionStorage ou cookies (avec le drapeau HttpOnly pour la protection contre XSS). Il est recommandé d'utiliser des cookies HttpOnly pour les jetons d'accès, car cela réduit le risque de vol via des attaques XSS. Pour JWT, un jeton de rafraîchissement peut également être stocké dans des cookies HttpOnly.
Utilisation du jeton pour des requêtes protégées : Lors de requêtes ultérieures à des ressources protégées (qui nécessitent une authentification), le frontend envoie le jeton stocké dans chaque requête.
- Pour les sessions, le navigateur envoie automatiquement les cookies correspondants avec l'ID de session.
- Pour les jetons, le frontend doit ajouter explicitement le jeton dans l'en-tête Authorization (par exemple, Authorization: Bearer <jeton>).
Vérification du jeton côté serveur : Lors de la réception de chaque requête à une ressource protégée, le serveur extrait le jeton de la requête et vérifie sa validité (par exemple, la date d'expiration du jeton, la signature du jeton, l'existence d'une session avec cet ID).
Autorisation : Si le jeton est valide, le serveur détermine quel utilisateur est associé à ce jeton et vérifie ses droits d'accès à la ressource demandée (il s'agit d'un processus d'autorisation, après l'authentification).
Exécution de la requête : Si l'utilisateur est authentifié et autorisé, le serveur exécute la requête et envoie la réponse. Sinon, il envoie une erreur (par exemple, 401 Unauthorized ou 403 Forbidden).

Les schémas d'authentification varient (basés sur des sessions, des tokens JWT, OAuth2, OpenID Connect, etc.), mais les étapes de base pour obtenir et utiliser un jeton pour identifier l'utilisateur restent similaires.

Exemple d'envoi de données au serveur (en utilisant fetch API et un jeton) :

// Données utilisateur
const userData = {
  username: 'user123',
  password: 'securepassword'
};

// Envoi de données au serveur
fetch('/api/login', { // Endpoint d'authentification sur le serveur
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(userData)
})
.then(response => {
  if (!response.ok) {
    throw new Error('Échec de la connexion');
  }
  return response.json(); // On s'attend à ce que le serveur renvoie un JSON avec le jeton
})
.then(data => {
  const authToken = data.token; // Récupération du jeton depuis la réponse du serveur
  localStorage.setItem('authToken', authToken); // Stockage du jeton (par exemple, dans localStorage)
  console.log('Connexion réussie, jeton sauvegardé.');
  // Rediriger l'utilisateur vers une page protégée
})
.catch(error => {
  console.error('Erreur d'authentification:', error);
  // Afficher un message d'erreur à l'utilisateur
});

// Exemple de requête protégée avec le jeton stocké
const token = localStorage.getItem('authToken');
if (token) {
  fetch('/api/protected-resource', {
    method: 'GET',
    headers: {
      'Authorization': `Bearer ${token}` // Ajout du jeton dans l'en-tête Authorization
    }
  })
  .then(response => {
    if (!response.ok) {
      if (response.status === 401) {
        console.log('Jeton expiré ou invalide. Redirection vers login.');
        // Le jeton n'est pas valide, le supprimer et rediriger
        localStorage.removeItem('authToken');
        // window.location.href = '/login'; // Exemple de redirection
      }
      throw new Error('Échec de la récupération de la ressource protégée');
    }
    return response.json();
  })
  .then(data => {
    console.log('Données protégées:', data);
  })
  .catch(error => {
    console.error('Erreur lors de la récupération de la ressource protégée:', error);
  });
} else {
  console.log('Aucun jeton d'authentification trouvé. Redirection vers login.');
  // window.location.href = '/login'; // Exemple de redirection
}

Aspects importants pour la sécurité :

Utilisez toujours HTTPS pour envoyer des identifiants et des tokens afin d'éviter leur interception.
Stockez les tokens de manière sécurisée (évitez de stocker des informations sensibles comme des mots de passe ou des tokens d'accès dans du code ou des champs publics).
Pour les tokens JWT : utilisez une courte durée de vie pour les tokens d'accès et actualisez-les avec des tokens de rafraîchissement stockés dans des cookies HttpOnly. Les tokens d'accès peuvent être stockés en mémoire ou dans localStorage, en tenant compte des risques XSS.
Validez toutes les données côté serveur.

Comment se déroule le processus d'authentification?