Cara menggunakan plugin Apache Cordova untuk Azure Mobile Apps
Panduan ini mengajarkan Anda untuk melakukan skenario umum menggunakan Plugin Apache Cordova terbaru untuk Azure Mobile Apps. Jika Anda baru mengenal Azure Mobile Apps, selesaikan dulu Mulai Cepat Aplikasi Ponsel Azure untuk membuat backend, membuat tabel, dan mengunduh proyek Apache Cordova yang sudah dibuat sebelumnya. Dalam panduan ini, kami berfokus pada Plugin Apache Cordova sisi klien.
Platform yang didukung
SDK ini mendukung Apache Cordova v6.0.0 dan yang lebih baru di perangkat iOS, Android, dan Windows. Dukungan platform adalah sebagai berikut:
- Android API 19+.
- iOS versi 8.0 dan versi lebih baru.
Peringatan
Artikel ini membahas informasi untuk versi pustaka v4.2.0, yang dihentikan. Tidak ada pembaruan lebih lanjut yang akan dilakukan pada pustaka ini, termasuk pembaruan untuk masalah keamanan. Pertimbangkan untuk pindah ke klien .NET seperti .NET MAUI untuk dukungan berkelanjutan.
Penyiapan dan prasyarat
Panduan ini mengasumsikan bahwa Anda telah membuat backend dengan tabel. Contoh menggunakan tabel TodoItem dari mulai cepat. Untuk menambahkan plugin Azure Mobile Apps ke proyek Anda, gunakan perintah berikut:
cordova plugin add cordova-plugin-ms-azure-mobile-apps
Untuk informasi selengkapnya tentang membuat Aplikasi Apache Cordova pertama Anda, lihat dokumentasinya.
Menyiapkan aplikasi Ionic v2
Untuk mengonfigurasi proyek Ionic v2 dengan benar, pertama-tama buat aplikasi dasar dan tambahkan plugin Cordova:
ionic start projectName --v2
cd projectName
ionic plugin add cordova-plugin-ms-azure-mobile-apps
Tambahkan baris berikut ke app.component.ts untuk membuat objek klien:
declare var WindowsAzure: any;
var client = new WindowsAzure.MobileServiceClient("https://yoursite.azurewebsites.net");
Anda sekarang dapat membuat dan menjalankan proyek di browser:
ionic platform add browser
ionic run browser
Plugin Azure Mobile Apps Cordova mendukung aplikasi Ionic v1 dan v2. Hanya aplikasi Ionic v2 yang memerlukan deklarasi tambahan untuk objek WindowsAzure.
Membuat koneksi klien
Buat koneksi klien dengan membuat objek WindowsAzure.MobileServiceClient. Ganti appUrl dengan URL ke Aplikasi Seluler Anda.
var client = WindowsAzure.MobileServiceClient(appUrl);
Menggunakan tabel
Untuk mengakses atau memperbarui data, buat referensi ke tabel backend. Ganti tableName dengan nama tabel Anda
var table = client.getTable(tableName);
Setelah Anda memiliki referensi tabel, Anda dapat bekerja lebih lanjut dengan tabel Anda:
Mengkueri referensi tabel
Setelah memiliki referensi tabel, Anda dapat menggunakannya untuk meminta data di server. Kueri dibuat dalam bahasa "seperti LINQ". Untuk mengembalikan semua data dari tabel, gunakan kode berikut:
/**
* Process the results that are received by a call to table.read()
*
* @param {Object} results the results as a pseudo-array
* @param {int} results.length the length of the results array
* @param {Object} results[] the individual results
*/
function success(results) {
var numItemsRead = results.length;
for (var i = 0 ; i < results.length ; i++) {
var row = results[i];
// Each row is an object - the properties are the columns
}
}
function failure(error) {
throw new Error('Error loading data: ', error);
}
table
.read()
.then(success, failure);
Fungsi sukses disebut dengan hasilnya. Jangan gunakan for (var i in results) dalam fungsi sukses karena akan berulang atas informasi yang termasuk dalam hasil ketika fungsi kueri lain (seperti .includeTotalCount()) digunakan.
Untuk informasi selengkapnya tentang sintaksis Kueri, lihat Mengkueri dokumentasi objek.
Memfilter data di server
Anda dapat menggunakan klausul where pada referensi tabel:
table
.where({ userId: user.userId, complete: false })
.read()
.then(success, failure);
Anda juga dapat menggunakan fungsi yang memfilter objek. Dalam hal ini, variabel this ditetapkan ke objek saat ini yang sedang difilter. Kode berikut secara fungsional setara dengan contoh sebelumnya:
function filterByUserId(currentUserId) {
return this.userId === currentUserId && this.complete === false;
}
table
.where(filterByUserId, user.userId)
.read()
.then(success, failure);
Paging melalui data
Gunakan metode take() dan skip(). Misalnya, jika Anda ingin membagi tabel menjadi catatan 100 baris:
var totalCount = 0, pages = 0;
// Step 1 - get the total number of records
table.includeTotalCount().take(0).read(function (results) {
totalCount = results.totalCount;
pages = Math.floor(totalCount/100) + 1;
loadPage(0);
}, failure);
function loadPage(pageNum) {
let skip = pageNum * 100;
table.skip(skip).take(100).read(function (results) {
for (var i = 0 ; i < results.length ; i++) {
var row = results[i];
// Process each row
}
}
}
Metode .includeTotalCount() digunakan untuk menambahkan bidang totalCount ke objek hasil. Bidang totalCount diisi dengan jumlah total catatan yang akan dikembalikan jika tidak ada paging yang digunakan.
Kemudian, Anda dapat menggunakan variabel halaman dan beberapa tombol UI untuk menyediakan daftar halaman; gunakan loadPage() untuk memuat catatan baru untuk setiap halaman. Terapkan penembolokan untuk mempercepat akses ke catatan yang telah dimuat.
Mengembalikan data yang diurutkan
Gunakan metode kueri .orderBy() atau .orderByDescending():
table
.orderBy('name')
.read()
.then(success, failure);
Untuk informasi selengkapnya tentang objek Kueri, lihat [Mengkueri dokumentasi objek].
Menyisipkan data
Buat objek JavaScript dengan tanggal yang sesuai dan panggil table.insert() secara asinkron:
var newItem = {
name: 'My Name',
signupDate: new Date()
};
table
.insert(newItem)
.done(function (insertedItem) {
var id = insertedItem.id;
}, failure);
Pada penyisipan yang berhasil, item yang dimasukkan dikembalikan dengan bidang tambahan yang diperlukan untuk operasi sinkronisasi. Perbarui cache Anda sendiri dengan informasi ini untuk pembaruan nanti.
Azure Mobile Apps Node.js Server SDK mendukung skema dinamis untuk tujuan pengembangan. Skema Dinamis memungkinkan Anda menambahkan kolom ke tabel dengan menentukannya dalam operasi sisipkan atau perbarui. Sebaiknya matikan skema dinamis sebelum memindahkan aplikasi ke produksi.
Mengubah data
Mirip dengan metode .insert(), Anda harus membuat objek Pembaruan dan kemudian memanggil .update(). Objek pembaruan harus berisi ID catatan yang akan diperbarui - ID diperoleh saat membaca catatan atau saat menelepon .insert().
var updateItem = {
id: '7163bc7a-70b2-4dde-98e9-8818969611bd',
name: 'My New Name'
};
table
.update(updateItem)
.done(function (updatedItem) {
// You can now update your cached copy
}, failure);
Menghapus data
Untuk menghapus rekaman, hubungi metode .del(). Lewati ID dalam referensi objek:
table
.del({ id: '7163bc7a-70b2-4dde-98e9-8818969611bd' })
.done(function () {
// Record is now deleted - update your cache
}, failure);
Pengguna yang diautentikasi
Azure App Service mendukung pengautentikasian dan otorisasi pengguna aplikasi menggunakan berbagai penyedia identitas eksternal: Facebook, Google, Akun Microsoft, dan Twitter. Anda dapat mengatur izin pada tabel untuk membatasi akses untuk operasi tertentu hanya untuk pengguna yang diautentikasi. Anda juga dapat menggunakan identitas pengguna yang diautentikasi untuk menerapkan aturan otorisasi dalam skrip server. Untuk informasi selengkapnya, lihat tutorial Memulai autentikasi.
Saat menggunakan autentikasi di aplikasi Apache Cordova, plugin Cordova berikut harus tersedia:
Catatan
Perubahan keamanan terbaru di iOS dan Android dapat membuat autentikasi alur server tidak tersedia. Dalam kasus ini, Anda harus menggunakan alur klien.
Dua alur autentikasi didukung: alur server dan alur klien. Aliran server memberikan pengalaman autentikasi yang paling sederhana, karena bergantung pada antarmuka autentikasi web penyedia. Alur klien memungkinkan integrasi yang lebih dalam dengan kemampuan khusus perangkat seperti akses menyeluruh karena bergantung pada SDK khusus perangkat khusus penyedia.
Autentikasi dengan penyedia (Alur Server)
Agar Aplikasi Ponsel mengelola proses autentikasi di aplikasi, Anda harus mendaftarkan aplikasi ke penyedia identitas Anda. Kemudian di Azure App Service, Anda perlu mengonfigurasi ID aplikasi dan rahasia yang disediakan oleh penyedia Anda. Untuk informasi selengkapnya, lihat tutorial Menambahkan autentikasi ke aplikasi Anda.
Setelah Anda mendaftarkan penyedia identitas Anda, panggil metode .login() dengan nama penyedia Anda. Misalnya, untuk masuk dengan Facebook gunakan kode berikut:
client.login("facebook").done(function (results) {
alert("You are now signed in as: " + results.userId);
}, function (err) {
alert("Error: " + err);
});
Nilai yang valid untuk penyedia adalah 'aad', 'facebook', 'google', 'microsoftaccount', dan 'twitter'.
Catatan
Karena masalah keamanan, beberapa penyedia autentikasi mungkin tidak berfungsi dengan alur server. Anda harus menggunakan metode aliran klien dalam kasus ini.
Dalam hal ini, Azure App Service mengelola alur autentikasi OAuth 2.0. Ini menampilkan halaman masuk dari penyedia yang dipilih dan menghasilkan token autentikasi App Service setelah berhasil masuk dengan penyedia identitas. Fungsi masuk, setelah selesai, mengembalikan objek JSON yang mengekspos ID pengguna dan token autentikasi App Service di bidang userId dan authenticationToken, masing-masing. Token ini dapat di-cache dan digunakan kembali sampai kedaluwarsa.
Autentikasi dengan penyedia (Alur Klien)
Aplikasi Anda juga dapat secara independen menghubungi penyedia identitas dan kemudian memberikan token yang dikembalikan ke App Service Anda untuk autentikasi. Alur klien ini memungkinkan Anda memberikan pengalaman masuk tunggal bagi pengguna atau untuk mengambil data pengguna tambahan dari penyedia identitas.
Contoh dasar Autentikasi Sosial
Contoh ini menggunakan SDK klien Facebook untuk autentikasi:
client.login("facebook", {"access_token": token})
.done(function (results) {
alert("You are now signed in as: " + results.userId);
}, function (err) {
alert("Error: " + err);
});
Contoh ini mengasumsikan bahwa token yang disediakan oleh SDK penyedia masing-masing disimpan dalam variabel token. Detail yang dibutuhkan oleh masing-masing penyedia sedikit berbeda. Lihat Dokumentasi Autentikasi dan Otorisasi Azure App Service untuk menentukan bentuk payload yang tepat.
Mendapatkan informasi tentang pengguna yang diautentikasi
Informasi autentikasi dapat diambil dari titik akhir /.auth/me menggunakan panggilan HTTP dengan pustaka HTTP/REST apa pun. Pastikan Anda mengatur header X-ZUMO-AUTH ke token autentikasi Anda. Token autentikasi disimpan dalam client.currentUser.mobileServiceAuthenticationToken. Misalnya, untuk menggunakan API ambil:
var url = client.applicationUrl + '/.auth/me';
var headers = new Headers();
headers.append('X-ZUMO-AUTH', client.currentUser.mobileServiceAuthenticationToken);
fetch(url, { headers: headers })
.then(function (data) {
return data.json()
}).then(function (user) {
// The user object contains the claims for the authenticated user
});
Fetch tersedia sebagai paket npm atau untuk unduhan browser dari CDNJS. Data diterima sebagai objek JSON.
Konfigurasikan Layanan Aplikasi Ponsel Anda untuk URL pengalihan eksternal.
Beberapa jenis aplikasi Apache Cordova menggunakan kemampuan loopback untuk menangani alur UI OAuth. Alur OAuth UI di localhost menyebabkan masalah karena layanan autentikasi hanya tahu cara memanfaatkan layanan Anda secara default. Contoh alur UI OAuth yang bermasalah meliputi:
- Emulator Ripple.
- Live Reload dengan Ionic.
- Menjalankan backend seluler secara lokal
- Menjalankan backend seluler di Azure App Service yang berbeda dari yang menyediakan autentikasi.
Ikuti petunjuk ini untuk menambahkan pengaturan lokal Anda ke konfigurasi:
Masuk ke portal Microsoft Azure
Pilih Semua sumber daya atau App Service lalu klik nama Aplikasi Ponsel Anda.
Klik Alat
Klik Penjelajah sumber daya di menu AMATI, lalu klik Buka. Jendela atau tab baru terbuka.
Perluas node konfigurasi dan authsettings untuk situs Anda di navigasi kiri.
Klik Edit
Cari elemen "allowedExternalRedirectUrls". Ini dapat diatur ke null atau array nilai. Ubah nilai ke nilai berikut:
"allowedExternalRedirectUrls": [ "http://localhost:3000", "https://localhost:3000" ],Ganti URL dengan URL layanan Anda. Contohnya termasuk
http://localhost:3000(untuk layanan sampel Node.js), atauhttp://localhost:4400(untuk layanan Ripple). Namun, URL ini adalah contoh - situasi Anda, termasuk untuk layanan yang disebutkan dalam contoh, mungkin berbeda.Klik tombol Baca/Tulis di pojok kanan atas layar.
Klik tombol PUT hijau.
Pengaturan disimpan pada saat ini. Jangan tutup jendela browser sampai pengaturan selesai disimpan. Tambahkan juga URL loopback ini ke pengaturan CORS untuk App Service Anda:
- Masuk ke portal Microsoft Azure
- Pilih Semua sumber daya atau App Service lalu klik nama Aplikasi Ponsel Anda.
- Bilah Pengaturan terbuka secara otomatis. Jika tidak, klik Semua Pengaturan.
- Klik CORS di bawah menu API.
- Masukkan URL yang ingin Anda tambahkan dalam kotak yang disediakan dan tekan Enter.
- Masukkan lebih banyak URL sesuai kebutuhan.
- Klik Simpan untuk menyimpan pengaturan.
Dibutuhkan sekitar 10-15 detik agar pengaturan baru berlaku.
Saran dan Komentar
Segera hadir: Sepanjang tahun 2024 kami akan menghentikan penggunaan GitHub Issues sebagai mekanisme umpan balik untuk konten dan menggantinya dengan sistem umpan balik baru. Untuk mengetahui informasi selengkapnya, lihat: https://aka.ms/ContentUserFeedback.
Kirim dan lihat umpan balik untuk