En utilisant @capgo/capacitor-passkey

Conservez votre style de navigateur WebAuthn code dans une application Capacitor tandis que le plugin gère les appels de clés de passe native et la mise à jour de l'hôte hôte native.

Style de navigateur API

@capgo/capacitor-passkey Le style de navigateur __CAPGO_KEEP_0__ conserve le même flux WebAuthn que vous utilisez déjà sur le web :

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

On les builds natifs, le plugin installe un shim pour navigator.credentials.create() et navigator.credentials.get(), transmet la demande à l'API iOS et Android passkey, et renvoie des objets de crédentials similaires à ceux du navigateur à votre application.

Installez et synchronisez les projets natifs

bun add @capgo/capacitor-passkey
bunx cap sync

Configurez l'application hôte une fois

Ajoutez la configuration du plugin dans capacitor.config.ts ou 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;

Configurez l'hôte une fois

Configurez l'application hôte une fois plugins.CapacitorPasskey ou capacitor.config.*.

origin: primary HTTPS relying-party origin used by the shim and direct API
domainsConfigurez l'application hôte une fois
autoShimou true Configurez l'application hôte une fois cap sync Configurez l'application hôte une fois

ou : l'origine HTTPS primaire utilisée par le shim et directement __CAPGO_KEEP_0__ : les hôtes de confiance supplémentaires à intégrer dans la configuration native lors de la synchronisation : par défaut : et contrôle la configuration native : l'invite automatique : Exécutez à nouveau la synchronisation après avoir modifié la configuration :

bunx cap sync

Installez le shim lors du démarrage

Importez le plugin à partir de l'entrée de package standard, puis installez le shim lors du démarrage de l'application :

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

await CapacitorPasskey.autoShimWebAuthn();

Après cela, votre passkey existante de style navigateur code peut rester la même.

Si vous devez forcer le shim ou définir l'origine configurée en temps de exécution, appelez :

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

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

Conservez votre flux WebAuthn normal

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

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

Quels patchs synchronisent pour vous

Lors de bunx cap sync, le plugin met à jour les projets de hôte natifs générés :

iOS : autorisations de domaine associées et câblage d'autorisation Xcode lorsqu'il est nécessaire
Android : métadonnées et le fichier de ressource généré utilisé par le manifeste asset_statements La mise en place native nécessite toujours des fichiers de confiance du site web

Install the shim during bootstrap

Le plugin réduit le travail côté application, mais les clés de passe dépendent toujours des fichiers de confiance du site pour votre domaine de partie de confiance. Vous avez toujours besoin d'héberger :

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

Le plugin peut corriger les projets natifs générés lors de la synchronisation, mais il ne peut pas créer ou héberger ces fichiers de confiance du site pour vous.

Autres méthodes publiques

Le plugin public API expose également les assistants directs définis dans src/definitions.ts:

await CapacitorPasskey.getConfiguration() renvoie la valeur résolue origin, domains, autoShim, et actuel platform.
await CapacitorPasskey.createCredential(...) enregistre une clé de passe à partir d'un payload WebAuthn sécurisé JSON.
await CapacitorPasskey.getCredential(...) s'authentifie avec une clé de passe existante à partir d'un payload WebAuthn sécurisé JSON.
await CapacitorPasskey.isSupported() indique si le runtime actuel prend en charge les clés de passe.
await CapacitorPasskey.getPluginVersion() renvoie la version de marque de l'implémentation native actuelle.

Guides de plateforme

Note importante iOS

Sur iOS 17.4 et versions ultérieures, le plugin utilise le client-data de style navigateur API donc l'origine HTTPS configurée est reflétée dans clientDataJSON.

Alerte importante Android

Le gestionnaire de crédits Android peut partager le même partenaire de confiance et les clés de passe comme votre site web lorsque les liens d'actif numérique sont configurés, mais l'origine d'affirmation native n'est pas identique à une origine de navigateur. Si votre serveur valide strictement clientDataJSON.originAssurez-vous qu'il accepte également l'origine de l'application Android aux côtés de l'origine de votre site web.

Référence complète

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

Continuez à partir de l'utilisation de @capgo/capacitor-passkey

Si vous utilisez L'utilisation de @capgo/capacitor-passkey pour planifier les flux d'authentification et de comptes, connectez-l’avec @capgo/capacitor-passkey pour les détails d'implémentation dans @capgo/capacitor-passkey Getting Started pour les détails d'implémentation dans Getting Started @capgo/capacitor-social-login pour les détails d'implémentation dans @capgo/capacitor-social-login @capgo/capacitor-native-biometric pour les détails d'implémentation dans @capgo/capacitor-native-biometric, et Authentification à deux facteurs pour le détail d'implémentation dans Authentification à deux facteurs.

Passkey

Tutoriel sur Passkey