@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() と 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
domainsHTTPSの主なリレーペアオリジンです。
autoShim、 true 直接 cap sync の

追加のリレーペアホスト名を、

bunx cap sync

にパッチします。

、デフォルトは

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:
メタデータと生成されたリソースがマニフェストに使用される asset_statements ネイティブセットアップでは、サイトの信頼ファイルが必要です

プラグインはアプリ側の作業を軽減しますが、パスキーは依存するパーティのドメインのサイトの信頼ファイルに依存しています。

サイトの信頼ファイルをホストする必要があります。

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

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

他の公開メソッド

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

await CapacitorPasskey.getConfiguration() WebAuthn ペイロードから解決された origin, domains, autoShim、および現在の platform.
await CapacitorPasskey.createCredential(...) WebAuthn ペイロードからパスキーの登録を行います。
await CapacitorPasskey.getCredential(...) WebAuthn ペイロードから既存のパスキーの認証を行います。
await CapacitorPasskey.isSupported() 現在のランタイムがパスキーのサポートを実行しているかどうかを報告します。
await CapacitorPasskey.getPluginVersion() 現在のネイティブ実装バージョンマーカーを返します。

プラットフォームガイド

重要なiOSの注記

iOS 17.4 以降では、プラグインはブラウザスタイルのクライアントデータ API を使用するため、構成された HTTPS のオリジンは反映されます。 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 を使用している場合 @capgo/capacitor-passkey を使用して認証とアカウントフローの計画を行い、@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-passkey @capgo/capacitor-passkey @capgo/capacitor-passkey の実装詳細については、@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-passkey を参照してください。 @capgo/capacitor-social-login for the implementation detail in @capgo/capacitor-social-login, @capgo/capacitor-native-biometric @capgo/capacitor-social-login の実装詳細については、@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login を参照してください。、@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-biometric、

パスキー

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