Cara Menggunakan pustaka klien JavaScript untuk Azure Mobile Apps
Gambaran Umum
Panduan ini mengajarkan Anda untuk melakukan skenario umum menggunakan JavaScript SDK terbaru untuk Azure Mobile Apps. Jika Anda baru menggunakan Azure Mobile Apps, pertama-tama selesaikan Mulai Cepat Azure Mobile Apps untuk membuat backend dan membuat tabel. Dalam panduan ini, kami berfokus pada penggunaan backend seluler di aplikasi Web HTML/JavaScript.
Platform yang didukung
Kami membatasi dukungan browser ke versi browser utama saat ini dan terakhir: Google Chrome, Microsoft Edge, Microsoft Internet Explorer, dan Mozilla Firefox. Kami mengharapkan SDK berfungsi dengan browser yang relatif modern.
Paket ini didistribusikan sebagai Modul JavaScript Universal, sehingga mendukung format global, AMD, dan CommonJS.
Penyiapan dan prasyarat
Panduan ini mengasumsikan bahwa Anda telah membuat backend dengan tabel. Panduan ini mengasumsikan bahwa tabel memiliki skema yang sama dengan tabel dalam tutorial tersebut.
Menginstal Azure Mobile Apps JavaScript SDK dapat dilakukan melalui npm perintah :
npm install azure-mobile-apps-client --save
Pustaka juga dapat digunakan sebagai modul ES2015, dalam lingkungan CommonJS seperti Browserify dan Webpack dan sebagai pustaka AMD. Contohnya:
// For ECMAScript 5.1 CommonJS
var WindowsAzure = require('azure-mobile-apps-client');
// For ES2015 modules
import * as WindowsAzure from 'azure-mobile-apps-client';
Anda juga dapat menggunakan versi SDK bawaan dengan mengunduh langsung dari CDN kami:
<script src="https://zumo.blob.core.windows.net/sdk/azure-mobile-apps-client.min.js"></script>
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 lanjut dengan tabel Anda:
Cara: 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 sintaks Kueri, lihat [Dokumentasi objek kueri].
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.
Cara: 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].
Cara: 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 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. Sebaiknya matikan skema dinamis sebelum memindahkan aplikasi ke produksi.
Cara: 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);
Cara: 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);
Cara: Mengautentikasi pengguna
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.
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 penyedia.
Cara: Mengautentikasi 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
Autentikasi Google saat ini tidak berfungsi melalui Alur Server. Untuk mengautentikasi dengan Google, Anda harus menggunakan metode alur klien.
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.
Cara: Mengautentikasi 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 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.
Cara: Mendapatkan informasi tentang pengguna yang diautentikasi
Informasi autentikasi dapat diambil dari /.auth/me titik akhir menggunakan panggilan HTTP dengan pustaka AJAX 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. Anda juga dapat menggunakan jQuery atau API AJAX lain untuk mengambil informasi. Data diterima sebagai objek JSON.
Cara: Mengonfigurasi App Service Seluler Anda untuk URL pengalihan eksternal.
Beberapa jenis aplikasi JavaScript menggunakan kemampuan loopback untuk menangani alur UI OAuth. Kemampuannya meliputi:
- Menjalankan layanan Anda secara lokal
- Menggunakan Live Reload dengan Ionic Framework
- Mengalihkan ke App Service untuk autentikasi.
Berjalan secara lokal dapat menyebabkan masalah karena, secara default, autentikasi App Service hanya dikonfigurasi untuk mengizinkan akses dari backend Aplikasi Seluler Anda. Gunakan langkah-langkah berikut untuk mengubah pengaturan App Service untuk mengaktifkan autentikasi saat menjalankan server secara lokal:
Masuk ke portal Microsoft Azure
Navigasikan ke backend Aplikasi Seluler Anda.
Pilih Penjelajah sumber daya di menu ALAT PENGEMBANGAN .
Klik Buka untuk membuka penjelajah sumber daya untuk backend Aplikasi Seluler Anda di tab atau jendela baru.
Perluas nodeauthsettingskonfigurasi> untuk aplikasi Anda.
Klik tombol Edit untuk mengaktifkan pengeditan sumber daya.
Temukan elemen allowedExternalRedirectUrls , yang seharusnya null. Tambahkan URL Anda dalam array:
"allowedExternalRedirectUrls": [ "https://localhost:3000", "https://localhost:3000" ],Ganti URL dalam array dengan URL layanan Anda, yang dalam contoh ini adalah
https://localhost:3000untuk layanan sampel Node.js lokal. Anda juga dapat menggunakanhttps://localhost:4400untuk layanan Ripple atau URL lainnya, tergantung pada bagaimana aplikasi Anda dikonfigurasi.Di bagian atas halaman, klik Baca/Tulis, lalu klik PUT untuk menyimpan pembaruan Anda.
Anda juga perlu menambahkan URL loopback yang sama ke pengaturan daftar izin CORS:
- Navigasi kembali ke portal Azure.
- Navigasikan ke backend Aplikasi Seluler Anda.
- Klik CORS di menu API .
- Masukkan setiap URL dalam kotak teks Asal yang Diizinkan kosong. Kotak teks baru dibuat.
- Klik SIMPAN
Setelah pembaruan backend, Anda akan dapat menggunakan URL loopback baru di aplikasi Anda.