Menggunakan @capgo/capacitor-passkey

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

Authn browser-style API

@capgo/capacitor-passkey tetapkan aliran 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(), mengirimkan 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 utama yang dipakai oleh shim dan API langsung
domains: nama host relying-party tambahan untuk memperbaiki ke konfigurasi native selama sinkronisasi
autoShim: default ke true dan mengontrol pengaturan native cap sync hook pengaturan otomatis

Jalankan sinkronisasi lagi setelah mengubah konfigurasi:

bunx cap sync

Pasang shim selama bootstrap

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

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

await CapacitorPasskey.autoShimWebAuthn();

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

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

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

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

Tetapkan aliran WebAuthn normal Anda

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

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

Apa saja patch sinkronisasi untuk Anda

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

iOS: hak akses domain terkait dan pengaturan Xcode ketika diperlukan
Andoid: 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 situs web untuk domain pihak yang bergantung. 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 native yang dihasilkan selama sinkronisasi, tetapi tidak dapat membuat atau menghosting file kepercayaan situs web tersebut untuk Anda.

Metode publik lainnya

Plugin publik API juga mengungkapkan helper langsung yang ditentukan di src/definitions.ts:

await CapacitorPasskey.getConfiguration() mengembalikan nilai yang telah terpecahkan origin, domains, autoShim, dan 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() melaporkan apakah runtime saat ini mendukung passkeys.
await CapacitorPasskey.getPluginVersion() mengembalikan versi marker implementasi native saat ini.

Tutorial platform

Peringatan Penting iOS

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

Peringatan Penting Android

Manajer Kredensial Android dapat berbagi sama-sama pihak yang dipercaya dan kunci pasword situs web Anda ketika Konfigurasi Digital Asset Links diatur, tetapi asal asertasi asli bukan identik dengan asal browser. Jika backend Anda clientDataJSON.originpastikan menerima asal aplikasi Android di samping asal situs web Anda.

Referensi Lengkap

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

Teruskan dari Menggunakan @capgo/capacitor-passkey

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 Dua-Faktor Autentikasi untuk detail implementasi di Dua-Faktor Autentikasi.

Passkey

Tutorial tentang Passkey