メインコンテンツにジャンプ
プラグインに戻る
@capgo/capacitor-パスキー
チュートリアル
@capgo/capacitor-パスキー

パスキー

ブラウザスタイルの WebAuthn code を Capacitor に保存し、ネイティブ パスキー コールとホスト パッチングを自動で行ってください

ガイド

Passkey についてのチュートリアル

デバイスでテスト

Download the Capgo app, then scan the QR code.

PasskeyプラグインプレビューQRcode

@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 API
  • domainsAppflowの比較/移行のマーケティングコピー
  • 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-association
  • https://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 アプリの起源を受け入れるようにしてください。

フル リファレンス

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要素認証の実装詳細について