Utilizza @capgo/capacitor-passkey

Conserva il tuo stile di browser WebAuthn code in un'app Capacitor mentre il plugin gestisce le chiamate native di passkey e il patching del host nativo.

Stile di browser API

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

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

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

Installa e sincronizza 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;

Cosa fa la configurazione del plugin

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

origin: origine HTTPS primaria del partner che utilizza il shim e API diretto
domains: hostnames del partner aggiuntivi da integrare nella configurazione nativa durante la sincronizzazione
autoShim: si attiva di default true e controlla la configurazione nativa cap sync hook di configurazione automatica

Esegui nuovamente la sincronizzazione dopo aver modificato la configurazione:

bunx cap sync

Installa il shim durante l'avvio del bootstrap

Importa il plugin dall'ingresso standard del pacchetto, quindi installa il shim durante l'avvio dell'app

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

await CapacitorPasskey.autoShimWebAuthn();

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

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

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

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

Mantieni il normale flusso WebAuthn

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

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

Cosa le patch di sincronizzazione fanno per te

Durante bunx cap sync, il plugin aggiorna i progetti host nativi generati:

iOS: autorizzazioni dei domini associati e configurazione delle autorizzazioni Xcode quando necessario
Android: asset_statements metadati e il risorsa generata utilizzata dal manifesto

È ancora necessario impostare i file di fiducia del sito web per la configurazione nativa

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

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

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

Metodi pubblici diversi

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

await CapacitorPasskey.getConfiguration() ritorna la risoluzione origin, domains, autoShim, e corrente platform.
await CapacitorPasskey.createCredential(...) registra una chiave di accesso da un payload WebAuthn sicuro JSON.
await CapacitorPasskey.getCredential(...) si autentica con una chiave di accesso esistente da un payload WebAuthn sicuro JSON.
await CapacitorPasskey.isSupported() indica se il runtime corrente supporta le chiavi di accesso.
await CapacitorPasskey.getPluginVersion() ritorna la versione di marcatura dell'implementazione nativa corrente.

Guida per piattaforma

Nota importante per iOS

Sul iOS 17.4 e versioni successive, il plugin utilizza il client-data di tipo 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 configurate le Digital Asset Links, ma l'origine di affermazione nativa non è identica a un'origine del browser. Se il tuo backend verifica rigidamente clientDataJSON.originassicurati che accetti l'origine dell'app Android accanto all'origine del tuo sito web.

Riferimento completo

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

Continua da Utilizzo di @capgo/capacitor-passkey

Se stai utilizzando Usando @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 rapido per i dettagli di implementazione in Avvio rapido, @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 i dettagli di implementazione in Autenticazione a due fattori.

Passkey

Tutoriale su Passkey