Comprendre le flux d'authentification

Qu'est-ce que le flux d'authentification ?

Le flux d'authentification est le processus de confirmation de l'identité d'un utilisateur et de gestion de son accès à certaines parties d'une application. Lorsque vous travaillez avec une application Web (comme un site de réseau social), cela implique de vérifier si l'utilisateur est bien celui qu'il prétend être (connexion), puis de lui donner accès à certaines fonctionnalités.

Comment ça marche dans React ?

Dans React, lorsque vous souhaitez gérer l'authentification des utilisateurs, vous interagissez généralement avec un serveur backend qui gère le gros du travail. Voici comment cela fonctionne généralement :

1. Points de terminaison d'inscription et de connexion

• Point final d'inscription : Lorsqu'un nouvel utilisateur s'inscrit, il envoie ses informations (comme son nom d'utilisateur, son e-mail, son mot de passe) au serveur. Le serveur crée ensuite un compte pour eux.
• Point de terminaison de connexion : Lorsqu'un utilisateur existant se connecte, il envoie son nom d'utilisateur et son mot de passe au serveur. Le serveur vérifie si ces informations sont correctes.

2. Jetons : jeton d'accès et jeton d'actualisation

Après une connexion réussie, le serveur renvoie deux jetons importants :

• Jeton d'accès :

  • C'est comme un pass à court terme qui permet à l'utilisateur d'accéder à certaines fonctionnalités de l'application. Sa durée de vie est généralement courte (dans ce cas, 5 minutes).
  • Chaque fois que l'utilisateur fait une demande (comme consulter son profil ou publier quelque chose), ce jeton est envoyé au serveur pour prouver qu'il est connecté.

• Actualiser le jeton :

  • C'est comme un laissez-passer de sauvegarde utilisé lorsque le jeton d'accès expire. C'est plus durable.
  • Lorsque le jeton d'accès expire (après 5 minutes), au lieu de obliger l'utilisateur à se reconnecter, l'application peut utiliser le jeton d'actualisation pour obtenir un nouveau jeton d'accès.

3. Stockage des jetons dans le navigateur

Une fois que l'utilisateur s'est connecté et a reçu ces jetons, l'application doit les stocker quelque part sur l'appareil de l'utilisateur. C'est là qu'intervient localStorage :

• localStorage : Il s'agit d'une fonctionnalité des navigateurs Web qui vous permet de stocker des données (comme les jetons) dans le navigateur de l'utilisateur.
  • Méthode setItem() : Ceci est utilisé pour stocker des données. Par exemple, vous stockez le jeton d'accès et le jeton d'actualisation avec quelque chose comme localStorage.setItem('accessToken', tokenValue).
  • Méthode getItem() : Ceci est utilisé pour récupérer les données stockées. Par exemple, vous obtenez le jeton d'accès stocké avec quelque chose comme localStorage.getItem('accessToken').

4. Faire des demandes avec le jeton d'accès

Chaque fois que l'utilisateur fait quelque chose qui nécessite une interaction avec le serveur (comme publier un statut ou consulter ses messages), l'application envoie une demande au serveur avec le jeton d'accès joint dans l'en-tête d'autorisation. Cela indique au serveur que l'utilisateur est connecté et autorisé à effectuer l'action.

5. Gestion des jetons expirés

• Expiration du jeton d'accès : Si le serveur répond avec une erreur 401, cela signifie que le jeton d'accès a expiré. L'application utilisera ensuite le jeton d'actualisation pour demander un nouveau jeton d'accès.

• Expiration du jeton d'actualisation : Si le jeton d'actualisation a également expiré (ce qui peut arriver après une longue période), le serveur répondra à nouveau avec une erreur 401. À ce stade, l'application redirigera l'utilisateur vers la page de connexion, lui demandant de se reconnecter pour obtenir de nouveaux jetons.

6. Renvoyer la demande ayant échoué

Une fois que l'application aura obtenu un nouveau jeton d'accès à l'aide du jeton d'actualisation, elle renverra la demande d'origine qui a échoué en raison de l'expiration du jeton. De cette façon, l'utilisateur ne subit aucune interruption.

Résumé

• Flux d'authentification : C'est ainsi que l'application confirme qui vous êtes et vous donne accès aux fonctionnalités.
• Jeton d'accès : Une clé à court terme pour accéder aux ressources de l'application. Expire rapidement.
• Actualiser le jeton : Une clé de sauvegarde à long terme pour obtenir un nouveau jeton d'accès lorsque l'ancien expire.
• localStorage : La manière dont le navigateur stocke ces jetons sur l'appareil de l'utilisateur.
• En-tête d'autorisation : Où le jeton d'accès est inclus dans les requêtes adressées au serveur.
• Erreur 401 : Un signal indiquant que le jeton a expiré et que l'application doit prendre des mesures (actualiser le jeton ou demander à l'utilisateur de se reconnecter).

Ce flux garantit que l'utilisateur peut rester connecté et utiliser l'application en toute sécurité sans avoir à ressaisir ses informations d'identification à tout moment.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!