Membuat aplikasi React Native untuk menambahkan pengguna ke layanan Face

Panduan ini akan menunjukkan kepada Anda cara memulai dengan sampel aplikasi pendaftaran Face. Aplikasi ini menunjukkan praktik terbaik untuk mendapatkan persetujuan yang bermakna untuk menambahkan pengguna ke dalam layanan pengenalan wajah dan memperoleh data wajah berkualitas tinggi. Sistem terintegrasi dapat menggunakan aplikasi seperti ini untuk menyediakan kontrol akses tanpa sentuhan, identifikasi, pelacakan kehadiran, atau kios personalisasi, berdasarkan data wajah mereka.

Saat pengguna meluncurkan aplikasi, aplikasi tersebut menampilkan layar persetujuan terperinci. Jika pengguna memberikan persetujuan, aplikasi akan meminta nama pengguna dan kata sandi lalu mengambil gambar wajah berkualitas tinggi menggunakan kamera perangkat.

Sampel aplikasi ditulis menggunakan JavaScript dan kerangka kerja React Native. Ini dapat disebarkan di perangkat Android dan iOS.

Prasyarat

• Langganan Azure – Buat langganan gratis.
• Setelah Anda memiliki langganan Azure, buat sumber daya Face di portal Azure untuk mendapatkan kunci dan titik akhir Anda. Setelah menyebar, pilih Buka sumber daya.
  • Anda akan memerlukan kunci dan titik akhir dari sumber daya yang Anda buat untuk menyambungkan aplikasi Anda ke Face API.

Penting

Pertimbangan keamanan

• Untuk pengembangan lokal dan pengujian terbatas awal, variabel lingkungan dapat digunakan (meski bukan praktik terbaik) untuk menyimpan titik akhir dan kunci API. Untuk penyebaran perintis dan final, kunci API harus disimpan dengan aman - yang kemungkinan melibatkan penggunaan layanan perantara untuk memvalidasi token pengguna yang dihasilkan selama proses masuk.
• Jangan pernah menyimpan titik akhir atau kunci API dalam kode atau menerapkannya ke sistem kontrol versi (misalnya Git). Jika terjadi secara tidak sengaja, Anda harus segera membuat titik akhir/kunci API baru dan mencabut kunci/titik akhir sebelumnya.
• Sebagai praktik terbaik, pertimbangkan untuk memiliki kunci API terpisah untuk pengembangan dan produksi.

Menyiapkan lingkungan pengembangan

Android

1. Klon repositori git untuk contoh aplikasi.

2. Untuk menyiapkan lingkungan pengembangan Anda, ikuti dokumentasi React Native . Pilih Mulai Cepat CLI React Native. Pilih OS dan Android pengembangan sebagai OS target. Lengkapi bagian Memasang dependensi dan lingkungan pengembangan Android.

3. Unduh editor teks yang disukai seperti Visual Studio Code.

4. Ambil titik akhir dan kunci FaceAPI Anda di portal Azure di tab Ringkasan sumber daya Anda. Jangan masukkan kunci Face API ke repositori jarak jauh Anda.

   Peringatan

   Hanya untuk pengembangan dan pengujian lokal, Anda dapat memasukkan kunci API dan titik akhir sebagai variabel lingkungan. Untuk penyebaran akhir, simpan kunci API di lokasi yang aman dan jangan pernah ada dalam variabel kode atau lingkungan. Lihat panduan autentikasi layanan Azure AI untuk cara lain mengautentikasi layanan.

5. Jalankan aplikasi menggunakan emulator Android Virtual Device dari Android Studio, atau perangkat Android Anda sendiri. Untuk menguji aplikasi Anda di perangkat fisik, ikuti dokumentasi React Native yang relevan .

iOS

1. Klon repositori git untuk contoh aplikasi.

2. Untuk menyiapkan lingkungan pengembangan Anda, ikuti dokumentasi React Native . Pilih Mulai Cepat CLI React Native. Pilih macOS OS pengembangan and iOS sebagai OS target. Selesaikan bagian Memasang dependensi.

3. Unduh editor teks yang disukai seperti Visual Studio Code. Anda juga harus mengunduh Xcode.

4. Ambil titik akhir dan kunci FaceAPI Anda di portal Azure di tab Ringkasan sumber daya Anda.

   Peringatan

   Hanya untuk pengembangan dan pengujian lokal, Anda dapat memasukkan kunci API dan titik akhir sebagai variabel lingkungan. Untuk penyebaran akhir, simpan kunci API di lokasi yang aman dan jangan pernah ada dalam variabel kode atau lingkungan. Lihat panduan autentikasi layanan Azure AI untuk cara lain mengautentikasi layanan.

5. Jalankan aplikasi menggunakan perangkat simulasi dari Xcode, atau perangkat iOS Anda sendiri. Untuk menguji aplikasi Anda di perangkat fisik, ikuti dokumentasi React Native yang relevan .

Menyesuaikan aplikasi untuk bisnis Anda

Setelah menyiapkan aplikasi sampel, Anda dapat menyesuaikannya dengan kebutuhan Anda sendiri.

Misalnya, Anda mungkin ingin menambahkan informasi khusus situasi di halaman persetujuan Anda:

1. Tambahkan lebih banyak instruksi untuk meningkatkan akurasi verifikasi.

   Banyak masalah pengenal wajah yang disebabkan oleh gambar referensi berkualitas rendah. Beberapa faktor yang dapat menurunkan performa model adalah:

   • Ukuran wajah (wajah jauh dari kamera)
   • Orientasi wajah (wajah terbalik atau miring menjauhi dari kamera)
   • Kondisi pencahayaan buruk (cahaya atau lampu latar buruk) di mana gambar mungkin memiliki eksposur buruk atau banyak noise
   • Oklusi (sebagian wajah tersembunyi atau terhalang), termasuk aksesori seperti topi atau kacamata rimmed tebal
   • Kabur (seperti dengan gerakan wajah cepat ketika foto diambil).

   Layanan ini menyediakan pemeriksaan kualitas gambar untuk membantu Anda membuat pilihan apakah kualitas gambar cukup berdasarkan faktor di atas untuk menambahkan pelanggan atau mencoba pengenalan wajah. Aplikasi ini mendemonstrasikan cara mengakses bingkai dari kamera perangkat, mendeteksi kualitas, dan menampilkan pesan antarmuka pengguna kepada pengguna untuk membantu mereka mengambil gambar dengan kualitas lebih tinggi, memilih bingkai berkualitas tinggi, dan menambahkan wajah yang terdeteksi ke dalam layanan Face API.

   

2. Aplikasi sampel menawarkan fungsionalitas untuk menghapus informasi pengguna dan opsi untuk dibaca. Anda dapat mengaktifkan atau menonaktifkan operasi ini berdasarkan persyaratan bisnis Anda.

   

   Untuk memperluas fungsionalitas aplikasi untuk mencakup pengalaman lengkap, baca ringkasan fitur tambahan untuk diterapkan dan praktik terbaik.

3. Mengonfigurasi database Anda untuk memetakan setiap orang dengan ID mereka

   Anda perlu menggunakan database untuk menyimpan gambar wajah bersama dengan metadata pengguna. Nomor jaminan sosial atau pengidentifikasi orang unik lainnya dapat digunakan sebagai kunci untuk mencari ID wajah mereka.

4. Untuk metode aman meneruskan kunci langganan dan titik akhir Anda ke layanan Face, lihat panduan Keamanan layanan Azure AI.

Menyebarkan aplikasi

Android

Pertama, pastikan aplikasi Anda siap untuk penyebaran produksi: hapus semua kunci dan rahasia dari kode aplikasi dan pastikan Anda telah mengikuti praktik terbaik keamanan.

Saat sudah merilis aplikasi untuk produksi, Anda akan membuat file APK siap rilis, yang merupakan format file paket aplikasi Android. File APK ini harus ditandatangani dengan kunci privat. Dengan build rilis ini, Anda dapat mulai mendistribusikan aplikasi ke perangkat Anda secara langsung.

Ikuti dokumentasi Persiapan rilis untuk mempelajari cara membuat kunci privat, menandatangani aplikasi Anda, dan membuat APK rilis.

Setelah Anda membuat APK yang ditandatangani, lihat dokumentasi Terbitkan aplikasi Anda untuk mempelajari selengkapnya tentang cara merilis aplikasi Anda.

iOS

Pertama, pastikan aplikasi Anda siap untuk penyebaran produksi: hapus semua kunci dan rahasia dari kode aplikasi dan pastikan Anda telah mengikuti praktik terbaik keamanan. Untuk mempersiapkan distribusi, Anda harus membuat ikon aplikasi, layar peluncuran, dan mengonfigurasi pengaturan info penyebaran. Ikuti dokumentasi dari Xcode untuk mempersiapkan distribusi aplikasi Anda.

Jika sudah siap merilis aplikasi untuk produksi, Anda akan membuat arsip aplikasi. Ikuti dokumentasi Xcode tentang cara membuat build arsip dan opsi untuk mendistribusikan aplikasi.

Langkah berikutnya

Dalam panduan ini, Anda telah mempelajari cara menyiapkan lingkungan pengembangan dan mulai menggunakan sampel aplikasi. Jika baru menggunakan React Native, Anda dapat membaca dokumen memulai untuk mempelajari informasi latar belakang lainnya. Ini mungkin juga membantu Anda membiasakan diri dengan Face API. Baca bagian lain tentang menambahkan pengguna sebelum Anda memulai pengembangan.