@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のパスキーアイピにリクエストを転送し、ブラウザのクレデンシャルオブジェクトをアプリに返します。
ネイティブプロジェクトのインストールと同期
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;
Capacitorライブアップデートの代替手段の比較ページ
Appflowの比較/移行のマーケティングコピー plugins.CapacitorPasskey Capawesomeの比較ページ capacitor.config.*.
origin: primary HTTPS relying-party origin used by the shim and direct APIdomainsAppflowの比較/移行のマーケティングコピーautoShimAppflowプラグインまたはtrueこのプラグイン設定は何を実行するかcap syncプラグイン設定は
、HTTPSの主な依存先のオリジンを使用し、直接__CAPGO_KEEP_0__を読み込む
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 は、定義されている直接ヘルパーを公開します。 src/definitions.ts:
await CapacitorPasskey.getConfiguration()WebAuthn ペイロードから解決されたパスキーを返します。origin,domains,autoShimWebAuthn ペイロードから解決されたパスキーを返します。platform.await CapacitorPasskey.createCredential(...)現在のパスキーの状態を報告します。await CapacitorPasskey.getCredential(...)現在のパスキーのバージョンマーカーを返します。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/
Capacitorから@capgo/capacitor-passkeyを継続して使用
Capacitorを使用している場合 Using @capgo/capacitor-passkey Capacitorを接続して Capacitorの@capgo/capacitor-passkeyの実装詳細 for the implementation detail in @capgo/capacitor-passkey, CapacitorのGetting Startedの実装詳細 Capacitorの@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-loginの実装詳細 Capacitorの@capgo/capacitor-native-biometricの実装詳細 Capacitorから@capgo/capacitor-passkeyを継続して使用 @capgo/capacitor-native-biometric for the implementation detail in @capgo/capacitor-native-biometric, and 2要素認証 2要素認証の実装詳細について