Langsung ke konten

Panduan Memulai

GitHub

Anda bisa menggunakan AI-Assisted Setup kami untuk menginstal plugin ini. Tambahkan skill Capgo ke tool AI Anda dengan command berikut:

Jendela terminal
npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-plugins

Lalu gunakan prompt berikut:

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

Jika Anda lebih memilih Manual Setup, instal plugin dengan menjalankan perintah berikut dan ikuti petunjuk khusus platform di bawah ini:

Jendela terminal
bun add @capgo/capacitor-native-biometric
bunx cap sync
import { NativeBiometric } from '@capgo/capacitor-native-biometric';

Quick start: amankan login dengan biometrik

Bagian berjudul “Quick start: gate a login with biometrics”
import { NativeBiometric } from '@capgo/capacitor-native-biometric';
async function biometricLogin() {
const { isAvailable } = await NativeBiometric.isAvailable();
if (!isAvailable) {
return fallbackToPasscode();
}
try {
const { username, password } = await NativeBiometric.getSecureCredentials({
server: 'https://api.example.com',
});
await signIn(username, password);
} catch {
return fallbackToPasscode();
}
}

Simpan secret terlebih dahulu dengan setCredentials dan accessControl saat Anda butuh proteksi biometrik saat membaca data.

getSecureCredentials() sudah memunculkan prompt saat kredensial menggunakan biometrik accessControl. Gunakan verifyIdentity() untuk aksi terproteksi lainnya, dan arahkan pembatalan atau lockout ke alur passcode Anda.

try {
await NativeBiometric.verifyIdentity({
reason: 'Unlock your account',
title: 'Biometric login',
});
} catch {
return fallbackToPasscode();
}
await NativeBiometric.deleteCredentials({ server: 'https://api.example.com' });

Contoh: bereaksi saat enrollment biometri berubah

Bagian berjudul “Contoh: bereaksi saat pendaftaran biometri berubah”
await NativeBiometric.addListener('biometryChange', async () => {
const { isAvailable } = await NativeBiometric.isAvailable();
if (!isAvailable) showPasscodeUi();
});
  • getSecureCredentials memerlukan accessControl: gunakan flag akses biometrik saat menyimpan, atau gunakan getCredentials tanpa prompt tambahan.
  • Penguncian pengguna: tangani BiometricAuthError.USER_LOCKOUT dan BiometricAuthError.USER_TEMPORARY_LOCKOUT dari verifyIdentity dengan UI cooldown.
  • Simulator: daftarkan sidik jari atau wajah di simulator sebelum testing.

Mengecek apakah hardware autentikasi biometrik tersedia.

import { NativeBiometric } from '@capgo/capacitor-native-biometric';
const result = await NativeBiometric.isAvailable();
console.log(result);

Meminta user untuk autentikasi dengan biometrik.

import { NativeBiometric } from '@capgo/capacitor-native-biometric';
await NativeBiometric.verifyIdentity();

Mengambil credentials yang tersimpan untuk server tertentu.

import { NativeBiometric } from '@capgo/capacitor-native-biometric';
const result = await NativeBiometric.getCredentials({ server: 'example.com' });
// The result holds sensitive values: use it without logging it.

Menyimpan kredensial yang diberikan untuk server tertentu.

import { NativeBiometric } from '@capgo/capacitor-native-biometric';
await NativeBiometric.setCredentials({
username: 'username',
password: 'password',
server: 'example.com',
});

Menghapus kredensial yang tersimpan untuk server tertentu.

import { NativeBiometric } from '@capgo/capacitor-native-biometric';
await NativeBiometric.deleteCredentials({ server: 'example.com' });

Mengambil kredensial yang tersimpan untuk server tertentu, dengan memerlukan autentikasi biometrik. Kredensial harus sudah disimpan dengan accessControl yang diatur ke BIOMETRY_CURRENT_SET atau BIOMETRY_ANY.

Di iOS, sistem secara otomatis menampilkan prompt biometrik saat mengakses item Keychain yang dilindungi. Di Android, BiometricPrompt akan muncul dengan CryptoObject yang terikat ke kunci dekripsi kredensial.

import { NativeBiometric } from '@capgo/capacitor-native-biometric';
const result = await NativeBiometric.getSecureCredentials({ server: 'example.com' });
// The result holds sensitive values: use it without logging it.

Memeriksa apakah kredensial sudah tersimpan untuk server tertentu.

import { NativeBiometric } from '@capgo/capacitor-native-biometric';
const result = await NativeBiometric.isCredentialsSaved({ server: 'example.com' });
console.log(result);
export interface IsAvailableOptions {
/**
* Only for iOS.
* Specifies if should fallback to passcode authentication if biometric authentication is not available.
* On Android, this parameter is ignored due to BiometricPrompt API constraints:
* DEVICE_CREDENTIAL authenticator and negative button (cancel) are mutually exclusive.
*/
useFallback: boolean;
}

Hasil dari metode isAvailable() yang menunjukkan ketersediaan autentikasi biometrik.

export interface AvailableResult {
/**
* Whether authentication is available (biometric or fallback if useFallback is true)
*/
isAvailable: boolean;
/**
* The strength of available authentication method (STRONG, WEAK, or NONE)
*/
authenticationStrength: AuthenticationStrength;
/**
* The primary biometry type available on the device.
* On Android devices with multiple biometry types, this returns MULTIPLE.
* Use this for display purposes only - always use isAvailable for logic decisions.
*/
biometryType: BiometryType;
/**
* Whether the device has a secure lock screen (PIN, pattern, or password).
* This is independent of biometric enrollment.
*/
deviceIsSecure: boolean;
/**
* Whether strong biometry (Face ID, Touch ID, or fingerprint on devices that consider it strong)
* is specifically available, separate from weak biometry or device credentials.
*/
strongBiometryIsAvailable: boolean;
/**
* Error code from BiometricAuthError enum. Only present when isAvailable is false.
* Indicates why biometric authentication is not available.
* @see BiometricAuthError
*/
errorCode?: BiometricAuthError;
}

Tipe callback untuk biometry change listener.

export type BiometryChangeListener = (result: AvailableResult) => void;
export interface BiometricOptions {
reason?: string;
title?: string;
subtitle?: string;
description?: string;
negativeButtonText?: string;
/**
* Only for iOS.
* Specifies if should fallback to passcode authentication if biometric authentication fails.
* On Android, this parameter is ignored due to BiometricPrompt API constraints:
* DEVICE_CREDENTIAL authenticator and negative button (cancel) are mutually exclusive.
*/
useFallback?: boolean;
/**
* Only for iOS.
* Set the text for the fallback button in the authentication dialog.
* If this property is not specified, the default text is set by the system.
*/
fallbackTitle?: string;
/**
* Only for Android.
* Set a maximum number of attempts for biometric authentication. The maximum allowed by android is 5.
* @default 1
*/
maxAttempts?: number;
/**
* Only for Android.
* Specify which biometry types are allowed for authentication.
* If not specified, all available types will be allowed.
* @example [BiometryType.FINGERPRINT, BiometryType.FACE_AUTHENTICATION]
*/
allowedBiometryTypes?: BiometryType[];
}
export interface GetCredentialOptions {
server: string;
}
export interface Credentials {
username: string;
password: string;
}
export interface SetCredentialOptions {
username: string;
password: string;
server: string;
/**
* Access control level for the stored credentials.
* When set to BIOMETRY_CURRENT_SET or BIOMETRY_ANY, the credentials are
* hardware-protected and require biometric authentication to access.
*
* On iOS, this adds SecAccessControl to the Keychain item.
* On Android, this creates a biometric-protected Keystore key and requires
* BiometricPrompt authentication for both storing and retrieving credentials.
*
* @default AccessControl.NONE
* @since 8.4.0
*/
accessControl?: AccessControl;
}
export interface DeleteCredentialOptions {
server: string;
}
export interface GetSecureCredentialsOptions {
server: string;
/**
* Reason for requesting biometric authentication.
* Displayed in the biometric prompt on both iOS and Android.
*/
reason?: string;
/**
* Title for the biometric prompt.
* Only for Android.
*/
title?: string;
/**
* Subtitle for the biometric prompt.
* Only for Android.
*/
subtitle?: string;
/**
* Description for the biometric prompt.
* Only for Android.
*/
description?: string;
/**
* Text for the negative/cancel button.
* Only for Android.
*/
negativeButtonText?: string;
}
export interface IsCredentialsSavedOptions {
server: string;
}
export interface IsCredentialsSavedResult {
isSaved: boolean;
}
export enum AuthenticationStrength {
/**
* No authentication available, even if PIN is available but useFallback = false
*/
NONE = 0,
/**
* Strong authentication: Face ID on iOS, fingerprints on devices that consider fingerprints strong (Android).
* Note: PIN/pattern/password is NEVER considered STRONG, even when useFallback = true.
*/
STRONG = 1,
/**
* Weak authentication: Face authentication on Android devices that consider face weak,
* or PIN/pattern/password if useFallback = true (PIN is always WEAK, never STRONG).
*/
WEAK = 2,
}

Halaman ini dibuat dari plugin src/definitions.ts. Jalankan ulang sync saat API publik berubah di upstream.

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