Jak používat klientskou knihovnu JavaScriptu pro Azure Mobile Apps
Přehled
V této příručce se naučíte provádět běžné scénáře s využitím nejnovější sady JavaScript SDK pro Azure Mobile Apps. Pokud s Azure Mobile Apps teprve začínáte, nejprve dokončete úvodní příručka Azure Mobile Apps , abyste vytvořili back-end a vytvořili tabulku. V této příručce se zaměříme na používání mobilního back-endu ve webových aplikacích HTML/JavaScript.
Podporované platformy
Podporu prohlížečů omezujeme na aktuální a poslední verze hlavních prohlížečů: Google Chrome, Microsoft Edge, Microsoft Internet Explorer a Mozilla Firefox. Očekáváme, že sada SDK bude fungovat s jakýmkoli relativně moderním prohlížečem.
Balíček se distribuuje jako modul Universal JavaScript, takže podporuje formáty globals, AMD a CommonJS.
Nastavení a požadavky
Tato příručka předpokládá, že jste vytvořili back-end s tabulkou. Tento průvodce předpokládá, že tabulka má stejné schéma jako tabulky v těchto kurzech.
Instalaci sady JavaScript SDK pro Azure Mobile Apps můžete provést pomocí npm příkazu:
npm install azure-mobile-apps-client --save
Knihovnu lze také použít jako modul ES2015 v prostředích CommonJS, jako je Browserify a Webpack, a jako knihovnu AMD. Příklad:
// For ECMAScript 5.1 CommonJS
var WindowsAzure = require('azure-mobile-apps-client');
// For ES2015 modules
import * as WindowsAzure from 'azure-mobile-apps-client';
Můžete také použít předem vytvořenou verzi sady SDK stažením přímo z naší sítě CDN:
<script src="https://zumo.blob.core.windows.net/sdk/azure-mobile-apps-client.min.js"></script>
Vytvoření připojení klienta
Vytvořte připojení klienta tak, že vytvoříte objekt WindowsAzure.MobileServiceClient. Nahraďte appUrl adresou URL vaší mobilní aplikace.
var client = WindowsAzure.MobileServiceClient(appUrl);
Práce s tabulkami
Pro přístup k datům a jejich aktualizaci vytvořte odkaz na back-endovou tabulku. Nahraďte tableName názvem vaší tabulky.
var table = client.getTable(tableName);
Jakmile budete mít odkaz na tabulku, můžete s ní dále pracovat:
Postup: Dotazování odkazu na tabulku
Jakmile budete mít odkaz na tabulku, můžete jej použít k dotazování na data na serveru. Dotazy se sestavují v jazyce podobném jazyku LINQ. Pokud chcete vrátit všechna data z tabulky, použijte následující kód:
/**
* 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);
S výsledky se zavolá funkce success. Nepoužívejte ve funkci success smyčku for (var i in results) – ta provádí iterace nad informacemi zahrnutými ve výsledcích při použití dalších funkcí dotazování (například .includeTotalCount()).
Další informace o syntaxi dotazu najdete v [Dokumentaci k objektu dotazu].
Filtrování dat na serveru
Můžete použít klauzuli where na odkaz na tabulku:
table
.where({ userId: user.userId, complete: false })
.read()
.then(success, failure);
Můžete také použít funkci, která filtruje objekt. V takovém případě se právě filtrovanému objektu přiřadí proměnná this. Následující kód je funkčně srovnatelný s předchozím příkladem:
function filterByUserId(currentUserId) {
return this.userId === currentUserId && this.complete === false;
}
table
.where(filterByUserId, user.userId)
.read()
.then(success, failure);
Stránkování dat
Použijte metody take() a skip(). Pokud například chcete rozdělit tabulku na záznamy po stovkách řádků:
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
}
}
}
Metoda .includeTotalCount() slouží k přidání pole totalCount do objektu výsledků. Pole totalCount obsahuje celkový počet záznamů, které by se vrátily, kdyby nebylo použité stránkování.
Následně můžete pomocí proměnné pages a několika tlačítek uživatelského rozhraní zobrazit seznam stránek. K načtení nových záznamů pro jednotlivé stránky použijte metodu loadPage(). Pro rychlý přístup k již načteným záznamům implementujte ukládání do mezipaměti.
Postup: Vrácení seřazených dat
Použijte metody dotazu .orderBy() nebo .orderByDescending():
table
.orderBy('name')
.read()
.then(success, failure);
Další informace o objektu dotazu najdete v [Dokumentaci k objektu dotazu].
Postup: Vkládání dat
Vytvořte objekt JavaScriptu s vhodným datem a asynchronně zavolejte metodu table.insert():
var newItem = {
name: 'My Name',
signupDate: new Date()
};
table
.insert(newItem)
.done(function (insertedItem) {
var id = insertedItem.id;
}, failure);
Po úspěšném vložení se vrátí vložená položka i s dalšími poli požadovanými pro operace synchronizace. Aktualizujte tyto informace ve vlastní mezipaměti pro pozdější aktualizace.
Sada Node.js Server SDK ve funkci Azure Mobile Apps podporuje dynamické schéma pro účely vývoje. Dynamické schéma umožňuje přidávat do tabulky sloupce tak, že je zadáte v operaci insert nebo update. Před nasazením aplikace do ostrého provozu doporučujeme dynamické schéma vypnout.
Postup: Úprava dat
Podobně jako u metody .insert() byste měli vytvořit objekt aktualizace a pak zavolat metodu .update(). Objekt aktualizace musí obsahovat ID záznamu, který se má aktualizovat – ID získáte při čtení záznamu nebo zavoláním metody .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);
Postup: Odstranění dat
Pokud chcete odstranit záznam, zavolejte metodu .del(). V odkazu na objekt předejte ID:
table
.del({ id: '7163bc7a-70b2-4dde-98e9-8818969611bd' })
.done(function () {
// Record is now deleted - update your cache
}, failure);
Postupy: Ověřování uživatelů
Azure App Service podporuje ověřování a autorizaci uživatelů aplikací pomocí různých externích zprostředkovatelů identity: Facebook, Google, účet Microsoft a Twitter. U tabulek můžete nastavit oprávnění, která omezí přístup pro konkrétní operace pouze na ověřené uživatele. Identitu ověřených uživatelů můžete také použít k implementaci autorizačních pravidel ve skriptech serveru. Další informace najdete v kurzu Začínáme s ověřováním .
Podporují se dva toky ověřování: serverový tok a tok klienta. Tok serveru poskytuje nejjednodušší prostředí pro ověřování, protože závisí na webovém ověřovacím rozhraní zprostředkovatele. Tok klienta umožňuje hlubší integraci s funkcemi specifickými pro zařízení, jako je jednotné přihlašování, protože spoléhá na sady SDK specifické pro konkrétního poskytovatele.
Postup: Ověřování pomocí zprostředkovatele (tok na straně serveru)
Pokud chcete, aby funkce Mobile Apps spravovala proces ověřování ve vaší aplikaci, je třeba aplikaci zaregistrovat u vašeho zprostředkovatele identity. Potom je nutné ve službě Azure App Service nakonfigurovat ID aplikace a tajný klíč, který vám poskytne zprostředkovatel. Další informace najdete v kurzu Přidání ověřování do aplikace.
Jakmile budete zaregistrováni u zprostředkovatele identity, zavolejte metodu .login() s názvem vašeho zprostředkovatele. Pokud se například chcete přihlásit pomocí Facebooku, použijte následující kód:
client.login("facebook").done(function (results) {
alert("You are now signed in as: " + results.userId);
}, function (err) {
alert("Error: " + err);
});
Platné hodnoty pro zprostředkovatele jsou „aad“, „facebook“, „google“, „microsoftaccount“ a „twitter“.
Poznámka
Ověřování Google přes tok na straně serveru aktuálně nefunguje. K ověřování Google je třeba použít metodu toku na straně klienta.
V tomto případě služba Azure App Service spravuje tok ověřování OAuth 2.0. Zobrazí přihlašovací stránku vybraného zprostředkovatele a po úspěšném přihlášení pomocí zprostředkovatele identity vygeneruje ověřovací token App Service. Funkce login po dokončení vrátí objekt JSON, který vystaví ID uživatele a ověřovací token služby App Service v polích userId a authenticationToken. Tento token se může uložit do mezipaměti a znovu požívat do vypršení platnosti.
Postup: Ověřování pomocí zprostředkovatele (tok na straně klienta)
Vaše aplikace také může nezávisle kontaktovat zprostředkovatele identity a následně poskytnout navrácený token službě App Service k ověření. Tento tok na straně klienta vám umožní poskytnout uživatelům jednotné přihlašování nebo od zprostředkovatele identity načíst další uživatelská data.
Základní příklad sociálního ověřování
Tento příklad používá k ověřování klientskou sadu SDK Facebooku:
client.login(
"facebook",
{"access_token": token})
.done(function (results) {
alert("You are now signed in as: " + results.userId);
}, function (err) {
alert("Error: " + err);
});
Tento příklad předpokládá, že token poskytnutý příslušnou sadou SDK zprostředkovatele je uložený v proměnné token.
Postup: Získání informací o ověřeném uživateli
Ověřovací informace můžete načíst z koncového bodu /.auth/me voláním HTTP pomocí libovolné knihovny AJAX. Ujistěte se, že jste hlavičku X-ZUMO-AUTH nastavili na váš ověřovací token. Ověřovací token je uložen v client.currentUser.mobileServiceAuthenticationToken. Například pokud chcete použít rozhraní Fetch API:
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 je k dispozici jako balíček npm nebo ke stažení přes prohlížeč na webu CDNJS. K načtení informací můžete použít také jQuery nebo jiné rozhraní AJAX API. Přijatá data jsou ve formátu objektu JSON.
Postupy: Konfigurace externích adres URL pro přesměrování v mobilním App Service.
Několik typů javascriptových aplikací používá funkci zpětné smyčky ke zpracování toků uživatelského rozhraní OAuth. Mezi tyto možnosti patří:
- Místní spuštění služby
- Použití funkce Live Reload s architekturou Ionic
- Přesměrování na App Service pro ověřování.
Místní spuštění může způsobit problémy, protože App Service ověřování je ve výchozím nastavení nakonfigurované jenom tak, aby umožňovalo přístup z back-endu mobilní aplikace. Pomocí následujícího postupu změňte nastavení App Service tak, aby se povolilo ověřování při místním spuštění serveru:
Přihlaste se k portálu Azure Portal.
Přejděte do back-endu mobilní aplikace.
V nabídce VÝVOJOVÉ NÁSTROJE vyberte Průzkumník prostředků.
Kliknutím na Přejít otevřete průzkumníka prostředků pro back-end mobilní aplikace na nové kartě nebo v novém okně.
Rozbalte uzel config>authsettings pro vaši aplikaci.
Kliknutím na tlačítko Upravit povolte úpravy prostředku.
Vyhledejte element allowedExternalRedirectUrls , který by měl mít hodnotu null. Přidejte adresy URL do pole:
"allowedExternalRedirectUrls": [ "https://localhost:3000", "https://localhost:3000" ],Nahraďte adresy URL v poli adresami URL vaší služby, což je
https://localhost:3000v tomto příkladu pro místní Node.js ukázkovou službu. V závislosti na konfiguraci aplikace můžete použíthttps://localhost:4400také pro službu Ripple nebo jinou adresu URL.V horní části stránky klikněte na Read/Write (Čtení/zápis) a potom kliknutím na PUT uložte aktualizace.
Musíte také přidat stejné adresy URL zpětné smyčky do nastavení seznamu povolených CORS:
- Přejděte zpět na Azure Portal.
- Přejděte do back-endu mobilní aplikace.
- V nabídce rozhraní API klikněte na CORS.
- Do prázdného textového pole Allowed Origins (Povolené původy ) zadejte každou adresu URL. Vytvoří se nové textové pole.
- Klikněte na ULOŽIT.
Po aktualizaci back-endu budete moct ve své aplikaci používat nové adresy URL zpětné smyčky.