@ 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 });

ネイティブビルドの場合、プラグインは shim をインストールし、 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: shimと直接APIが使用する主なHTTPS依存先
domains: native設定にsync中のパッチを追加するために追加する依存先ホスト名
autoShim: デフォルトは true と設定を制御し、native cap sync 自動設定のハック

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

bunx cap sync

起動時に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,
});

何が同期で修正されるか

生成されたネイティブホストプロジェクトを更新する bunx cap synciOS: 必要に応じて関連ドメインの特権と Xcode の特権のワイヤリング

Android:
メタデータと生成されたリソースの使用されるマニフェスト asset_statements ネイティブのセットアップは依然としてウェブサイトの信頼ファイルが必要です

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

プラグインは同期中に生成されたネイティブプロジェクトを修正できますが、ウェブサイトの信頼ファイルを作成またはホストすることはできません。

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

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

その他の公開メソッド

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

await CapacitorPasskey.getConfiguration() 解決された 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 が構成されている場合に、ウェブサイトと同じ Relying Party とパスキーを共有できますが、ネイティブのアサーションオリジンはブラウザのオリジンと同等ではありません。バックエンドが厳密に検証する場合、 clientDataJSON.originウェブサイトのオリジンとともに、Android アプリのオリジンも受け入れるようにしてください。

フルリファレンス

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

使用中の @capgo/capacitor-passkey から続けてください。

Capacitor Passkey プラグインを使用している場合 @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__-social-loginの実装詳細 @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-loginの実装詳細 @capgo/capacitor-native-biometricの実装詳細 for the implementation detail in @capgo/capacitor-social-login, @capgo/capacitor-native-biometric @capgo/capacitor-passkeyを使用して @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-passkeyを使用して @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-passkeyを使用して

パスキー

Passkeyのチュートリアル