Passkey Capacitor-Plugin

Verwenden Sie @capgo/capacitor-passkey

Halten Sie Ihren browser-stiligen WebAuthn code in einer Capacitor-App, während das Plugin native Passwortanrufe und native Host-Patching verarbeitet.

Browser-style API

@capgo/capacitor-passkey behält den gleichen WebAuthn-Flow bei sich, 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()und leitet die Anfrage an die iOS- und Android-Passkey-APIs weiter, und liefert browserartige Anmeldeobjekte an Ihre App zurück.

Installieren und synchronisieren Sie native Projekte

bun add @capgo/capacitor-passkey
bunx cap sync

Konfigurieren Sie die Host-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-Vertrauenswürdige-Quelle, die vom Shim und dem direkten API verwendet wird
• domains: extra relying-party hostnames to patch into native config during sync
• autoShim: standardmäßig true und steuert die native cap sync Automatisierung der Konfiguration

Run sync again after changing the config:

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();

Danach kann Ihr bestehender Browser-Stil-Passwort code unverändert bleiben.

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

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

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

Halten Sie Ihren normalen WebAuthn-Flow aufrecht

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

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

Was Synchronisierungspatches für Sie tun

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

• iOS: Berechtigungen für assoziierte Domains und Xcode-Berechtigungen werden wie erforderlich konfiguriert.
• Android: asset_statements Metadaten und die generierte Ressource, die vom Manifest verwendet wird

Nativsetup benötigt noch Website-Trust-Dateien

Der Plugin reduziert die App-Seitenaufgaben, aber Passkeys hängen immer noch von den Vertrauensdateien der Website für Ihren Relying-Party-Domain ab. Sie benötigen immer noch, um zu hosten:

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

Das Plugin kann die generierten nativen Projekte während des Synchronisierens patchen, aber es kann keine Website-Trust-Dateien erstellen oder hosten.

Andere öffentliche Methoden

Der öffentliche Plugin API offenbart 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 eine Passkey aus einem JSON-sicheren WebAuthn-Payload.
• await CapacitorPasskey.getCredential(...) authentifiziert sich mit einer 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

• Anfängsunterricht
• iOS-Einrichtung
• Android-Einrichtung
• Hinweise zum Backend

Wichtiger iOS-Hinweis

Bei iOS 17.4 und neuer verwendet das Plugin den browserartigen Client-Daten API , sodass die konfigurierte HTTPS-Origin 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 Behauptungs-Origin ist nicht identisch mit einer Browser-Origin. Wenn Ihr Backend streng die Validierung clientDataJSON.origin, stellen Sie sicher, dass es die Android-App-Origin neben Ihrer Website-Origin akzeptiert.

Vollständige Referenz

• GitHub: https://github.com/Capgo/capacitor-passkey/
• Dokumentation: /de/docs/plugins/passkey/

Weitermachen Sie mit der Verwendung von @capgo/capacitor-passkey

Wenn Sie @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-passkey verwenden Verwendung von @capgo/capacitor-Passwort um Authentifizierungs- und Konto-Flüsse zu planen, verbinden Sie es mit @capgo/capacitor-Passwort für die Implementierungsdetails in @capgo/capacitor-Passkey, @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login für die Implementierungsdetails in @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login für die Implementierungsdetails im Getting Started @capgo/capacitor-passkey für die Implementierungsdetails in @capgo/capacitor-Social-Login, @capgo/capacitor-passkey zur Implementierungsdetail in @capgo/capacitor-native-biometric, und Zwei-Faktor-Authentifizierung zur Implementierungsdetail in Zwei-Faktor-Authentifizierung.