Saltare al contenuto principale
Torna ai plugin
@capgo/capacitor-passkey
Guida
@capgo/capacitor-passkey

Passkey

Conserva lo stile del browser WebAuthn code in Capacitor mentre le chiamate native di passkey e la patching del host sono gestiti per te

Guida

Tutoriale su Passkey

Testa sul dispositivo

Scarica l'app Capgo, poi scansa il codice QR code.

QR code di anteprima del plugin Passkey

Utilizza @capgo/capacitor-passkey

Mantieni il tuo browser-style WebAuthn code in un'applicazione Capacitor mentre il plugin gestisce le chiamate native di passkey e il patching del host nativo.

Browser-style API

@capgo/capacitor-passkey mantiene lo stesso flusso WebAuthn che già usate sul web:

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

On native builds, il plugin installa un shim per navigator.credentials.create() E navigator.credentials.get()e invia la richiesta alle API di passkey iOS e Android, e restituisce oggetti di credenziali simili a quelli del browser per la tua app.

Installare e sincronizzare progetti nativi

bun add @capgo/capacitor-passkey
bunx cap sync

Configura l'app host una volta

Aggiungi la configurazione del plugin in capacitor.config.ts o 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;

Come funziona la configurazione del plugin

La configurazione del plugin viene letta da plugins.CapacitorPasskey in capacitor.config.*.

  • origin: primary HTTPS relying-party origin used by the shim and direct API
  • domains: origine HTTPS primaria di rete di fiducia utilizzata dal shim e diretto __CAPGO_KEEP_0__
  • autoShim: host di rete di fiducia aggiuntivi da integrare nella configurazione nativa durante la sincronizzazione true : predefinito su cap sync e controlla la configurazione nativa

l'hook di configurazione automatica si attiva automaticamente dopo la sincronizzazione. Esegui nuovamente la sincronizzazione dopo aver modificato la configurazione:

bunx cap sync

Installa il shim durante l'avvio

Importa il plugin dal punto di ingresso del pacchetto standard, quindi installa il shim durante l'avvio dell'applicazione:

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

await CapacitorPasskey.autoShimWebAuthn();

Dopo di che, il tuo passkey esistente per browser può rimanere lo stesso code.

Se hai bisogno di forzare il shim o di sovrascrivere l'origine configurata in esecuzione, chiama:

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

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

Mantieni il tuo flusso WebAuthn normale

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

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

Cosa aggiorna in sincronia per te

Durante bunx cap syncil plugin aggiorna i progetti host nativi generati:

  • iOS: autorizzazioni di dominio associati e autorizzazioni di Xcode quando necessario
  • Android: asset_statements metadati e il file di risorsa generato utilizzato dal manifesto

La configurazione nativa richiede ancora i file di fiducia del sito web

Il plugin riduce il lavoro sul lato dell'app, ma le passkey dipendono ancora dai file di fiducia del sito web per il tuo dominio di parte di riferimento. Hai ancora bisogno di ospitare:

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

Il plugin può patchare i progetti nativi generati durante la sincronizzazione, ma non può creare o ospitare questi file di fiducia del sito web per te.

Altri metodi pubblici

Il plugin pubblico API espone anche gli aiuti diretti definiti in src/definitions.ts:

  • await CapacitorPasskey.getConfiguration() ritorna la risoluzione origin, domains, autoShime corrente platform.
  • await CapacitorPasskey.createCredential(...) registra una passkey da un payload WebAuthn sicuro JSON.
  • await CapacitorPasskey.getCredential(...) autentica con una passkey esistente da un payload WebAuthn sicuro JSON.
  • await CapacitorPasskey.isSupported() riferisce se il runtime corrente supporta le passkey.
  • await CapacitorPasskey.getPluginVersion() ritorna la versione di marcatura dell'implementazione nativa corrente.

Guida per le piattaforme

Nota importante per iOS

In iOS 17.4 e versioni successive, il plugin utilizza il client-data del browser API quindi l'origine HTTPS configurata viene riflessa in clientDataJSON.

Nota importante per Android

Il Manager delle credenziali Android può condividere lo stesso partito di fiducia e le chiavi passkey del tuo sito web quando sono configurati i collegamenti di asset digitali, ma l'origine di affermazione nativa non è identica a un'origine del browser. Se il tuo backend verifica rigorosamente clientDataJSON.originassicurati che accetti l'origine dell'app Android accanto all'origine del tuo sito web.

Riferimento completo

Continua con l'utilizzo di @capgo/capacitor-passkey

Se stai utilizzando Utilizza @capgo/capacitor-passkey per pianificare l'autenticazione e le flussi di account, connettilo con @capgo/capacitor-passkey per i dettagli di implementazione in @capgo/capacitor-passkey Avvio per i dettagli di implementazione in Avvio @capgo/capacitor-social-login per i dettagli di implementazione in @capgo/capacitor-social-login @capgo/capacitor-native-biometric per i dettagli di implementazione in @capgo/capacitor-native-biometric e Autenticazione a due fattori per il dettaglio di implementazione in Autenticazione a due fattori.