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à 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 al tuo'applicazione.

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 provider di fiducia utilizzata dal shim e diretto API
domains: hostnames aggiuntivi del provider di fiducia da patchare nella configurazione nativa durante la sincronizzazione
autoShim: predefinito a true e controlla la configurazione nativa cap sync hook di configurazione automatico

Esegui la sincronizzazione nuovamente 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'app:

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

await CapacitorPasskey.autoShimWebAuthn();

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

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 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 sync, il plugin aggiorna i progetti host nativi generati:

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

La configurazione nativa richiede ancora file di fiducia del sito web

The 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.

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 passkey da un payload WebAuthn sicuro JSON.
await CapacitorPasskey.getCredential(...) si 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

Con 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.

Cautela importante per Android

Il Manager delle credenziali Android può condividere lo stesso partito affidabile 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 valuta rigorosamente 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 con l'utilizzo di @capgo/capacitor-passkey

Se stai utilizzando L'utilizzo di @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 Due-factor authentication per il dettaglio di implementazione in Due-factor authentication.

Passkey

Tutorial su Passkey