Using @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 ブラウザで既に使用している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：ネイティブ設定に同期する際にパッチする追加の依存先ホスト名
autoShim：デフォルト値 true とネイティブ設定を制御する cap sync 自動構成ハック

設定を変更した後、再度syncを実行してください:

bunx cap sync

起動時に shim をインストールする

標準パッケージエントリポイントからプラグインをインポートし、起動時に shim をインストールする:

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

await CapacitorPasskey.autoShimWebAuthn();

その後、既存のブラウザスタイルのパスキー code は変更する必要はありません。

実行時で shim を強制したい場合は、または設定されたオリジンをオーバーライドしたい場合は、以下のコールを実行してください:

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 synciOS: 必要に応じて関連ドメインの特権とXcodeの特権のワイヤリング

Android:
Android:アプリの特定のドメインの特権とXcodeの特権のワイヤリング asset_statements メタデータと生成されたリソースはマニフェストによって使用されます。

ネイティブのセットアップは依然としてウェブサイトの信頼ファイルが必要です。

プラグインはアプリ側の作業を軽減しますが、パスキーは依然としてウェブサイトの信頼ファイルに依存しています。ウェブサイトの信頼ファイルをホストする必要があります。

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

プラグインは生成されたネイティブのプロジェクトをSync中の修正が可能ですが、ウェブサイトの信頼ファイルの作成やホストは行えません。

その他の公開メソッド

パブリックプラグイン API は、定義されている直接ヘルパーを公開します。 src/definitions.ts:

await CapacitorPasskey.getConfiguration() JSONセーフなWebAuthnペイロードから解決されたパスキーを返します。 origin, domains, autoShimJSONセーフなWebAuthnペイロードから既存のパスキーを使用して認証します。 platform.
await CapacitorPasskey.createCredential(...) 現在のランタイムがパスキーをサポートしているかどうか報告します。
await CapacitorPasskey.getCredential(...) 現在のネイティブ実装バージョンマーカーを返します。
await CapacitorPasskey.isSupported() metadata and the generated resource used by the manifest
await CapacitorPasskey.getPluginVersion() Native setup still needs website trust files

プラットフォームガイド

iOSに関する重要な注意事項

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

Androidに関する重要な注意事項

Android Credential Manager は、Digital Asset Links が構成されている場合に、同じ依存関係者とパスキーを共有できますが、ネイティブのアサーションオリジンはブラウザオリジンと同等ではありません。バックエンドが厳密に検証する場合、 clientDataJSON.originバックエンドがアプリのオリジンと共にウェブサイトのオリジンを受け入れるようにすることを確認してください。

フルリファレンス

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

@capgo/capacitor-passkeyを使用し続けてください

Capgoを使用している場合 Using @capgo/capacitor-passkey @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-passkeyを接続して @capgo/capacitor-passkeyの実装詳細を参照してください for the implementation detail in @capgo/capacitor-passkey, @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-passkeyの実装詳細を参照してください @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-loginの実装詳細を参照してください @capgo/capacitor-social-loginの実装詳細を参照してください @capgo/capacitor-social-loginの実装詳細を参照してください @capgo/capacitor-native-biometric capgo/capacitor-native-biometricの実装詳細について 2要素認証 2要素認証の実装詳細について

パスキー

パスキーのチュートリアル