Cara menggunakan plugin Apache Cordova untuk Azure Mobile Apps

Artikel
12/19/2022

Nota

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

Panduan ini mengajarkan Anda untuk melakukan skenario umum menggunakan terbaru Apache Cordova Plugin untuk Azure Mobile Apps. Jika Anda baru menggunakan Azure Mobile Apps, pertama-tama selesaikan Mulai Cepat Azure Mobile Apps untuk membuat backend, membuat tabel, dan mengunduh proyek Apache Cordova bawaan. Dalam panduan ini, kami fokus 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 yang 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 membangun dan menjalankan proyek di browser:

ionic platform add browser
ionic run browser

Plugin Cordova Azure Mobile Apps 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);

Bekerja dengan 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 jauh dengan tabel Anda:

Mengkueri Tabel
- Data Pemfilteran
- Paging melalui Data
- Pengurutan Data
Menyisipkan data
Mengubah Data
Menghapus Data

Mengkueri referensi tabel

Setelah Anda memiliki referensi tabel, Anda bisa menggunakannya untuk mengkueri 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 keberhasilan dipanggil dengan hasilnya. Jangan gunakan for (var i in results) dalam fungsi keberhasilan karena akan melakukan iterasi atas informasi yang disertakan dalam hasil ketika fungsi kueri lain (seperti .includeTotalCount()) digunakan.

Untuk informasi selengkapnya tentang sintaks kueri, lihat dokumentasi objek kueri .

Memfilter data di server

Anda dapat menggunakan klausa 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);

Halaman melalui data

Gunakan metode take() dan skip(). Misalnya, jika Anda ingin membagi tabel menjadi rekaman 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 rekaman yang akan dikembalikan jika tidak ada penomoran halaman yang digunakan.

Anda kemudian dapat menggunakan variabel halaman dan beberapa tombol UI untuk menyediakan daftar halaman; gunakan loadPage() untuk memuat rekaman baru untuk setiap halaman. Terapkan penembolokan untuk mempercepat akses ke rekaman 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 [Dokumentasi objek kueri].

Sisipkan data

Buat objek JavaScript dengan tanggal dan panggilan yang sesuai 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 disisipkan 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. Kami menyarankan agar Anda menonaktifkan skema dinamis sebelum memindahkan aplikasi Anda ke produksi.

Mengubah data

Mirip dengan metode .insert(), Anda harus membuat objek Pembaruan lalu memanggil .update(). Objek pembaruan harus berisi ID rekaman yang akan diperbarui - ID diperoleh saat membaca rekaman atau saat memanggil .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, panggil metode .del(). Berikan ID dalam referensi objek:

table
    .del({ id: '7163bc7a-70b2-4dde-98e9-8818969611bd' })
    .done(function () {
        // Record is now deleted - update your cache
    }, failure);

Mengautentikasi pengguna

Azure App Service mendukung autentikasi 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 terautentikasi untuk menerapkan aturan otorisasi dalam skrip server. Untuk informasi selengkapnya, lihat tutorial Mulai menggunakan autentikasi.

Saat menggunakan autentikasi di aplikasi Apache Cordova, plugin Cordova berikut harus tersedia:

cordova-plugin-device
cordova-plugin-inappbrowser

Nota

Perubahan keamanan terbaru di iOS dan Android dapat membuat autentikasi aliran server tidak tersedia. Dalam kasus ini, Anda harus menggunakan alur klien.

Dua alur autentikasi didukung: alur server dan alur klien. Alur server memberikan pengalaman autentikasi 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.

Mengautentikasi dengan penyedia (Alur Server)

Agar Mobile Apps mengelola proses autentikasi di aplikasi, Anda harus mendaftarkan aplikasi dengan idP 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'.

Nota

Karena masalah keamanan, beberapa penyedia autentikasi mungkin tidak berfungsi dengan aliran 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 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. Token ini dapat di-cache dan digunakan kembali hingga kedaluwarsa.

Mengautentikasi dengan penyedia (Alur Klien)

Aplikasi Anda juga dapat menghubungi penyedia identitas secara independen lalu memberikan token yang dikembalikan ke App Service Anda untuk autentikasi. Alur klien ini memungkinkan Anda memberikan pengalaman masuk tunggal bagi pengguna atau mengambil data pengguna tambahan dari penyedia identitas.

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 diperlukan oleh setiap 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 di client.currentUser.mobileServiceAuthenticationToken. Misalnya, untuk menggunakan API pengambilan:

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
    });

Pengambilan tersedia sebagai paket npm atau untuk unduhan browser dari CDNJS. Data diterima sebagai objek JSON.

Konfigurasikan Layanan Aplikasi Seluler Anda untuk URL pengalihan eksternal.

Beberapa jenis aplikasi Apache Cordova menggunakan kemampuan loopback untuk menangani alur UI OAuth. Alur UI OAuth di localhost menyebabkan masalah karena layanan autentikasi hanya tahu cara menggunakan layanan Anda secara default. Contoh alur UI OAuth yang bermasalah meliputi:

Emulator Ripple.
Muat Ulang Langsung dengan Ionic.
Menjalankan backend seluler secara lokal
Menjalankan backend seluler di Azure App Service yang berbeda dari yang menyediakan autentikasi.

Ikuti instruksi berikut untuk menambahkan pengaturan lokal Anda ke konfigurasi:

Masuk ke portal Microsoft Azure
Pilih Semua sumber daya atau App Services lalu klik nama Aplikasi Seluler Anda.
Klik Alat
Klik Resource Explorer di menu OBSERVE, lalu klik Go. Jendela atau tab baru terbuka.
Perluas konfigurasi , autentikasi simpul untuk situs Anda di navigasi sebelah kiri.
Klik Edit
Cari elemen "allowedExternalRedirectUrls". Ini mungkin diatur ke null atau array nilai. Ubah nilai menjadi 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), atau http://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 sudut kanan atas layar.
Klik tombol PUT hijau.

Pengaturan disimpan pada saat ini. Jangan tutup jendela browser hingga 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 Services lalu klik nama Aplikasi Seluler 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 diterapkan.

Bagikan melalui

Cara menggunakan plugin Apache Cordova untuk Azure Mobile Apps

Platform yang didukung

Penyiapan dan prasyarat

Menyiapkan aplikasi Ionic v2

Membuat koneksi klien

Bekerja dengan tabel

Mengkueri referensi tabel

Memfilter data di server

Halaman melalui data

Mengembalikan data yang diurutkan

Sisipkan data

Mengubah data

Menghapus data

Mengautentikasi pengguna

Mengautentikasi dengan penyedia (Alur Server)

Mengautentikasi dengan penyedia (Alur Klien)

Mendapatkan informasi tentang pengguna yang diautentikasi

Konfigurasikan Layanan Aplikasi Seluler Anda untuk URL pengalihan eksternal.

Sumber Daya Tambahan:

Bagikan melalui

Cara menggunakan plugin Apache Cordova untuk Azure Mobile Apps

Platform yang didukung

Penyiapan dan prasyarat

Menyiapkan aplikasi Ionic v2

Membuat koneksi klien

Bekerja dengan tabel

Mengkueri referensi tabel

Memfilter data di server

Halaman melalui data

Mengembalikan data yang diurutkan

Sisipkan data

Mengubah data

Menghapus data

Mengautentikasi pengguna

Mengautentikasi dengan penyedia (Alur Server)

Mengautentikasi dengan penyedia (Alur Klien)

Contoh dasar Autentikasi Sosial

Mendapatkan informasi tentang pengguna yang diautentikasi

Konfigurasikan Layanan Aplikasi Seluler Anda untuk URL pengalihan eksternal.

Sumber Daya Tambahan: