@capgo/capacitor-passkey を使用する

ブラウザスタイルの WebAuthn code をアプリ内で Capacitor する

ブラウザスタイルの WebAuthn API

@capgo/capacitor-passkey ブラウザスタイルの WebAuthn __CAPGO_KEEP_0__ は、既存の Web 上で使用している WebAuthn フローを維持します。

await navigator.credentials.create({ publicKey: registrationOptions });
await navigator.credentials.get({ publicKey: requestOptions });

ネイティブビルドの場合、プラグインは shim をインストールし、 navigator.credentials.create() ネイティブビルドの場合、プラグインは shim をインストールし、iOS と Android の passkey API にリクエストを転送し、ブラウザの credential オブジェクトをアプリに返します。 navigator.credentials.get()ネイティブプロジェクトをインストールして同期する

ホストアプリを一度設定する

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 と 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,
});

何がsyncで修正されるか

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

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

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

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

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.

Other public methods

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

await CapacitorPasskey.getConfiguration() resolvedを返します。 origin, domains, autoShim、および現在の platform.
await CapacitorPasskey.createCredential(...) JSONセーフなWebAuthnパayloadからパスキーを登録します。
await CapacitorPasskey.getCredential(...) JSONセーフなWebAuthnパayloadから既存のパスキーで認証します。
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/

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

Capacitor Passkey プラグインを使用している場合 Capacitorを使用して@capgo/capacitor-passkey 認証とアカウントフローの計画と、@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-passkey @capgo/capacitor-passkeyの実装詳細 for the implementation detail in @capgo/capacitor-passkey, Getting Startedの実装詳細 @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login @capgo/capacitor-social-loginの実装詳細 @capgo/capacitor-native-biometric @capgo/capacitor-native-biometricの実装詳細、 for the implementation detail in @capgo/capacitor-native-biometric, and Two-factor authenticationの実装詳細 Capacitorを使用して@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-passkey

パスキー

パスキーに関するチュートリアル