L'authentification unique (SSO) simplifiée

Qu'est-ce que l'authentification unique (SSO) ?

Frontend Single Sign-On (SSO) est une méthode d'authentification et d'autorisation utilisateur permettant aux utilisateurs d'accéder à plusieurs applications ou sites Web à l'aide d'un seul ensemble d'informations d'identification de connexion, éliminant ainsi les connexions et enregistrements répétés. Cela améliore l'expérience utilisateur, réduit les coûts de maintenance et renforce la sécurité.

Mise en œuvre de solutions d'authentification unique

Il existe plusieurs approches clés pour la mise en œuvre du SSO frontend :

SSO basé sur les cookies

Cette méthode largement utilisée exploite le mécanisme de cookies du navigateur. Lors de la première connexion à une page d'authentification centrale (par exemple, la page A), un cookie crypté contenant les données utilisateur et un délai d'expiration est créé. Le domaine du cookie est défini sur le domaine de premier niveau (comme exemple.com), permettant le partage entre les applications de ce domaine (a.example.com, b.example.com, etc.). L'accès ultérieur à d'autres applications vérifie ce cookie ; s'il est présent, l'utilisateur est automatiquement connecté ; sinon, une redirection vers la page d'authentification se produit. Bien que simple, cette approche est limitée aux applications du même domaine, est confrontée à des défis inter-domaines et comporte des limites en termes de taille et de quantité de cookies.

Exemple : Définition et récupération d'un cookie.

Définition d'un cookie (Page A) :

// Generate an encrypted cookie value
const encryptedValue = encrypt(userinfo);

// Set the cookie
document.cookie = `sso_token=${encryptedValue};domain=.example.com;path=/;max-age=86400;`;

Récupération et utilisation d'un cookie (Page B) :

// Retrieve the cookie
const cookieValue = document.cookie
  .split(';')
  .find((cookie) => cookie.trim().startsWith('sso_token='))
  .split('=')[1];

// Decrypt the cookie
const userinfo = decrypt(cookieValue);

// Log in directly
login(userinfo);

SSO basé sur des jetons

Cette méthode sans état consiste à générer un jeton crypté (contenant les informations utilisateur et l'expiration) lors d'une connexion réussie au centre d'authentification. Ce jeton est stocké côté client (localStorage ou sessionStorage). L'accès ultérieur à l'application vérifie le jeton ; un jeton valide accorde un accès direct, tandis qu'un jeton non valide redirige vers le centre d'authentification. L'authentification unique basée sur les jetons prend en charge les fonctionnalités inter-domaines et évite les limitations des cookies, mais nécessite un stockage et une surcharge réseau supplémentaires, et présente des risques de sécurité si les jetons sont compromis.

Exemple : stockage et vérification d'un jeton.

Stockage d'un jeton (Page A) :

// Generate the token value
const token = generateToken(userinfo);

// Store the token
localStorage.setItem('sso_token', token);

Récupération et utilisation d'un token (autres pages) :

// Retrieve the token
const token = localStorage.getItem('sso_token');

// Validate the token
const userinfo = verifyToken(token);

// Log in directly
login(userinfo);

SSO basé sur OAuth 2.0

Cette méthode utilise le flux de code d'autorisation d'OAuth 2.0. La connexion initiale déclenche une requête au centre d'authentification, qui renvoie un code d'autorisation et redirige vers l'URL de rappel de l'application. L'application échange ce code contre des jetons d'accès et d'actualisation (contenant les données utilisateur et les délais d'expiration), stockés côté client. L'accès ultérieur à l'application recherche un jeton d'accès valide, se connecte automatiquement s'il est trouvé, sinon il est redirigé vers le centre d'authentification. Tout en adhérant aux normes OAuth 2.0 et en prenant en charge différents types de clients (Web, mobile, ordinateur de bureau), le système est plus complexe et nécessite plusieurs requêtes et redirections.

Exemple : flux de code d'autorisation.

Envoi d'une demande d'autorisation (Page A) :

// Generate an encrypted cookie value
const encryptedValue = encrypt(userinfo);

// Set the cookie
document.cookie = `sso_token=${encryptedValue};domain=.example.com;path=/;max-age=86400;`;

Gestion du rappel (Page A) :

// Retrieve the cookie
const cookieValue = document.cookie
  .split(';')
  .find((cookie) => cookie.trim().startsWith('sso_token='))
  .split('=')[1];

// Decrypt the cookie
const userinfo = decrypt(cookieValue);

// Log in directly
login(userinfo);

---

Leapcell : votre solution d'hébergement Node.js de premier ordre

Leapcell est une plateforme sans serveur de pointe pour l'hébergement Web, les tâches asynchrones et Redis, offrant :

• Prise en charge multilingue : Node.js, Python, Go et Rust.
• Projets gratuits et illimités : Ne payez que pour l'utilisation.
• Économique : Paiement à l'utilisation, sans frais d'inactivité.
• Expérience de développement simplifiée : Interface utilisateur intuitive, CI/CD automatisé, métriques en temps réel.
• Évolutif et hautes performances : Mise à l'échelle automatique, aucune surcharge opérationnelle.

Explorez la documentation et essayez-la !

Suivez-nous sur X : @LeapcellHQ

---

En savoir plus sur notre blog

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!