Jak používat modul plug-in Apache Cordova pro Azure Mobile Apps

Článek
12/19/2022

Poznámka

Tento produkt je vyřazený. Náhradu za projekty používající .NET 8 nebo novější najdete v knihovně Community Toolkit Datasync.

V této příručce se naučíte provádět běžné scénáře s využitím nejnovějšího modulu plug-in Apache Cordova pro Azure Mobile Apps. Pokud s Azure Mobile Apps teprve začínáte, nejprve dokončete rychlý start Azure Mobile Apps vytvoření back-endu, vytvoření tabulky a stažení předem vytvořeného projektu Apache Cordova. V této příručce se zaměříme na modul plug-in Apache Cordova na straně klienta.

Podporované platformy

Tato sada SDK podporuje Apache Cordova verze 6.0.0 a novější na zařízeních s iOSem, Androidem a Windows. Podpora platformy je následující:

Android API 19+.
iOS verze 8.0 a novější

Varování

Tento článek popisuje informace o verzi knihovny v4.2.0, která je vyřazena. V této knihovně nebudou provedeny žádné další aktualizace, včetně aktualizací problémů se zabezpečením. Zvažte přechod na klienta .NET, jako je .NET MAUI pro pokračování podpory.

Nastavení a požadavky

Tato příručka předpokládá, že jste vytvořili back-end s tabulkou. Příklady používají tabulku TodoItem z rychlých startů. Pokud chcete do projektu přidat modul plug-in Azure Mobile Apps, použijte následující příkaz:

cordova plugin add cordova-plugin-ms-azure-mobile-apps

Další informace o vytváření vaší prvníaplikace Apache Cordova najdete v dokumentaci.

Nastavení aplikace Ionic v2

Pokud chcete správně nakonfigurovat projekt Ionic v2, nejprve vytvořte základní aplikaci a přidejte modul plug-in Cordova:

ionic start projectName --v2
cd projectName
ionic plugin add cordova-plugin-ms-azure-mobile-apps

Přidejte následující řádky pro app.component.ts pro vytvoření objektu klienta:

declare var WindowsAzure: any;
var client = new WindowsAzure.MobileServiceClient("https://yoursite.azurewebsites.net");

Teď můžete sestavit a spustit projekt v prohlížeči:

ionic platform add browser
ionic run browser

Modul plug-in Cordova pro Azure Mobile Apps podporuje aplikace Ionic v1 i v2. Pouze aplikace Ionic v2 vyžadují dodatečnou deklaraci pro objekt WindowsAzure.

Vytvoření připojení klienta

Vytvořte připojení klienta vytvořením WindowsAzure.MobileServiceClient objektu. Nahraďte appUrl adresou URL mobilní aplikace.

var client = WindowsAzure.MobileServiceClient(appUrl);

Práce s tabulkami

Pokud chcete získat přístup k datům nebo je aktualizovat, vytvořte odkaz na back-endovou tabulku. Nahraďte tableName názvem tabulky.

var table = client.getTable(tableName);

Jakmile budete mít odkaz na tabulku, můžete s tabulkou dále pracovat:

dotazování na tabulku
vkládání datových
úpravy datových
odstranění dat

Dotazování na odkaz na tabulku

Jakmile budete mít odkaz na tabulku, můžete ji použít k dotazování na data na serveru. Dotazy se provádějí v jazyce podobném 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);

Funkce úspěchu se volá s výsledky. Nepoužívejte for (var i in results) ve funkci úspěchu, protože při použití jiných funkcí dotazu (například .includeTotalCount()) iterujte informace, které jsou součástí výsledků.

Další informace o syntaxi dotazu naleznete v dokumentaci k objektu Query.

Filtrování dat na serveru

V odkazu na tabulku můžete použít klauzuli where:

table
    .where({ userId: user.userId, complete: false })
    .read()
    .then(success, failure);

Můžete také použít funkci, která objekt filtruje. V tomto případě je proměnná this přiřazena k aktuálnímu objektu, který se filtruje. Následující kód je funkčně ekvivalentní předchozímu příkladu:

function filterByUserId(currentUserId) {
    return this.userId === currentUserId && this.complete === false;
}

table
    .where(filterByUserId, user.userId)
    .read()
    .then(success, failure);

Stránkování dat

Využijte metody take() a skip(). Pokud například chcete tabulku rozdělit na 100 řádků záznamů:

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 je vyplněno celkovým počtem záznamů, které by se vrátily, pokud se nepoužívá stránkování.

Pak můžete použít proměnnou stránek a několik tlačítek uživatelského rozhraní k zadání seznamu stránek; k načtení nových záznamů pro každou stránku použijte loadPage(). Implementujte ukládání do mezipaměti pro urychlení přístupu k záznamům, které už byly načteny.

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

Vložení dat

Vytvořte javascriptový objekt s odpovídajícím datem a asynchronním voláním 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 vložená položka vrátí s dalšími poli, která jsou nutná pro operace synchronizace. Aktualizujte si vlastní mezipaměť s použitím těchto informací pro pozdější aktualizace.

Sada Azure Mobile Apps Node.js Server SDK podporuje dynamické schéma pro účely vývoje. Dynamické schéma umožňuje přidat do tabulky sloupce zadáním v operaci vložení nebo aktualizace. Před přesunutím aplikace do produkčního prostředí doporučujeme dynamické schéma vypnout.

Úprava dat

Podobně jako .insert() metoda byste měli vytvořit objekt Update a potom volat .update(). Aktualizační objekt musí obsahovat ID záznamu, který se má aktualizovat – ID se získá při čtení záznamu nebo při volání .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);

Odstranění dat

Pokud chcete odstranit záznam, zavolejte metodu .del(). Předejte ID v odkazu na objekt:

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

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í k omezení přístupu pro konkrétní operace pouze ověřeným uživatelům. Identitu ověřených uživatelů můžete použít také k implementaci autorizačních pravidel ve skriptech serveru. Další informace najdete v kurzu Začínáme s ověřováním.

Při použití ověřování v aplikaci Apache Cordova musí být k dispozici následující moduly plug-in Cordova:

cordova-plugin-device
cordova-plugin-inappbrowser

Poznámka

Nedávné změny zabezpečení v iOSu a Androidu můžou způsobit nedostupnost ověřování toku serveru. V těchto případech musíte použít tok klienta.

Podporují se dva toky ověřování: tok serveru a tok klienta. Tok serveru poskytuje nejjednodušší možnosti ověřování, protože závisí na webovém ověřovacím rozhraní poskytovatele. 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.

Ověřování pomocí zprostředkovatele (Tok serveru)

Pokud chcete, aby Mobile Apps spravovaly proces ověřování ve vaší aplikaci, musíte aplikaci zaregistrovat u svého zprostředkovatele identity. Pak ve službě Azure App Service musíte nakonfigurovat ID aplikace a tajný klíč poskytnutý vaším poskytovatelem. Další informace najdete v kurzu Přidání ověřování do aplikace.

Jakmile zaregistrujete svého 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

Kvůli obavám z hlediska zabezpečení nemusí někteří poskytovatelé ověřování pracovat s tokem serveru. V těchto případech musíte použít metodu toku klienta.

V tomto případě 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 služby App Service. Po dokončení vrátí funkce přihlášení objekt JSON, který v polích userId a authenticationToken zpřístupňuje id uživatele i ověřovací token služby App Service. Tento token je možné uložit do mezipaměti a znovu ho použít, dokud nevyprší jeho platnost.

Ověřování pomocí zprostředkovatele (tok klienta)

Vaše aplikace může také nezávisle kontaktovat zprostředkovatele identity a pak poskytnout vrácený token službě App Service k ověření. Tento tok klienta umožňuje poskytovat uživatelům jednotné přihlašování nebo načítat další uživatelská data z poskytovatele identity.

V tomto příkladu se k ověřování používá klientská sada 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é tokenu. Podrobnosti vyžadované jednotlivými poskytovateli se mírně liší. Pokud chcete určit přesnou formu datové části, projděte si dokumentaci k ověřování a autorizaci služby Azure App Service.

Získání informací o ověřeném uživateli

Ověřovací informace je možné načíst z koncového bodu /.auth/me pomocí volání HTTP s libovolnou knihovnou HTTP/REST. Ujistěte se, že jste nastavili hlavičku X-ZUMO-AUTH na ověřovací token. Ověřovací token je uložen v client.currentUser.mobileServiceAuthenticationToken. Pokud například chcete použít rozhraní API pro načtení:

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í v prohlížeči z CDNJS. Data se přijímají jako objekt JSON.

Nakonfigurujte službu Mobile App Service pro adresy URL externího přesměrování.

Několik typů aplikací Apache Cordova používá funkci zpětné smyčky pro zpracování toků uživatelského rozhraní OAuth. Toky uživatelského rozhraní OAuth na místním hostiteli způsobují problémy, protože ověřovací služba ve výchozím nastavení ví, jak službu využívat. Mezi problematické toky uživatelského rozhraní OAuth patří:

Emulátor Ripple.
Live Reload with Ionic.
Místní spuštění mobilního back-endu
Spuštění mobilního back-endu v jiné službě Azure App Service než ten, který poskytuje ověřování.

Podle těchto pokynů přidejte do konfigurace místní nastavení:

Přihlaste se k portálu Azure Portal.
Vyberte Všechny prostředky nebo App Services potom klikněte na název mobilní aplikace.
Klikněte na nástroje
V nabídce POZOR klikněte na Průzkumníka prostředků a potom klikněte na Přejít. Otevře se nové okno nebo karta.
Rozbalte konfigurační, uzly pro váš web v levém navigačním panelu.
Klikněte na Upravit
Vyhledejte element allowedExternalRedirectUrls. Může být nastavena na hodnotu null nebo pole hodnot. Změňte hodnotu na následující hodnotu:
```
"allowedExternalRedirectUrls": [
    "http://localhost:3000",
    "https://localhost:3000"
],
```
Nahraďte adresy URL adresami URL vaší služby. Mezi příklady patří http://localhost:3000 (pro ukázkovou službu Node.js) nebo http://localhost:4400 (pro službu Ripple). Tyto adresy URL jsou však příklady – vaše situace, včetně služeb uvedených v příkladech, se může lišit.
Klikněte na tlačítko čtení a zápisu v pravém horním rohu obrazovky.
Klikněte na zelené tlačítko PUT.

Nastavení se v tomto okamžiku uloží. Nezavírejte okno prohlížeče, dokud nastavení nedokončí uložení. Přidejte také tyto adresy URL zpětné smyčky do nastavení CORS pro vaši službu App Service:

Přihlaste se k portálu Azure Portal.
Vyberte Všechny prostředky nebo App Services potom klikněte na název mobilní aplikace.
Otevře se automaticky okno Nastavení. Pokud ne, klikněte na Všechna nastavení.
V nabídce rozhraní API klikněte na CORS.
Zadejte adresu URL, kterou chcete přidat do zadaného pole, a stiskněte Enter.
Podle potřeby zadejte další adresy URL.
Kliknutím na Uložit nastavení uložte.

Než se nová nastavení projeví, trvá přibližně 10 až 15 sekund.

Sdílet prostřednictvím

Jak používat modul plug-in Apache Cordova pro Azure Mobile Apps

Podporované platformy

Nastavení a požadavky

Nastavení aplikace Ionic v2

Vytvoření připojení klienta

Práce s tabulkami

Dotazování na odkaz na tabulku

Filtrování dat na serveru

Stránkování dat

Vrácení seřazených dat

Vložení dat

Úprava dat

Odstranění dat

Ověřování uživatelů

Ověřování pomocí zprostředkovatele (Tok serveru)

Ověřování pomocí zprostředkovatele (tok klienta)

Získání informací o ověřeném uživateli

Nakonfigurujte službu Mobile App Service pro adresy URL externího přesměrování.

Další materiály

Sdílet prostřednictvím

Jak používat modul plug-in Apache Cordova pro Azure Mobile Apps

Podporované platformy

Nastavení a požadavky

Nastavení aplikace Ionic v2

Vytvoření připojení klienta

Práce s tabulkami

Dotazování na odkaz na tabulku

Filtrování dat na serveru

Stránkování dat

Vrácení seřazených dat

Vložení dat

Úprava dat

Odstranění dat

Ověřování uživatelů

Ověřování pomocí zprostředkovatele (Tok serveru)

Ověřování pomocí zprostředkovatele (tok klienta)

Základní příklad sociálního ověřování

Získání informací o ověřeném uživateli

Nakonfigurujte službu Mobile App Service pro adresy URL externího přesměrování.

Další materiály