Entwicklerhandbuch: So implementieren Sie Passkeys

Dieser Leitfaden zeigt Entwicklern, wie die PassKey-basierte Authentifizierung für eine bessere Sicherheit und Benutzererfahrung hinzufügt. Es erläutert sowohl den manuellen Server als auch das Client-Setup und wie Descope dies mit einer visuellen Schnittstelle und vorgefertigten Flows vereinfacht.

Dieses Tutorial stammt von Kumar Harsh, einem Softwareentwickler und technischen Autor aus Indien. Sehen Sie mehr von seiner Arbeit auf seiner Website!

Verwenden von PassKeys verbessert die Anwendungssicherheit und die Benutzerkontrolle. Diese Handbuchdetails Die PassKey -Implementierung vom Setup bis zur Bereitstellung. Das Befolgen dieser Schritte schafft ein sicheres und benutzerfreundliches Authentifizierungserlebnis, wodurch der unbefugte Zugriff verringert wird und Benutzervertrauen aufgebaut wird.

PassKey -Authentifizierung: Die Grundlagen

Im Gegensatz zu schutzbedürftigen Passwörtern verwenden Passkeys Kryptographie für öffentliche Key, um sowohl die Sicherheit als auch die Benutzererfahrung zu verbessern. Denken Sie an ein Gewölbe: Ihre Identität ist gesichert und nur mit einem einzigartigen Schlüsselpaar zugänglich. Passkeys funktionieren ähnlich; Jeder Benutzer verfügt über einen privaten Schlüssel (sicher auf seinem Gerät gespeichert) und einen öffentlichen Schlüssel mit Websites.

Login beinhaltet die Website, die eine Herausforderung an das Gerät des Benutzers sendet. Der private Schlüssel erstellt eine einzigartige Signatur (einen digitalen Fingerabdruck), der die Identität überprüft, ohne den Schlüssel selbst zu enthüllen. Dadurch wird sich die Anmeldungen sicher, auch wenn die Website beeinträchtigt ist.

Hier ist eine visuelle Darstellung:

Abb.: PassKey -Authentifizierungszeremonie

Implementieren von Passkeys: Der manuelle Ansatz (und warum Sie nicht sollten)

Während Passkeys innovativ sind, ist die manuelle Implementierung komplex und aufgrund von Schwierigkeits- und Sicherheitsrisiken eingerichtet. Es ist am besten, eine unterstützte Bibliothek zu verwenden.

Im Allgemeinen beinhaltet die manuelle Implementierung:

• serverseitiges Setup: Dies umfasst die Schlüsselgenerierung, die Überprüfung der Signatur, die Begleiterung und die Datenbankintegration für Benutzerinformationen und PassKey-Anmeldeinformationen.
• Frontend -Integration: Verwenden von JavaScripts navigator.credentials.create() und navigator.credentials.get() führt der Client Benutzer durch Authentikatoren -Interaktionen (Fingerabdruck -Scans, Pins usw.) und sendet Daten an den Server.

Bibliotheken wie Simplewebauthn vereinfachen dies. Es behandelt die Schlüsselgenerierung und erleichtert den Prozess als ein manueller Ansatz.

(Ein React -Client und Node.js Express Server -Beispielprojekt mit SimpleWebebauthn ist verfügbar.)

serverseitiges Setup (mit SimpleWebAauthn)

Der Server verwendet das @simple-webauthn/server -Paket mit vier Schlüsselendpunkten:

1. /generate-registration-options: Konfiguriert und generiert Registrierungsoptionen für den Client, wodurch mehrere Registrierungen aus demselben Gerät verhindert werden. Es erzeugt auch eine Herausforderung.
2. /verify-registration: Überprüft die erfolgreiche Registrierung von On-Geräte und speichert Benutzerdetails (öffentlicher Schlüssel, Anmeldeinformationen, Geräteinformationen) in der Datenbank.
3. /generate-authentication-options: Gibt Authentifizierungsoptionen zurück, wobei die registrierte Geräte -ID abgerufen wird.
4. /verify-authentication: Überprüft die erfolgreiche On-Device-Authentifizierung mit einem registrierten Gerät.

Dieses Beispiel lässt die Datenbankintegration aus; Sie müssen das hinzufügen, um die Produktion zu verwenden.

clientseitiges Setup (mit SimpleWebAauthn)

Der Kunde benötigt zwei Schaltflächen (zur Registrierung und Authentifizierung). onRegistrationStart fordert die Konfiguration von /generate-registration-options an und verwendet dann startRegistration() aus @simple-webauthn/browser. Nach erfolgreicher Registrierung überprüft /verify-registration das Ergebnis. Die Authentifizierung folgt einem ähnlichen Muster mit /generate-authentication-options, startAuthentication() und /verify-authentication.

Diese manuelle Methode ist komplex und erfordert zusätzliche Einrichtung und Wartung für die Benutzeridentifikation und die Datenspeicherung. Das HTTPS -Setup erfordert zusätzliche Schritte.

Auf dem einfacheren Weg: Implementieren von Passkeys mit Descope

Descope vereinfacht die PassKey -Implementierung und beseitigt das komplexe manuelle Setup. Es bietet eine No-Code-Schnittstelle zum Verwalten der Authentifizierungsflüsse.

Erstellen von Descope -Flows

1. Melden Sie sich für ein Descope -Konto an.
2. Erstellen Sie im Dashboard einen Auth -Fluss. Wählen Sie Passkeys (WebAuthn) als primäre Methode.
3. Fügen Sie optional eine 2FA -Methode hinzu.
4. Wählen Sie einen Anmeldebildschirm (möglicherweise mit zusätzlichen Registrierungsmethoden).
5. Descope generiert Ihren Auth -Fluss und bietet ein Code -Snippet mit Ihrer Projekt -ID.

Einrichten eines React -Projekts

1. Erstellen Sie ein neues React -Projekt mit npm create vite.
2. Installieren Sie das Descope SDK: npm install @descope/react-sdk.
3. Konfigurieren Sie die AuthProvider in main.jsx mit Ihrer Projekt -ID.
4. Verwenden Sie Descope -Komponenten und Haken in App.js, um den Authentifizierungsfluss zu implementieren.

Dieses vereinfachte Beispiel zeigt, wie die Anmelde- oder Anmeldefluss von Descope integriert wird:

<code class="language-javascript">// 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>}
    </descope>
</div>
  );
};</code>

ausprobieren Sie die App

Ausführen npm run dev und greifen Sie auf die App bei http://localhost:5173 zu. Registrieren Sie einen Benutzer, richten Sie Passkeys ein und testen Sie die Anmeldung. Sie können das Passkey -Autofill auch im Descope -Dashboard aktivieren.

(Der vollständige Code ist auf GitHub verfügbar.)

Descope's Drag & Drop-Authentifizierung

Descope-Stromlinien-PassKey-Implementierung mit einer Drag-and-Drop-Schnittstelle zum Verwalten der Authentifizierungsflüsse. Dies vereinfacht das Setup und Modifikation und macht es Entwicklern aller Fähigkeiten zugänglich. Es ermöglicht einfachere, schnellere und zugängliche Anmeldungen.

Melden Sie sich für ein kostenloses Descope -Konto an, um mehr zu erfahren.

Das obige ist der detaillierte Inhalt vonEntwicklerhandbuch: So implementieren Sie Passkeys. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!