Menggunakan @capgo/capacitor-passkey

Tetapkan WebAuthn code seperti browser di aplikasi Capacitor sementara plugin mengatur panggilan passkey asli dan patching host asli.

Browser-style API

@capgo/capacitor-passkey Menggunakan alur WebAuthn yang sama seperti yang Anda gunakan di web:

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

Pada pembangunan native, plugin menginstal shim untuk navigator.credentials.create() dan navigator.credentials.get(), meneruskan permintaan ke API passkey iOS dan Android, dan mengembalikan objek kreditur seperti browser ke aplikasi Anda.

Pasang dan sinkronkan proyek native

bun add @capgo/capacitor-passkey
bunx cap sync

Konfigurasi aplikasi host sekali

Tambahkan konfigurasi plugin di capacitor.config.ts atau 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;

Apa yang dilakukan konfigurasi plugin

Konfigurasi dibaca dari plugins.CapacitorPasskey dalam capacitor.config.*.

origin: asal HTTPS origin utama yang digunakan oleh shim dan API secara langsung
domains: nama domain tambahan untuk dipasang ke konfigurasi native selama sinkronisasi
autoShim: default ke true dan mengontrol hook konfigurasi native otomatis cap sync Hook konfigurasi otomatis

Jalankan sinkronisasi lagi setelah mengubah konfigurasi:

bunx cap sync

Instal shim selama proses bootstrapping

Import plugin dari entrypoint paket standar, kemudian instal shim selama proses bootstrapping aplikasi:

import { CapacitorPasskey } from '@capgo/capacitor-passkey';

await CapacitorPasskey.autoShimWebAuthn();

Setelah itu, kunci pasword browser-style yang sudah ada code Anda bisa tetap sama.

Jika Anda perlu memaksa shim atau mengganti asal yang sudah dikonfigurasi pada waktu runtime, panggil:

import { CapacitorPasskey } from '@capgo/capacitor-passkey';

CapacitorPasskey.shimWebAuthn({
  origin: 'https://signin.example.com',
});

Tetapkan flow WebAuthn normal Anda

const credential = await navigator.credentials.create({
  publicKey: registrationOptions,
});

const assertion = await navigator.credentials.get({
  publicKey: requestOptions,
});

Apa saja yang disinkronisasi oleh patch

Selama bunx cap sync, plugin ini memperbarui proyek host native yang dihasilkan:

iOS: hak akses domain terkait dan pengaturan hak akses Xcode ketika diperlukan
Android: asset_statements metadata dan sumber daya yang dihasilkan yang digunakan oleh manifest

Pengaturan native masih memerlukan file kepercayaan website

Plugin ini mengurangi pekerjaan di sisi aplikasi, tetapi passkeys masih bergantung pada file kepercayaan website untuk domain pihak ketiga Anda. Anda masih perlu menghosting:

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

Plugin ini dapat memperbaiki proyek host native yang dihasilkan selama sinkronisasi, tetapi tidak dapat membuat atau menghosting file-file kepercayaan website tersebut untuk Anda.

Metode publik lainnya

Plugin publik API juga mengekspos bantuan langsung yang ditentukan dalam src/definitions.ts:

await CapacitorPasskey.getConfiguration() mengembalikan nilai yang diresolusi origin, domains, autoShim, dan saat ini platform.
await CapacitorPasskey.createCredential(...) Mendaftarkan sebuah passkey dari payload WebAuthn yang aman JSON.
await CapacitorPasskey.getCredential(...) Mengautentikasi dengan passkey yang sudah ada dari payload WebAuthn yang aman JSON.
await CapacitorPasskey.isSupported() Menginformasikan apakah runtime saat ini mendukung passkeys.
await CapacitorPasskey.getPluginVersion() Mengembalikan versi penanda implementasi native saat ini.

Tautan panduan platform

Catatan penting iOS

Pada iOS 17.4 dan lebih baru, plugin menggunakan klien-data gaya browser API sehingga asal HTTPS yang dikonfigurasi tercermin di clientDataJSON.

Ketentuan penting Android

Manajer Kredensial Android dapat berbagi pihak yang dipercaya dan passkeys yang sama dengan situs web Anda ketika Konfigurasi Aset Digital diatur, tetapi asal asertasi native bukanlah identik dengan asal browser. Jika backend Anda secara ketat memvalidasi clientDataJSON.originPastikan untuk menerima asal aplikasi Android di samping asal situs web Anda.

Referensi Lengkap

GitHub: https://github.com/Cap-go/capacitor-passkey/
Dokumen: /docs/plugins/passkey/

Teruskan dari Menggunakan @capgo/capacitor-passkey

Jika Anda menggunakan Menggunakan @capgo/capacitor-passkey untuk merencanakan autentikasi dan aliran akun, hubungkannya dengan @capgo/capacitor-passkey untuk detail implementasi di @capgo/capacitor-passkey, Mulai untuk detail implementasi di Mulai, @capgo/capacitor-login-sosial untuk detail implementasi di @capgo/capacitor-login-sosial, @capgo/capacitor-biometrik-natif untuk detail implementasi di @capgo/capacitor-biometrik-natif, dan Autentikasi Dua Faktor untuk detail implementasi di Autentikasi Dua Faktor.

Ikon Passkey

Tutorial tentang Passkey