Menggunakan @capgo/capacitor-passkey

Tetapkan WebAuthn browser-style code di aplikasi Capacitor sambil plugin mengelola panggilan passkey native dan patching host native.

WebAuthn browser-style API

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

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

Pada bangun native, plugin menginstal shim untuk navigator.credentials.create() dan navigator.credentials.get(), mengalihkan 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 oleh konfigurasi plugin

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

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

Jalankan sinkronisasi lagi setelah mengubah konfigurasi:

bunx cap sync

Pasang shim selama bootstrap

Impor plugin dari entri paket standar, kemudian pasang shim selama bootstrap aplikasi:

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

await CapacitorPasskey.autoShimWebAuthn();

Setelah itu, passkey browser-style Anda yang sudah ada code masih bisa tetap sama.

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

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

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

Tetapkan alur WebAuthn normal Anda

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

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

Patch sinkron yang menguntungkan Anda

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

iOS: hak akses domain terkait dan pengaturan 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 yang bertanggung jawab. Anda masih perlu menyiapkan:

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

Plugin ini dapat memperbarui proyek native yang dihasilkan selama sinkron, tetapi tidak dapat membuat atau menyiapkan file-file kepercayaan website untuk Anda.

Metode publik lainnya

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

await CapacitorPasskey.getConfiguration() mengembalikan nilai yang terpecahkan origin, domains, autoShimdan saat ini platform.
await CapacitorPasskey.createCredential(...) mendaftarkan passkey dari payload WebAuthn yang aman JSON.
await CapacitorPasskey.getCredential(...) otentikasi dengan passkey yang sudah ada dari payload WebAuthn yang aman JSON.
await CapacitorPasskey.isSupported() menunjukkan apakah runtime saat ini mendukung passkey.
await CapacitorPasskey.getPluginVersion() mengembalikan tanda pembaruan implementasi native saat ini.

Petunjuk platform

Penting: Catatan iOS

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

Penting: Catatan Android

Pengelola Kredensial Android dapat berbagi pihak yang dipercaya dan kunci pasword dengan situs web Anda ketika Digital Asset Links dikonfigurasi, tetapi asal asertasi native tidak sama dengan asal browser. Jika backend Anda clientDataJSON.origin Pastikan menerima asal aplikasi Android di samping asal situs web Anda.

Referensi Lengkap

GitHub: https://github.com/Cap-go/capacitor-kunci-pasword/
Docs: /docs/plugins/kunci-pasword/

Teruskan dari Menggunakan @capgo/capacitor-kunci-pasword

Jika Anda menggunakan Menggunakan @capgo/capacitor-passkey untuk merencanakan autentikasi dan alur akun, hubungkannya dengan @capgo/capacitor-passkey untuk detail implementasi di @capgo/capacitor-passkey, Mengawali untuk detail implementasi di Mengawali, @capgo/capacitor-social-login untuk detail implementasi di @capgo/capacitor-social-login, @capgo/capacitor-native-biometric untuk detail implementasi di @capgo/capacitor-native-biometric, dan Autentikasi dua faktor untuk detail implementasi di Autentikasi dua faktor.

Passkey

Tutorial tentang Passkey