ガイド
Passkeyを使用する方法はCapacitor
capgo/capacitor-passkeyを使用
ブラウザスタイルのWebAuthn codeをアプリ内でCapacitorし、プラグインはネイティブのパスキー呼び出しとネイティブホストのパッチングを処理します。
ブラウザスタイルAPI
@capgo/capacitor-passkey __CAPGO_KEEP_0__はすでにウェブで使用しているWebAuthnフローを維持します:
await navigator.credentials.create({ publicKey: registrationOptions });
await navigator.credentials.get({ publicKey: requestOptions });
ネイティブビルドでは、プラグインは navigator.credentials.create() and navigator.credentials.get()ネイティブプロジェクトをインストールして同期
ホストアプリを一度設定
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 APIdomains: native設定にパッチするために追加の依存関係ホスト名autoShim: デフォルトはtrueで制御され、nativecap 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 sync, プラグインは生成されたネイティブホストプロジェクトを更新します:
- iOS: 必要に応じて関連ドメインの特権と Xcode の特権のワイヤリング
- Android:
asset_statementsメタデータと生成されたリソースの使用されるマニフェスト
ネイティブセットアップは依然としてウェブサイトの信頼ファイルが必要です
プラグインはアプリ側の作業を減らしますが、パスキーは依然としてウェブサイトの信頼ファイルに依存しています。ウェブサイトの信頼ファイルをホストする必要があります。
https://your-domain/.well-known/apple-app-site-associationhttps://your-domain/.well-known/assetlinks.json
プラグインはSyncの際に生成されたネイティブプロジェクトをパッチできますが、ウェブサイトの信頼ファイルを作成またはホストすることはできません。
その他の公開メソッド
パブリックプラグイン API も、WebAuthn ペイロードの直接ヘルパーを定義したものを公開します。 src/definitions.ts:
await CapacitorPasskey.getConfiguration()WebAuthn ペイロードを解決します。origin,domains,autoShim現在のplatform.await CapacitorPasskey.createCredential(...)JSON セーフな WebAuthn ペイロードからパスキーを登録します。await CapacitorPasskey.getCredential(...)JSON セーフな WebAuthn ペイロードから既存のパスキーで認証します。await CapacitorPasskey.isSupported()現在のランタイムがパスキーをサポートしているかどうかを報告します。await CapacitorPasskey.getPluginVersion()現在のネイティブ実装バージョンマーカーを返します。
プラットフォームガイド
iOS に関する重要な注意事項
iOS 17.4 以降では、プラグインはブラウザスタイルのクライアントデータ API を使用するため、構成された HTTPS 起源は API に反映されます。 clientDataJSON.
Android に関する重要な注意事項
Android Credential Manager は、Digital Asset Links が構成されている場合に、ウェブサイトと同じ依存パーティーとパスキーを共有できますが、ネイティブのアサーション起源はブラウザ起源と同一ではありません。バックエンドが厳密に検証する場合 clientDataJSON.origin、ウェブサイトの起源と Android アプリの起源を両方とも受け入れるようにしてください。
完全なリファレンス
- GitHub: https://github.com/Cap-go/capacitor-passkey/
- ドキュメント: /docs/plugins/passkey/
@capgo/capacitor-パスキーを継続して使用
Capacitor-Passkey を使用している場合 Using @capgo/capacitor-passkey 認証とアカウントフローの計画と接続 @capgo/capacitor-パスキー @capgo/capacitorパスキーの実装詳細 はじめに Getting Startedの実装詳細については @capgo/capacitor-ソーシャルログイン @capgo/capacitor-ソーシャルログインの実装詳細 @capgo/capacitor-ネイティブバイオメトリック for the @capgo/capacitor-native-biometric implementation detail in 2要素認証 2要素認証の実装詳細については