Usando @capgo/capacitor-passkey

Keep your browser-style WebAuthn code in a Capacitor app while the plugin handles native passkey calls and native host patching.

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

Nelle costruzioni native, 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 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 di fiducia utilizzata dal shim e dal API diretto
domains: hostnames aggiuntivi del partner di fiducia da integrare nella configurazione nativa durante la sincronizzazione
autoShim: predefinito a true e controlla la configurazione nativa cap sync hook di configurazione automatica

Esegui la sincronizzazione nuovamente 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 di dominio associato e autorizzazioni Xcode per quanto 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 quei file di fiducia del sito web per te.

Metodi pubblici diversi

Il plugin pubblico API esporre 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() riferisce se il runtime corrente supporta le chiavi di accesso.
await CapacitorPasskey.getPluginVersion() ritorna la versione di marcatura dell'implementazione nativa corrente.

Guida per le piattaforme

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 affidabile 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

Tutorial sulla chiave di accesso