@capgo/capacitor-passkeyを使用する

ブラウザスタイルのWebAuthn codeを、Capacitorアプリ内に保管し、プラグインはネイティブのパスキーコールとネイティブホストのパッチングを処理します。

ブラウザスタイルのAPI

@capgo/capacitor-passkey ブラウザで既に使用しているWebAuthnのフローを維持します:

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

ネイティブビルドでは、プラグインは navigator.credentials.create() と navigator.credentials.get()をインストールし、iOSとAndroidのパスキーアプリケーションAPIにリクエストを転送し、ブラウザのクレデンシャルオブジェクトをアプリに返します。

ネイティブプロジェクトをインストールして同期する

bun add @capgo/capacitor-passkey
bunx cap sync

ホストアプリケーションを一度設定

プラグイン設定を追加する capacitor.config.ts または 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;

プラグイン設定の機能

設定は plugins.CapacitorPasskey から読み込まれます capacitor.config.*.

origin: primary HTTPS relying-party origin used by the shim and direct API
domains: シームのために使用される主 HTTPS の依存元の元の場所
autoShim、直接 true __CAPGO_KEEP_0__ cap sync に

: ネイティブ設定にsync中の追加の依存元ホスト名をパッチするためのものです。

bunx cap sync

インストールするシムをブートストラップ中に実行する

標準パッケージエントリポイントからプラグインをインポートし、次にアプリブートストラップ中にシムをインストールする:

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

await CapacitorPasskey.autoShimWebAuthn();

その後、既存のブラウザスタイルのパスコードcodeはそのまま残すことができます。

実行時でシムを強制したり、設定されたオリジンをオーバーライドしたりする必要がある場合は、以下のコールを実行してください。

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

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

通常のWebAuthnフローを維持する

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

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

あなたのためにSyncパッチ

ブートストラップ中に、 bunx cap syncプラグインは生成されたネイティブホストプロジェクトを更新します:

iOS: 必要に応じて関連ドメインの特権とXcodeの特権のワイヤリング
Android: asset_statements メタデータと生成されたリソースがマニフェストに使用される

ネイティブセットアップでは、サイトの信頼ファイルが必要

The plugin reduces app-side work, but passkeys still depend on the website trust files for your relying-party domain. You still need to host:

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

pluginはアプリ側の作業を削減しますが、パスキーは依存するウェブサイトの信頼ファイルが必要です。ウェブサイトの信頼ファイルは、依存するパーティドメインのために必要です。

The plugin can patch the generated native projects during sync, but it cannot create or host those website trust files for you.

The public plugin API also exposes the direct helpers defined in src/definitions.ts:

await CapacitorPasskey.getConfiguration() Other public methods origin, domains, autoShimOther public methods platform.
await CapacitorPasskey.createCredential(...) The public plugin __CAPGO_KEEP_0__ also exposes the direct helpers defined in
await CapacitorPasskey.getCredential(...) public plugin __CAPGO_KEEP_0__は、定義されている直接ヘルパーを公開しています。
await CapacitorPasskey.isSupported() returns the resolved
await CapacitorPasskey.getPluginVersion() resolvedを返します。

, and current

重要なiOSの注記

IOS 17.4 以降では、プラグインはブラウザスタイルのクライアントデータ API を使用するため、構成されたHTTPSの起源は API に反映されます。 clientDataJSON.

重要なAndroidの注意事項

Androidのクレデンシャルマネージャーは、デジタルアセットリンクが構成されている場合、ウェブサイトと同じ依存パーティーとパスキーを共有できますが、ネイティブのアサーション起源はブラウザの起源とは異なります。バックエンドが厳密に検証する場合、 clientDataJSON.originバックエンドがウェブサイトの起源と共にAndroidアプリの起源を受け入れるようにすることを確認してください。

フルリファレンス

GitHub: https://github.com/Cap-go/capacitor-passkey/
ドキュメント: /docs/plugins/passkey/

@capgo/capacitor-passkey

使用中 @capgo/capacitor-passkey を使用して @capgo/capacitor-passkey の実装詳細については @capgo/capacitor-passkey スタートの実装詳細については @capgo/capacitor-social-login の実装詳細については @capgo/capacitor-social-login @capgo/capacitor-native-biometric の実装詳細については @capgo/capacitor-native-biometric, 2要素認証 2要素認証の実装詳細について

パスキー

Passkeyに関するチュートリアル