Menambahkan autentikasi ke aplikasi Apache Cordova Anda

Artikel
05/05/2021

Nota

Produk ini dihentikan. Untuk pengganti proyek yang menggunakan .NET 8 atau yang lebih baru, lihat pustaka Community Toolkit Datasync.

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 offline.

Mengonfigurasi backend Anda untuk autentikasi

Untuk mengonfigurasi backend untuk autentikasi, Anda harus:

Membuat pendaftaran aplikasi.
Mengonfigurasi Autentikasi dan Otorisasi Azure App Service.
Tambahkan 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 Microsoft Azure .
Pilih pendaftaran Microsoft Entra ID>Aplikasi>Pendaftaran baru.
Di halaman Daftarkan aplikasi, masukkan di 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).
DiURI Pengalihan , pilih Web dan ketik . Misalnya, jika URL backend Anda https://zumo-abcd1234.azurewebsites.net, Anda akan memasukkan https://zumo-abcd1234.azurewebsites.net/.auth/login/aad/callback.
Tekan tombol Daftarkan di bagian bawah formulir.
Salin ID Aplikasi (klien).
Dari panel kiri, pilih Sertifikat & rahasia>Rahasia klien baru.
Masukkan deskripsi yang sesuai, pilih durasi validitas, lalu pilih Tambahkan.
Salin rahasia di halaman rahasia & Sertifikat . Nilai tidak ditampilkan lagi.
PilihAutentikasi .
Di bawahpemberian implisit dan alur hibrid , aktifkan token ID .
Tekan Simpan di bagian atas halaman.

Penting

Nilai rahasia klien (kata sandi) adalah kredensial keamanan penting. Jangan bagikan kata sandi dengan siapa pun atau distribusikan dalam aplikasi klien.

Mengonfigurasi Autentikasi dan Otorisasi Azure App Service

Di portal Microsoft Azure, pilih Semua Sumber Daya, lalu App Service Anda.
Pilih pengaturan Autentikasi.
Tekan Tambahkan idP.
Pilih Microsoft sebagai idP.
- UntukJenis pendaftaran aplikasi , pilih Berikan detail pendaftaran aplikasi yang ada.
- Tempelkan nilai yang Anda salin sebelumnya ke dalam ID Aplikasi (klien) dan kotak rahasia Klien .
- UntukURL Penerbit , masukkan . URL ini adalah "url penyewa ajaib" untuk masuk Microsoft.
- Untuk Membatasi akses, pilih Memerlukan autentikasi.
- Untukpermintaan Tidak Diatomatisasi, pilih HTTP 401Tidak Sah .
Tekan Tambahkan.
Setelah layar autentikasi kembali, tekan Edit di samping Pengaturan autentikasi.
Dalam kotak URL pengalihan eksternal yang diizinkan , masukkan .
Tekan Simpan.

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

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

Menguji bahwa autentikasi sedang diminta

Menjalankan aplikasi menggunakan cordova run android
Verifikasi bahwa pengecualian yang tidak tertangani dengan kode status 401 (Tidak Sah) dimunculkan setelah aplikasi dimulai.

Menambahkan autentikasi ke aplikasi

Untuk menambahkan autentikasi melalui penyedia bawaan, Anda harus:

Tambahkan penyedia autentikasi ke daftar sumber baik yang diketahui.
Hubungi penyedia autentikasi sebelum mengakses data.

Memperbarui Kebijakan Keamanan Konten

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

Penyedia	Nama Penyedia SDK	OAuth Host
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 ID Microsoft Entra 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 adalah beberapa baris untuk keterbacaan. 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.

Ujung

Jika emulator tidak dimulai secara otomatis, buka Android Studio, lalu pilih Konfigurasikan>AVD Manager. Ini akan memungkinkan Anda untuk memulai perangkat secara manual. Jika Anda menjalankan adb devices -l, Anda akan melihat perangkat yang ditimulasi yang Anda pilih.

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.

Langkah berikutnya

Lihat bagian CARA:

Server (Node.js)
Server (ASP.NET Framework)
Klien Apache Cordova

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

Windows (UWP)
Windows (WPF)
Xamarin.Android
Xamarin.Forms
Xamarin.iOS

Bagikan melalui