Verwenden Sie @capgo/capacitor-passkey

Halten Sie Ihren Browser-WebAuthn-code in einer Capacitor-App, während das Plugin native Passkey-Aufrufe und native Host-Patching handhabt.

Browser-API

@capgo/capacitor-passkey Halten Sie den gleichen WebAuthn-Fluss bei, den Sie bereits im Web verwenden:

await navigator.credentials.create({ publicKey: registrationOptions });
await navigator.credentials.get({ publicKey: requestOptions });

Bei nativen Builds installiert das Plugin einen Shim für navigator.credentials.create() und navigator.credentials.get()Installieren und synchronisieren Sie native Projekte

und leitet die Anfrage an die iOS- und Android-Passkey-APIs weiter und liefert browserähnliche Anmeldeobjekte an Ihre App zurück.

bun add @capgo/capacitor-passkey
bunx cap sync

Konfigurieren Sie die App einmal

Fügen Sie die Plugin-Konfiguration in capacitor.config.ts oder capacitor.config.json:

import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'app.capgo.passkey.example',
  appName: 'My App',
  webDir: 'dist',
  plugins: {
    CapacitorPasskey: {
      origin: 'https://signin.example.com',
      autoShim: true,
      domains: ['signin.example.com'],
    },
  },
};

export default config;

Was macht die Plugin-Konfiguration?

Die Konfiguration wird aus plugins.CapacitorPasskey in capacitor.config.*.

origin: primäre HTTPS-Vertrauensstelle, die vom Shim und direkt verwendet wird API
domains: zusätzliche Vertrauensstellen, die in die native Konfiguration während des Synchronisierungsprozesses eingepflegt werden
autoShim: standardmäßig true und steuert die native cap sync Automatisierung der Konfiguration

Führen Sie den Synchronisierungsprozess erneut durch, nachdem Sie die Konfiguration geändert haben:

bunx cap sync

Installieren Sie den Shim während des Bootstraps

Importieren Sie das Plugin aus dem Standard-Paket-Eintrittspunkt und installieren Sie den Shim während des Anwendungs-Bootstraps:

import { CapacitorPasskey } from '@capgo/capacitor-passkey';

await CapacitorPasskey.autoShimWebAuthn();

Nachdem Sie das getan haben, kann Ihr bestehender Browser-Stil-Passwort code unverändert bleiben.

Wenn Sie den Shim zwingen oder den konfigurierten Ursprung bei Laufzeit überschreiben müssen, rufen Sie:

import { CapacitorPasskey } from '@capgo/capacitor-passkey';

CapacitorPasskey.shimWebAuthn({
  origin: 'https://signin.example.com',
});

Behalten Sie Ihren normalen WebAuthn-Flow bei

const credential = await navigator.credentials.create({
  publicKey: registrationOptions,
});

const assertion = await navigator.credentials.get({
  publicKey: requestOptions,
});

Was synchronisiert Etwas für Sie

Während bunx cap sync, aktualisiert das Plugin die generierten native Host-Projekte:

iOS: Zugehörigkeitsberechtigungen und Xcode-Berechtigungen-Verkabelung, wenn erforderlich
Android: asset_statements Metadaten und das generierte Ressourcen, das vom Manifest verwendet wird

Die native Einrichtung benötigt immer noch Website-Vertrauensdateien

Das Plugin reduziert die Arbeit auf der App-Seite, aber Passkeys hängen immer noch von den Vertrauensdateien der Website für Ihren Relying-Party-Domain ab. Sie müssen immer noch hosten:

https://your-domain/.well-known/apple-app-site-association
https://your-domain/.well-known/assetlinks.json

Das Plugin kann die generierten native Projekte während des Synchronisierens anpassen, kann diese aber nicht erstellen oder hosten.

Andere öffentliche Methoden

Der öffentliche Plugin API enthält auch die direkten Hilfsmittel, die in src/definitions.ts:

await CapacitorPasskey.getConfiguration() gibt die aufgelöste origin, domains, autoShim, und aktuelle platform.
await CapacitorPasskey.createCredential(...) registriert einen Passkey aus einem JSON-sicheren WebAuthn-Payload.
await CapacitorPasskey.getCredential(...) authentifiziert sich mit einem bestehenden Passkey aus einem JSON-sicheren WebAuthn-Payload.
await CapacitorPasskey.isSupported() berichtet, ob die aktuelle Laufzeitumgebung Passkeys unterstützt.
await CapacitorPasskey.getPluginVersion() gibt die aktuelle native Implementierungsversionssymbol zurück.

Plattform-Anleitungen

Wichtiger Hinweis für iOS

Bei iOS 17.4 und neuer verwendet das Plugin die browserartige Client-Daten API , sodass der konfigurierte HTTPS- Ursprung im clientDataJSON.

Wichtiger Android-Hinweis

Der Android Credential Manager kann die gleiche Relying-Party und Passwörter wie Ihre Website teilen, wenn Digital Asset Links konfiguriert sind, aber die native Behauptung-Ursprung ist nicht identisch mit einem Browser-Ursprung. Wenn Ihr Backend streng die Validierung clientDataJSON.originstellt sicher, dass es die Android-App-Ursprung neben Ihrer Website-Ursprung akzeptiert.

Vollständige Referenz

GitHub: https://github.com/Cap-go/capacitor-passkey/
Dokumentation: /docs/plugins/passkey/

Fortsetzen von @capgo/capacitor-passkey

Wenn Sie @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-passkey verwenden Verwenden Sie @capgo/capacitor-passkey Um die Authentifizierung und die Kontoflussplanung zu verbinden, verwenden Sie @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-passkey Um die Implementierungsdetails in @capgo/capacitor-passkey zu erhalten for the implementation detail in @capgo/capacitor-passkey, Um die Implementierungsdetails in Getting Started zu erhalten @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login Um die Implementierungsdetails in @capgo/capacitor-social-login zu erhalten @capgo/capacitor-native-biometric Um die Implementierungsdetails in @capgo/capacitor-native-biometric zu erhalten for the implementation detail in @capgo/capacitor-native-biometric, and Doppelauthentifizierung zur Implementierungsdetail in Doppelauthentifizierung.

Passkey

Tutorial zu Passkey