Guide du développeur: comment implémenter Passkeys

Ce guide montre aux développeurs comment ajouter une authentification basée sur la clé passante pour une meilleure sécurité et une meilleure expérience utilisateur. Il explique à la fois la configuration manuelle du serveur et du client, et comment la descope simplifie cela avec une interface visuelle et des flux pré-construits.

Ce tutoriel est de Kumar Harsh, développeur de logiciels et auteur technique de l'Inde. Voir plus de son travail sur son site Web!

L'utilisation de Passkeys améliore la sécurité des applications et la commodité des utilisateurs. Ce guide détaille l'implémentation de lakeke, de la configuration au déploiement. Suivre ces étapes crée une expérience d'authentification sécurisée et conviviale, réduisant l'accès non autorisé et la confiance des utilisateurs.

Authentification Passkey: les bases

Contrairement aux mots de passe vulnérables, PassKeys utilise la cryptographie à clé publique pour améliorer la sécurité et l'expérience utilisateur. Pensez à un coffre-fort: votre identité est sécurisée, accessible uniquement avec une paire de clés unique. Passkeys fonctionne de la même manière; Chaque utilisateur a une clé privée (stockée en toute sécurité sur son appareil) et une clé publique partagée avec les sites Web.

La connexion implique que le site Web envoie un défi à l'appareil de l'utilisateur. La clé privée crée une signature unique (une empreinte digitale numérique), vérifiant l'identité sans révéler la clé elle-même. Cela maintient les connexions sécurisées même si le site Web est compromis.

Voici une représentation visuelle:

Fig: Cérémonie d'authentification passante

Implémentation de Passkeys: l'approche manuelle (et pourquoi vous ne devriez pas)

Bien que Passkeys soit innovant, la mise en œuvre manuelle est complexe et découragée en raison des difficultés de configuration et des risques de sécurité. Il est préférable d'utiliser une bibliothèque prise en charge.

Généralement, la mise en œuvre manuelle implique:

• Configuration côté serveur: Cela inclut la génération de clés, la vérification de la signature, la gestion de l'attestation et l'intégration de la base de données pour les informations des utilisateurs et les informations d'identification de la clé.
• Frontend Integration: en utilisant JavaScript et navigator.credentials.create(), le client guide les utilisateurs à travers les interactions authentificatrices (analyses d'empreintes digitales, broches, etc.) et envoie des données au serveur. navigator.credentials.get()

Les bibliothèques comme Simplewebuthn simplifient cela. Il gère la génération de clés, ce qui rend le processus plus facile qu'une approche manuelle.

(Un projet REACT Client et Node.js Express Server Exemple utilisant Simplewebuthn est disponible.)

Configuration côté serveur (en utilisant Simplewebuthn)

Le serveur utilise le package

avec quatre points de terminaison clés: @simple-webauthn/server

1. /generate-registration-options: configure et génère des options d'enregistrement pour le client, empêchant plusieurs enregistrements du même appareil. Il génère également un défi.
2. /verify-registration: vérifie l'inscription réussie sur les appareils et enregistre les détails de l'utilisateur (clé publique, identifiant d'identification, informations sur l'appareil) dans la base de données.
3. /generate-authentication-options: Renvoie les options d'authentification, récupérer l'ID de périphérique enregistré.
4. /verify-authentication: Vérifie une authentification réussie sur les appareils à l'aide d'un périphérique enregistré.

Cet exemple omet l'intégration de la base de données; Vous devrez ajouter cela pour une utilisation en production.

Configuration côté client (en utilisant Simplewebuthn)

Le client a besoin de deux boutons (pour l'enregistrement et l'authentification). onRegistrationStart demande la configuration de /generate-registration-options, puis utilise startRegistration() depuis @simple-webauthn/browser. Après une inscription réussie, /verify-registration vérifie le résultat. L'authentification suit un modèle similaire en utilisant /generate-authentication-options, startAuthentication() et /verify-authentication.

Cette méthode manuelle est complexe et nécessite une configuration et une maintenance supplémentaires pour l'identification des utilisateurs et le stockage des données. La configuration HTTPS nécessite des étapes supplémentaires.

Le moyen la plus facile: implémenter PassKeys avec Descope

Descope simplifie la mise en œuvre de la clé passante, éliminant la configuration manuelle complexe. Il fournit une interface sans code pour gérer les flux d'authentification.

Création de flux de descope

1. Inscrivez-vous à un compte Descope.
2. Dans le tableau de bord, créez un flux d'automne. Sélectionnez PassKeys (WebAuthn) comme méthode principale.
3. éventuellement, ajoutez une méthode 2FA.
4. Choisissez un écran de connexion (potentiellement avec des méthodes d'enregistrement supplémentaires).
5. Descope génère votre flux d'autant et fournit un extrait de code avec votre ID de projet.

Configuration d'un projet React

1. Créez un nouveau projet React en utilisant npm create vite.
2. Installez le SDK DESCOPE: npm install @descope/react-sdk.
3. Configurez le AuthProvider dans main.jsx avec votre ID de projet.
4. Utilisez des composants et des crochets Descope dans App.js pour implémenter le flux d'authentification.

Cet exemple simplifié montre comment intégrer le flux d'inscription ou de connexion de Descope:

// Simplified App.js example
import { useDescope, useSession } from '@descope/react-sdk';
import { Descope } from '@descope/react-sdk';

const App = () => {
  const { isAuthenticated, isSessionLoading } = useSession();
  const { logout } = useDescope();

  return (
    <div>
      {!isAuthenticated && (
        <Descope flowId="sign-up-or-in" onSuccess={(e) => console.log(e.detail.user)} onError={(e) => console.log('Error!')} />
      )}
      {isAuthenticated && <button onClick={logout}>Logout</button>}
    </div>
  );
};

Essayer l'application

Exécutez npm run dev et accédez à l'application à http://localhost:5173. Enregistrez un utilisateur, configurez PassKeys et testant la connexion. Vous pouvez également activer la mise au point automatique Passkey dans le tableau de bord Descope.

(Le code complet est disponible sur github.)

Authentification de glisser-déposer de Descope

DESCOPE STOURSILINES Implémentation PassKey avec une interface glisser-déposer pour gérer les flux d'authentification. Cela simplifie la configuration et la modification, ce qui le rend accessible aux développeurs de tous les niveaux de compétence. Il permet des connexions plus faciles, plus rapides et plus accessibles.

Inscrivez-vous à un compte Descope gratuit pour en savoir plus.

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!