Lompat ke konten utama

Autentikasi Biometrik di Aplikasi Capacitor

Pelajari cara mengimplementasikan autentikasi biometrik yang aman di aplikasi Capacitor untuk meningkatkan pengalaman pengguna dan melindungi data sensitif.

Martin Donadieu

Martin Donadieu

Pengembang Konten

Autentikasi Biometrik di Aplikasi Capacitor

Autentikasi biometrik mengizinkan pengguna untuk mengakses aplikasi secara aman menggunakan sidik jari, wajah, atau fitur biologis lainnya daripada kata sandi. Bagi pengembang yang bekerja dengan CapacitorMengimplementasikan fitur ini cukup sederhana dan berfungsi pada baik iOS dan Android.

  • Mengapa Menggunakan Autentikasi Biometrik?

    • Lebih aman daripada kata sandi.
    • Mengurangi pengalaman pengguna dengan membuat login lebih cepat.
    • Mengikuti standar keamanan untuk data sensitif.
  • Metode yang Dapat Dibantu:

    • Sidik Jari: Cepat dan umum.
    • Pengenalan Wajah: Opsi tanpa tangan.
    • Skanning Iris: Kasus keamanan tinggi (perangkat terbatas).
    • Pengenalan Suara: Fokus pada aksesibilitas (dukungan terbatas).
  • Alat Utama yang Diperlukan:

    • Capacitor 3.0+.
  • Poin Utama Pengaturan:

    • Tambahkan izin ke AndroidManifest dan Info.plist.
    • Gunakan Keychain (iOS) atau Keystore (Android) untuk penyimpanan yang aman.
    • Uji secara menyeluruh untuk konsistensi dan opsi pengganti.

Perbandingan Cepat Plugin

Nama Plugin Capacitor Versi Fitur Terbaik Untuk
@aparajita/capacitor-biometric-auth Capacitor 8 Biometrik Asli, Kredensial Perangkat Proyek baru menggunakan Capacitor 8
capacitor-native-biometric Capacitor 3, 4 Penyimpanan kunci yang aman, Keychain/Keystore Pengelolaan kunci
Semua versi Dukungan kunci dan perangkat Opsi autentikasi yang fleksibel

Autentikasi biometrik di aplikasi Capacitor adalah cara yang aman dan ramah pengguna untuk melindungi data sensitif. Artikel lengkap menjelaskan langkah-langkah pengaturan, contoh code , strategi pengujian, dan standar keamanan.

Autentikasi Biometrik Ionic (FaceID / FingerPrint)

Persyaratan Pengaturan

Untuk mengaktifkan autentikasi biometrik di aplikasi Anda Aplikasi CapacitorUntuk menginstal aplikasi, Anda akan perlu mengonfigurasi beberapa alat, dependensi, dan pengaturan spesifik platform. Di bawah ini, Anda akan menemukan persyaratan pengaturan langkah demi langkah untuk kedua platform Android dan iOS.

Peralatan dan Dependensi yang Diperlukan

Sebelum melanjutkan ke implementasi, pastikan peralatan dan dependensi berikut sudah siap:

Komponen Versi Minimum Tujuan
Capacitor 3.0 atau lebih tinggi Framewok inti
Node.js Terbaru LTS Pengelolaan Paket
Xcode Versi Terbaru Pengembangan iOS
Android Studio Versi Terbaru Pengembangan Android
Perangkat Fisik iOS 13+ / Android API 23+ Menguji Fitur Biometrik

Pilih Plugin Biometrik berdasarkan versi Capacitor Anda:

  • @aparajita/capacitor-autentikasi-biometrik untuk Capacitor 8
  • capacitor-autentikasi-biometrik-native untuk Capacitor 3 dan 4

Langkah-Langkah Pengaturan Android

Untuk mengonfigurasi autentikasi biometrik pada Android, Anda perlu membuat beberapa penyesuaian pada file proyek Anda:

  1. Konfigurasi Manifest

    Tambahkan izin berikut ke file: AndroidManifest.xml file:

    <uses-permission android:name="android.permission.USE_BIOMETRIC" />
    <!-- For Android 9 (API 28) or lower -->
    <uses-permission android:name="android.permission.USE_FINGERPRINT" />
  2. Pengaturan Gradle

    Perbarui pengaturan aplikasi Anda build.gradle file untuk mencakup dependensi biometrik yang diperlukan:

    dependencies {
        implementation "androidx.biometric:biometric:1.1.0"
    }

Langkah-Langkah Pengaturan iOS

Untuk iOS, Anda perlu mengikuti langkah-langkah ini untuk mengonfigurasi autentikasi biometrik:

  1. Pengaturan Info.plist

    Tambahkan deskripsi penggunaan yang diperlukan ke file: Info.plist Pengaturan Keychain

    <key>NSFaceIDUsageDescription</key>
    <string>Authentication required for secure access</string>
  2. Aktifkan kemampuan Keychain di Xcode:

    Buka pengaturan proyek Anda.

    • Pergi ke tab
    • Pengaturan Tanda Tangan &amp; Kemampuan __CAPGO_KEEP_0__ __CAPGO_KEEP_0__
    • Tambahkan kemampuan Keychain Sharing. Konfigurasi kelompok akses jika diperlukan. Pengaturan Kebijakan Autentikasi
    • Atur kebijakan autentikasi lokal untuk mengatasi:
  3. Upaya autentikasi gagal

    Jatuh ke kode sandi perangkat

    • Periksa ketersediaan biometrik
    • Untuk keamanan yang lebih baik, gunakan Keychain iOS untuk menyimpan data sensitif. Ini memastikan konsistensi dengan Touch ID dan Face ID serta melindungi kreditensi pengguna.
    • __CAPGO_KEEP_0__ Implementasi

    Setelah konfigurasi pengaturan sudah ada, langkah berikutnya adalah menerapkan __CAPGO_KEEP_0__ yang aman. Ini melibatkan memilih plugin yang tepat dan menciptakan aliran autentikasi yang dapat diandalkan.

Code Implementation

Once the setup configurations are in place, the next step is implementing secure code. This involves selecting the right plugin and crafting reliable authentication flows.

Panduan Pemilihan Plugin

Ketika memilih plugin autentikasi biometrik untuk aplikasi Capacitor Anda, pilihan Anda harus sesuai dengan kebutuhan proyek khusus. Berikut beberapa pilihan populer:

Nama Plugin Versi Capacitor Fitur Utama Terbaik Untuk
@aparajita/capacitor-biometric-auth Capacitor 8 Biometrik Asli, Kredensial Perangkat, API yang Komprehensif Proyek Baru yang Dimulai dengan Capacitor 8
capacitor-native-biometric Capacitor 3, 4 Penyimpanan kunci credential yang aman, Integrasi Keychain/Keystore Proyek-proyek yang sudah ada yang membutuhkan manajemen kunci credential
Semua versi Autentikasi kunci dan kunci perangkat, bersih API Proyek yang membutuhkan opsi autentikasi yang fleksibel

Autentikasi Code Contoh

Berikut cara menggunakan @capgo/capacitor-native-biometric plugin untuk autentikasi biometrik:

import { Biometrics } from '@capgo/capacitor-native-biometric';

async function setupBiometricAuth() {
  try {
    const { isAvailable } = await Biometrics.isBiometricsAvailable();

    if (!isAvailable) {
      return {
        success: false,
        message: "Biometric authentication not available"
      };
    }

    const result = await Biometrics.authenticate({
      reason: "Access your secure data",
      title: "Verify Identity",
      subtitle: "Use biometrics to authenticate",
      cancelTitle: "Use Password Instead"
    });

    return {
      success: true,
      data: result
    };
  } catch (error) {
    return {
      success: false,
      error: error.message
    };
  }
}

Untuk mengelola kunci credential yang aman, plugin capacitor-native-biometric menawarkan pendekatan yang sederhana:

import { NativeBiometric } from '@capgo/capacitor-native-biometric';

async function secureCredentialStorage(credentials) {
  try {
    await NativeBiometric.setCredentials({
      username: credentials.username,
      password: credentials.password,
      server: "api.yourserver.com"
    });

    // Verify storage by retrieving the credentials
    const stored = await NativeBiometric.getCredentials({
      server: "api.yourserver.com"
    });

    return stored.username === credentials.username;
  } catch (error) {
    console.error("Credential storage failed:", error);
    return false;
  }
}

Setelah code sudah terpasang, sangat penting untuk memvalidasi fungsinya melalui tes yang tepat.

Metode Pengujian

Untuk memastikan autentikasi biometrik Anda dapat diandalkan dan aman, pertimbangkan strategi pengujian berikut:

  • Pengujian Kompabilitas Perangkat

    Cek apakah autentikasi bekerja di berbagai perangkat dan kondisi:

    async function runCompatibilityTests() {
      const tests = {
        biometricAvailable: await Biometrics.isBiometricsAvailable(),
        credentialStorage: await testCredentialStorage(),
        authenticationFlow: await testAuthFlow(),
        fallbackMechanism: await testFallbackAuth()
      };
    
      return tests;
    }
  • Pengujian Penanganan Kesalahan dan Skenario Umum

    Simulasikan kesalahan dan uji mekanisme fallback:

    async function validateErrorHandling() {
      try {
        await Promise.race([
          Biometrics.authenticate(),
          new Promise((_, reject) =>
            setTimeout(() => reject(new Error("Timeout")), 30000)
          )
        ]);
      } catch (error) {
        return implementFallbackAuth();
      }
    }
  • Pengujian Keamanan

    Pastikan implementasi Anda memenuhi standar keamanan:

    async function validateSecurityMeasures() {
      const validations = {
        keychain: await validateKeychainAccess(),
        biometricStrength: await checkBiometricStrength(),
        encryptionStatus: await verifyEncryption()
      };
    
      return validations.keychain &&
             validations.biometricStrength &&
             validations.encryptionStatus;
    }

Selain itu, uji skenario seperti:

  • Pengujian Coba-coba Autentikasi yang Gagal
  • Pengujian Setelah Restart Perangkat
  • Transisi antara keadaan aplikasi latar depan dan latar belakang
  • Perubahan koneksi jaringan
  • Perubahan pengaturan biometrik sistem

Pengujian menyeluruh memastikan sistem autentikasi biometrik kuat dan siap digunakan dalam situasi nyata.

Standar Keamanan

Menggunakan keamanan biometrik yang kuat berarti memprioritaskan perlindungan data, mematuhi peraturan kompatibilitas, dan menerapkan teknik keamanan berlapis.

Metode Keamanan Data

Pada iOS, data biometrik dienkripsi dan disimpan menggunakan Keychain, sedangkan Android menggunakan KeystoreJika Anda menggunakan capacitor-native-biometric plugin, Anda dapat menyimpan kredensial pengguna dengan aman seperti ini:

import { NativeBiometric } from '@capgo/capacitor-native-biometric';

async function securelyStoreCredentials(username, password) {
  const server = "api.yourapp.com";

  // Use the highest available encryption
  await NativeBiometric.setCredentials({
    username,
    password,
    server,
    authenticationType: "biometricAndDevice",
    accessControl: "biometryAny"
  });
}

Untuk transmisi data, selalu implementasikan enkripsi akhir ke akhir untuk menjaga informasi sensitif tetap terlindungi.

Pedoman Penyimpanan

Aplikasi toko membatasi aturan ketat untuk keamanan biometrik. Berikut adalah penjelasan dari persyaratan utama platform:

Platform Persyaratan Utama Catatan Implementasi
iOS Gunakan framework LocalAuthentication, berikan opsi fallback, dan pastikan konsensus pengguna yang jelas Harus mendukung baik Face ID dan Touch ID
Android Manfaatkan BiometricPrompt API, dapatkan izin pengguna eksplisit, dan deklarasikan tingkat keamanan Mendukung pengenalan sidik jari dan wajah, dengan perbedaan untuk tingkat keamanan yang berbeda

Pengaturan Multi-Faktor

Meningkatkan keamanan seringkali memerlukan kombinasi verifikasi biometrik dengan lapisan autentikasi tambahan. Misalnya, setelah verifikasi biometrik awal , Anda dapat menambahkan langkah sekunder untuk memastikan identitas pengguna:Pendekatan multi-faktor biasanya mencakup:

async function setupMultiFactorAuth() {
  // First factor: Biometric verification
  const biometricResult = await Biometrics.authenticate({
    reason: "Verify your identity",
    title: "Authentication Required"
  });

  if (biometricResult.verified) {
    // Second factor: Time-based OTP or similar mechanism
    const totpResult = await verifyTOTP();
    return totpResult.success;
  }

  return false;
}

]}

  • Autentikasi primer biometrik
  • Verifikasi sekunder (misalnya, SMS code atau aplikasi autentikator)
  • Konfirmasi transaksi khusus untuk keamanan tambahan

Jika Anda menggunakan alat seperti Capgo untuk update langsung, pastikan kinerja keamanan dengan mengambil keuntungan dari fitur enkripsi ujung ke ujung fitur. Ini menjamin bahwa metode autentikasi biometrik Anda tetap aman selama update dan sesuai dengan persyaratan platform [1].

Pedoman Perawatan

Tetapkan sistem biometrik Anda berjalan lancar dengan mengimbangi kecepatan, efisiensi baterai, dan update yang tepat waktu

Tips Kecepatan dan Baterai

Berikut adalah code snippet untuk implementasi autentikasi biometrik yang efisien:

// Efficient authentication implementation
async function optimizedBiometricCheck() {
  const authResult = await NativeBiometric.isAvailable();

  if (!authResult.isAvailable) {
    return handleFallback();
  }

  // Cache authentication state to avoid unnecessary re-checks
  if (this.cachedAuthState && !this.isAuthExpired()) {
    return this.cachedAuthState;
  }

  return NativeBiometric.verifyIdentity({
    reason: "Verify your identity",
    title: "Authentication Required",
    maxAttempts: 3
  });
}

Untuk mendapatkan hasil terbaik dari kinerja sistem biometrik Anda:

  • Batch Authentication: Sebaliknya dari beberapa permintaan, kelompokkan aksi yang memerlukan autentikasi ke dalam satu sesi untuk mengurangi gangguan.
  • Smart Caching: Simpan status autentikasi secara aman dan tetapkan waktu kedaluwarsa untuk menghindari verifikasi ulang.
  • Background Optimization: Sementara waktu, hentikan tugas-tugas yang tidak penting selama autentikasi untuk meningkatkan kecepatan dan menghemat baterai.
  • Event-Driven Approach: Ganti polling konstan dengan pendengar acara untuk memantau status autentikasi lebih efisien.

Perbarui dengan Capgo

Capgo Dashboard Interface Perbarui Langsung

Capgo memperbarui aplikasi.

Berikut adalah alasan mengapa Capgo adalah alat yang bagus untuk mengelola pembaruan:

  • Pengaktifan InstanPush keluar perbaikan keamanan kritis dan fitur baru tanpa menunda.
  • Pengaktifan Langkah demi LangkahTest pembaruan dengan kelompok pengguna tertentu sebelum mengaktifkannya untuk semua.
  • Pengendalian VersiTetapkan track versi autentikasi yang berbeda untuk pengelolaan yang lebih baik.
  • Pengaktifan DaruratCepat kembali ke versi sebelumnya jika ada masalah.

Pembaruan API

Mengupdate biometrik API sangat penting untuk keamanan dan fungsi. Tetap proaktif dengan pembaruan dengan mengikuti pedoman ini:

Jenis Perbarui Metode Pemantauan Jadwal Implementasi
Pembaruan Keamanan Peringatan Repositori Plugin 24 jam
Perbarui Fitur Dokumentasi Platform 1 minggu
Perubahan Mengganggu Catatan Rilis 2-4 minggu
Kebijakan Perbarui Toko Portal Pengembang Sebelum pengiriman

Fokus pada area ini:

  • Pengembangan Platform: Ikuti perbarui pada API LocalAuthentication iOS dan BiometricPrompt Android.
  • Standar Keamanan: Tetap terintegrasi dengan persyaratan keamanan biometrik terbaru.
  • Pedoman Toko: Pastikan konsisten dengan kebijakan App Store Apple dan Google Play untuk menghindari masalah pengiriman.

Kesimpulan

Kesimpulan Utama

Menambahkan autentikasi biometrik ke aplikasi Capacitor Anda melibatkan keseimbangan keamanan, kinerja, dan pengalaman pengguna. Berikut adalah ringkasan singkat elemen inti yang perlu dipertimbangkan:

Komponen Fokus Implementasi Pertimbangan Utama
Batasan Keamanan Penggunaan penyimpanan native platform (Keychain/Keystore) Enkripsi akhir-ke-akhir, perlindungan kreditensial
Pemilihan Plugin Kompatibilitas versi terbaru Support untuk berbagai jenis biometrik
Pengelolaan Perbarui Siklus pemeliharaan reguler Deploymen pengamanan cepat
Pengalaman Pengguna Opsi autentikasi fallback Prompt autentikasi yang jelas dan mudah digunakan

Komponen-komponen ini adalah peta jalan Anda untuk integrasi sukses.

Langkah-langkah untuk Mengimplementasikan Autentikasi Biometrik

Ikuti langkah-langkah ini untuk mengintegrasikan autentikasi biometrik ke dalam aplikasi Anda:

  • Pengintegrasian Plugin
    Mulai dengan memilih plugin biometrik yang sesuai dengan versi Capacitor Anda. Pastikan file konfigurasi Anda - seperti AndroidManifest.xml dan Info.plist - telah diatur dengan benar. Untuk penyimpanan kredit yang aman, bergantunglah pada solusi native seperti Keychain atau Keystore.

  • Konfigurasi Keamanan
    Jaga data pengguna dengan mengaktifkan enkripsi akhir-ke-akhir untuk semua transmisi kredit. Di mana perlu, termasuk autentikasi multi-faktor untuk menambahkan lapisan keamanan tambahan. Rencanakan penanganan kesalahan yang kuat dan opsi fallback untuk menjaga fungsi tetap berjalan dalam kasus gagal.

  • Pemeliharaan Berkelanjutan
    Tetapkan aplikasi Anda aman dengan mengatur pipeline pembaruan reguler untuk patch keamanan. Tetaplah terus menerus memperbarui plugin dan memantau saran keamanan. Alat seperti Capgo dapat memudahkan proses ini dengan memungkinkan pembaruan instan. Capgo menunjukkan tingkat pembaruan pengguna sebesar 95% dalam waktu 24 jam, membuatnya menjadi penambahan berharga untuk toolkit Anda [2].

“Capgo adalah alat yang wajib dimiliki oleh para pengembang yang ingin lebih produktif. Menghindari tinjauan untuk memperbaiki bug adalah emas.” - Bessie Cooper [2]

Tanya Jawab

::: faq

Apa perbedaan antara plugin biometrik untuk Capacitor, dan bagaimana saya dapat memilih yang terbaik untuk aplikasi saya?

Mengambil plugin biometrik untuk aplikasi Capacitor Anda sangat penting untuk menyesuaikan pilihan dengan kebutuhan proyek Anda. Pertimbangkan faktor-faktor seperti kompatibilitas platform (apakah Anda membutuhkan dukungan untuk iOS, Android, atau keduanya), seberapa sederhana proses integrasi, dan apakah plugin mendukung metode biometrik canggih seperti Wajah ID atau pengenalan sidik jari.

Meskipun panduan ini berfokus pada implementasi pengenalan biometrik di Capacitoralat-alat seperti Capgo dapat memainkan peran yang sangat berharga. Mereka memungkinkan Anda untuk memasukkan pembaruan waktu nyata ke aplikasi Anda tanpa perlu persetujuan toko aplikasi. Hal ini berarti aplikasi Anda dapat tetap relevan dengan fitur keamanan terbaru, termasuk pembaruan biometrik, sambil tetap memenuhi standar Apple dan Android.

:::

How do I ensure biometric authentication in my Capacitor app meets security standards and app store guidelines?

Bagaimana saya dapat memastikan pengenalan biometrik di aplikasi Capacitor saya memenuhi standar keamanan dan pedoman toko aplikasi?

  • Untuk memastikan pengenalan biometrik di aplikasi __CAPGO_KEEP_0__ Anda memenuhi standar keamanan saat ini dan aturan toko aplikasi, ikuti praktek-praktek utama ini: Pilih plugin yang dapat diandalkan: Gunakan plugin autentikasi biometrik yang dipercaya seperti Capacitor’s @capacitor/biometrics agar aplikasi Anda aman dan berfungsi lancar di berbagai perangkat.
  • Patuhi aturan platform: Patuhi pedoman Apple dan Android, termasuk memperoleh persetujuan pengguna, menggunakan penyimpanan yang aman, dan menawarkan opsi cadangan seperti PIN atau kata sandi.
  • Perbarui dependensi secara teratur: Perbarui aplikasi dan library Anda secara teratur untuk memperbaiki kelemahan keamanan dan tetap sesuai dengan standar yang berubah-ubah.

Menggunakan layanan pembaruan hidup seperti Capgo membuat proses ini lebih lancar. Ini memungkinkan Anda untuk memasukkan pembaruan keamanan atau perbaikan ke aplikasi Anda secara instan, menghindari keterlambatan persetujuan toko aplikasi. Ini menjaga aplikasi Anda aman, kompatibel, dan terbaru dengan kebijakan Apple dan Android.

:::

What challenges might developers face when integrating biometric authentication into Capacitor apps, and how can they overcome them?

Apa tantangan yang mungkin dihadapi pengembang ketika mengintegrasikan autentikasi biometrik ke dalam aplikasi Capacitor dan bagaimana mereka dapat mengatasi masalah tersebut?

  • Kemampuan perangkat: Untuk mendukung fitur biometrik pada baik Android maupun iOS, pertimbangkan menggunakan plugin seperti @capacitor-fingerprint-auth. Alat-alat ini membantu menghubungkan celah antar platform, memastikan aplikasi Anda berjalan lancar di berbagai perangkat.

  • Izin pengguna: Penting untuk menjelaskan dengan jelas mengapa aplikasi Anda membutuhkan akses biometrik. Berikan informasi yang transparan kepada pengguna dan desain aplikasi Anda untuk menangani situasi dengan baik ketika pengguna memilih tidak memberikan izin.

  • Keamanan data: Melindungi data autentikasi sangat kritis. Ikuti praktik enkripsi terbaik dan patuhi pedoman keamanan yang disediakan oleh setiap platform untuk memastikan informasi sensitif tetap aman.

Untuk melakukan pembaruan atau memperbaiki masalah terkait fitur biometrik tanpa kesulitan pengajuan aplikasi di toko aplikasi, Anda dapat menggunakan alat seperti Capgo. Ini memungkinkan pembaruan waktu nyata, memungkinkan Anda untuk menangani bug atau meningkatkan fungsi dengan cepat sambil tetap memenuhi kebijakan Apple dan Android. :::

Lanjutkan dari Autentikasi Biometrik di Aplikasi Capacitor

Jika Anda menggunakan Autentikasi Biometrik di Aplikasi Capacitor untuk merencanakan keamanan dan kewajiban, hubungkannya dengan Enkripsi untuk detail implementasi di Enkripsi, Kewajiban untuk detail implementasi di Kewajiban, Scanner Keamanan Capgo untuk alur kerja produk di Scanner Keamanan Capgo, Keamanan Capgo untuk alur kerja produk di Keamanan Capgo, dan Pusat Kepercayaan Capgo untuk alur kerja produk di Pusat Kepercayaan Capgo.

Pembaruan Langsung untuk Aplikasi Capacitor

Ketika bug layer web masih aktif, kirimkan perbaikan melalui Capgo daripada menunggu hari-hari untuk persetujuan toko aplikasi. Pengguna mendapatkan pembaruan di latar belakang sementara perubahan native tetap dalam jalur review normal.

Mulai Sekarang

Terbaru dari Blog Kami

Capgo memberikan Anda wawasan terbaik yang Anda butuhkan untuk menciptakan aplikasi mobile yang benar-benar profesional.