メインコンテンツへスキップ

スタートガイド

GitHub

AIアシストによるセットアップでプラグインをインストールできます。以下のコマンドを使用して、お使いのAIツールに Capgo のスキルを追加してください:

ターミナル
npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-plugins

次に、以下のプロンプトを使用します:

Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/capacitor-passkey` plugin in my project.

手動セットアップを希望する場合は、以下のコマンドを実行してプラグインをインストールし、下記のプラットフォーム別の手順に従ってください:

  1. パッケージをインストール

    ターミナル
    bun add @capgo/capacitor-passkey
  2. ネイティブプロジェクトの同期

    ターミナル
    bunx cap sync
  3. プラグイン設定の追加

    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;
  4. ブートストラップ時にshimをインストールする

    import { CapacitorPasskey } from '@capgo/capacitor-passkey';
    await CapacitorPasskey.autoShimWebAuthn();
  5. 通常のWebAuthnフローを維持

    const registration = await navigator.credentials.create({
    publicKey: registrationOptions,
    });
    const authentication = await navigator.credentials.get({
    publicKey: requestOptions,
    });

設定の読み取り元: plugins.CapacitorPasskey における capacitor.config.*.

  • origin: shimと直接的なAPIで使用されるプライマリHTTPS relying-party origin
  • domains: 同期時にネイティブ設定へパッチを当てる追加のrelying-partyホスト名
  • autoShim: デフォルト値: true およびネイティブ側を制御します cap sync 自動設定フック

実行時に bunx cap sync、プラグインが生成されたネイティブのホストプロジェクトを更新します:

  • iOS: 必要に応じて associated domains entitlements と Xcode entitlements を設定
  • Android: asset_statements メタデータ、および manifest で使用される生成リソース

このフックはウェブサイトの信頼ファイル(trust files)を自動で公開しません。以下のファイルを自身でホストする必要があります:

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

バックエンドがすでにWebAuthn JSONを返している場合は、プラグインのメソッドを直接呼び出してください。

import { CapacitorPasskey } from '@capgo/capacitor-passkey';
const registration = await CapacitorPasskey.createCredential({
publicKey: registrationOptionsFromServer,
});
const assertion = await CapacitorPasskey.getCredential({
publicKey: requestOptionsFromServer,
});

使用する isSupported() 古いデバイスでPasskeyのUIを表示する前に。

Getting Startedの続きを進める

「Getting Started からの続き」セクション

使用している場合 スタートガイド 認証とアカウントフローを計画するには、これを次と連携させてください @capgo/capacitor-passkey を使用する @capgo/capacitor-passkey の使用におけるネイティブ機能については、 @capgo/capacitor-social-login @capgo/capacitor-social-login の実装の詳細については、 @capgo/capacitor-passkey @capgo/capacitor-passkey の実装詳細については、 @capgo/capacitor-native-biometric @capgo/capacitor-native-biometric の実装の詳細、および 2要素認証 二要素認証の実装の詳細については。