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 L'__CAPGO_KEEP_0__ del browser 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()inoltra 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 i 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 utilizzata dal shim e diretto API
domains: hostnames di origine aggiuntivi da integrare nella configurazione nativa durante la sincronizzazione
autoShim: predefinito a true e controlla la configurazione nativa cap sync hook di auto-configurazione

Esegui nuovamente la sincronizzazione dopo aver modificato la configurazione:

bunx cap sync

Installare il shim durante l'avvio

Importare il plugin dall'ingresso standard del pacchetto, quindi installare il shim durante l'avvio dell'app:

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

await CapacitorPasskey.autoShimWebAuthn();

After that, your existing browser-style passkey code can stay the same.

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 sincronizza per te

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

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

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

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. 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 host 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(...) 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

In iOS 17.4 e versioni successive, il plugin utilizza il client-data di stile 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 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/

Prosegui dall'uso 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 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