Menambahkan autentikasi ke aplikasi Apache Cordova Anda

Artikel
11/08/2023

Dalam tutorial ini, Anda menambahkan autentikasi Microsoft ke proyek mulai cepat menggunakan ID Microsoft Entra. Sebelum menyelesaikan tutorial ini, pastikan Anda telah membuat proyek dan mengaktifkan sinkronisasi luring.

Mengonfigurasi backend Anda untuk autentikasi

Untuk mengonfigurasi backend untuk autentikasi, Anda harus:

Membuat pendaftaran aplikasi.
Mengonfigurasi Autentikasi dan Otorisasi Azure App Service.
Menambahkan aplikasi Anda ke URL Pengalihan Eksternal yang Diizinkan.

Selama tutorial ini, kami akan mengonfigurasi aplikasi Anda untuk menggunakan autentikasi Microsoft. Penyewa Microsoft Entra telah dikonfigurasi secara otomatis di langganan Azure Anda. Anda dapat menggunakan ID Microsoft Entra untuk mengonfigurasi autentikasi Microsoft.

Anda memerlukan URL backend layanan Azure Mobile Apps yang disediakan saat Anda menyediakan layanan.

Membuat pendaftaran aplikasi

Masuk ke portal Azure.
Pilih MICROSOFT Entra ID> Pendaftaran aplikasi> Pendaftaran baru.
Pada halaman Daftarkan aplikasi, masukkan zumoquickstart pada bidang Nama.
Di bawah Jenis akun yang didukung, pilih Akun di direktori organisasi apa pun (Direktori Microsoft Entra apa pun - multipenyewa) dan akun Microsoft pribadi (misalnya Skype, Xbox).
Di Redirect URI, pilih Web dan ketik <backend-url>/.auth/login/aad/callback . Misalnya, jika URL backend Anda adalah https://zumo-abcd1234.azurewebsites.net, maka Anda harus masukkan https://zumo-abcd1234.azurewebsites.net/.auth/login/aad/callback.
Tekan tombol Daftar di bagian bawah formulir.
Salin ID aplikasi (klien).
Dari panel kiri, pilihSertifikat & rahasia>Rahasia klien baru.
Masukkan deskripsi yang sesuai, memilih durasi validitas, lalu pilih Tambah.
Salin rahasia di halaman Sertifikat & rahasia . Nilai tidak ditampilkan lagi.
Pilih Autentikasi.
Di bawah Pemberian implisit dan alur hibrid, aktifkanToken ID.
Pilih Simpan di bagian atas halaman.

Penting

Nilai rahasia klien (kata sandi) adalah informasi masuk keamanan penting. Jangan berbagi kata sandi ini dengan siapa pun atau mendistribusikannya dalam aplikasi klien.

Mengonfigurasi Autentikasi dan Otorisasi Azure App Service

Di portal Microsoft Azure, pilih Semua Sumber Daya, lalu App Service.
Pilih Pengaturan>Autentikasi.
Klik Tambahkan penyedia identitas .
Pilih Microsoft sebagai penyedia identitas.
- Untuk Jenis pendaftaran aplikasi, pilih Berikan detail pendaftaran aplikasi yang ada.
- Tempelkan nilai yang Anda salin sebelumnya ke dalam kotak ID Aplikasi (klien) dan Rahasia klien.
- Untuk URL Penerbit, masukkan https://login.microsoftonline.com/9188040d-6c67-4c5b-b112-36a304b66dad/v2.0. URL ini adalah "url penyewa ajaib" untuk masuk ke Microsoft.
- Untuk Membatasi akses, pilih Memerlukan autentikasi.
- Untuk Permintaan tidak diautentikasi, pilih HTTP 401 Tidak Sah.
Tekan Tambahkan.
Setelah layar autentikasi kembali, tekan Edit di samping pengaturan Autentikasi.
Dalam kotak URL pengalihan eksternal yang diizinkan, masukkan zumoquickstart://easyauth.callback.
Tekan Simpan.

Langkah 10 mengharuskan semua pengguna diautentikasi sebelum mengakses backend Anda. Anda dapat memberikan kontrol yang lebih ketat dengan menambahkan kode ke backend Anda.

TAHUKAH ANDA? Anda juga dapat mengizinkan pengguna dengan akun organisasi di ID Microsoft Entra, Facebook, Google, Twitter, atau penyedia yang kompatibel dengan OpenID Koneksi. Ikuti petunjuk dalam dokumentasi Azure App Service.

Menguji autentikasi yang diminta

Jalankan aplikasi menggunakan cordova run android
Pastikan bahwa pengecualian yang tidak ditangani dengan kode status 401 (Tidak Sah) akan muncul setelah aplikasi dimulai.

Menambahkan autentikasi ke aplikasi

Untuk menambahkan autentikasi melalui penyedia bawaan, Anda harus:

Menambahkan penyedia autentikasi ke daftar sumber bagus yang dikenal.
Panggil penyedia autentikasi sebelum mengakses data.

Memperbarui Kebijakan Keamanan Konten

Setiap aplikasi Apache Cordova akan menyatakan sumber baik mereka yang dikenal melalui header Content-Security-Policy. Setiap penyedia yang didukung memiliki host OAuth yang perlu ditambahkan:

Penyedia	Nama Penyedia SDK	Host OAuth
Microsoft Entra ID	Microsoft Entra ID	`https://login.microsoftonline.com`
Facebook	facebook	`https://www.facebook.com`
Google	google	`https://accounts.google.com`
Twitter	twitter	`https://api.twitter.com`

Edit www/index.html; tambahkan host OAuth untuk MICROSOFT Entra ID sebagai berikut:

<meta http-equiv="Content-Security-Policy" content="
    default-src 'self' 
    data: gap: https://login.microsoftonline.com https://ZUMOAPPNAME.azurewebsites.net; 
    style-src 'self'; media-src *;">

Kontennya beberapa baris agar mudah dibaca. Tempatkan semua kode pada baris yang sama.

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://login.microsoftonline.com https://ZUMOAPPNAME.azurewebsites.net; style-src 'self'; media-src *;">

Anda telah mengganti ZUMOAPPNAME dengan nama aplikasi Anda.

Memanggil penyedia autentikasi

Edit www/js/index.js. Ganti metode setup() dengan kode berikut:

function setup() {
    client.login('aad').then(function () {
        // ORIGINAL CONTENTS OF FUNCTION
        todoTable = client.getSyncTable('todoitem');
        refreshDisplay();
        addItemEl.addEventListener('submit', addItemHandler);
        refreshButtonEl.addEventListener('click', refreshDisplay);
        // END OF ORIGINAL CONTENTS OF FUNCTION
    });
}

Menguji aplikasi

Jalankan perintah berikut:

cordova run android

Setelah startup awal selesai, Anda akan diminta untuk masuk dengan kredensial Microsoft Anda. Setelah selesai, Anda dapat menambahkan dan menghapus item dari daftar.

Tip

Jika emulator tidak dimulai secara otomatis, buka Android Studio, lalu pilih Konfigurasikan>Manajer AVD. Dengan ini, Anada bisa memulai perangkat secara manual. Jika menjalankan adb devices -l, Anda akan melihat perangkat emulasi yang dipilih.

Menghapus sumber daya

Sekarang Anda telah menyelesaikan tutorial mulai cepat, Anda dapat menghapus sumber daya dengan az group delete -n zumo-quickstart. Anda juga dapat menghapus pendaftaran aplikasi global yang digunakan untuk autentikasi melalui portal tersebut.

Langkah berikutnya

Coba perhatikan pada bagian CARA:

Anda juga dapat melakukan Mulai Cepat untuk platform lain menggunakan layanan yang sama:

Bagikan melalui