@capgo/capacitor-passkey を使用する

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

ブラウザスタイルの API

@capgo/capacitor-passkey ブラウザですでに使用している 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: primary HTTPS relying-party origin used by the shim and direct API
domains: プラグインの設定で使用される主なHTTPSの依存先のオリジンです。
autoShim: native config にパッチするために sync に追加される追加の依存先のホスト名です。 true : デフォルトは cap sync で制御され、native

の自動構成のハック

bunx cap sync

設定を変更したら再度 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 syncプラグインは生成されたネイティブホストプロジェクトを更新します:

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

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

プラグインはアプリ側の作業を軽減しますが、パスキーは依存するサイトの信頼ファイルのために依存するサイトのドメインのサイトの信頼ファイルが必要です。サイトの信頼ファイルをホストする必要があります。

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

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

その他の公開メソッド

Capacitor のプラグイン API も、WebAuthn の直接ヘルパーを定義したものを公開します。 src/definitions.ts:

await CapacitorPasskey.getConfiguration() __CAPGO_KEEP_0__ を解決します。 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/

Using @capgo/capacitor-passkey から続けてください。

Capacitor を使用している場合 Using @capgo/capacitor-passkey 認証とアカウントフローの計画と実装に利用 @capgo/capacitor-passkey for the implementation detail in @capgo/capacitor-passkey, はじめにはじめにの実装詳細 @capgo/capacitor-social-login for the implementation detail in @capgo/capacitor-social-login, @capgo/capacitor-native-biometric for the implementation detail in @capgo/capacitor-native-biometric, and 2要素認証 2要素認証の実装詳細

パスキー

ガイド