De Apache Cordova-invoegtoepassing gebruiken voor Azure Mobile Apps

Artikel
12/19/2022

Notitie

Dit product is buiten gebruik gesteld. Zie de Community Toolkit Datasync-bibliotheekvoor een vervanging voor projecten met .NET 8 of hoger.

In deze handleiding leert u veelvoorkomende scenario's uit te voeren met behulp van de nieuwste Apache Cordova-invoegtoepassing voor Azure Mobile Apps. Als u nog niet klaar bent met Azure Mobile Apps, voltooit u eerst Azure Mobile Apps Quick Start om een back-end te maken, een tabel te maken en een vooraf gebouwd Apache Cordova-project te downloaden. In deze handleiding richten we ons op de Apache Cordova-invoegtoepassing aan de clientzijde.

Ondersteunde platforms

Deze SDK ondersteunt Apache Cordova v6.0.0 en hoger op iOS-, Android- en Windows-apparaten. De platformondersteuning is als volgt:

Android-API 19+.
iOS-versies 8.0 en hoger.

Waarschuwing

In dit artikel vindt u informatie over de versie van de v4.2.0-bibliotheek, die buiten gebruik is gesteld. Er worden geen verdere updates doorgevoerd in deze bibliotheek, inclusief updates voor beveiligingsproblemen. Overweeg om over te stappen op een .NET-client, zoals .NET MAUI voor continue ondersteuning.

Installatie en vereisten

In deze handleiding wordt ervan uitgegaan dat u een back-end hebt gemaakt met een tabel. Voorbeelden gebruiken de TodoItem tabel uit de quickstarts. Gebruik de volgende opdracht om de Azure Mobile Apps-invoegtoepassing toe te voegen aan uw project:

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

Zie de documentatie voor meer informatie over het maken van uw eerste Apache Cordova-app.

Een Ionic v2-app instellen

Als u een Ionic v2-project correct wilt configureren, maakt u eerst een basis-app en voegt u de Cordova-invoegtoepassing toe:

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

Voeg de volgende regels toe aan app.component.ts om het clientobject te maken:

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

U kunt nu het project bouwen en uitvoeren in de browser:

ionic platform add browser
ionic run browser

De Azure Mobile Apps Cordova-invoegtoepassing ondersteunt zowel Ionic v1- als v2-apps. Alleen de Ionic v2-apps vereisen de extra declaratie voor het WindowsAzure-object.

Een clientverbinding maken

Maak een clientverbinding door een WindowsAzure.MobileServiceClient-object te maken. Vervang appUrl door de URL naar uw mobiele app.

var client = WindowsAzure.MobileServiceClient(appUrl);

Werken met tabellen

Als u gegevens wilt openen of bijwerken, maakt u een verwijzing naar de back-endtabel. Vervang tableName door de naam van de tabel

var table = client.getTable(tableName);

Zodra u een tabelreferentie hebt, kunt u verder werken met uw tabel:

een tabel opvragen
gegevens invoegen
Gegevens wijzigen
Gegevens verwijderen

Een query uitvoeren op een tabelreferentie

Zodra u een tabelreferentie hebt, kunt u deze gebruiken om gegevens op de server op te vragen. Query's worden gemaakt in een 'LINQ-achtige' taal. Als u alle gegevens uit de tabel wilt retourneren, gebruikt u de volgende code:

/**
 * 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);

De succesfunctie wordt aangeroepen met de resultaten. Gebruik geen for (var i in results) in de functie geslaagd, omdat hiermee informatie wordt herhaald die is opgenomen in de resultaten wanneer andere queryfuncties (zoals .includeTotalCount()) worden gebruikt.

Zie de documentatie queryobjectdocumentatievoor meer informatie over de querysyntaxis.

Gegevens filteren op de server

U kunt een where-component gebruiken in de tabelreferentie:

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

U kunt ook een functie gebruiken waarmee het object wordt gefilterd. In dit geval wordt de this variabele toegewezen aan het huidige object dat wordt gefilterd. De volgende code is functioneel gelijk aan het vorige voorbeeld:

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

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

Paging door gegevens

Gebruik de take() en skip() methoden. Als u de tabel bijvoorbeeld wilt splitsen in records van 100 rijen:

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

De methode .includeTotalCount() wordt gebruikt om een totalCount-veld toe te voegen aan het resultatenobject. Het veld totalCount wordt gevuld met het totale aantal records dat wordt geretourneerd als er geen paging wordt gebruikt.

Vervolgens kunt u de paginavariabele en enkele UI-knoppen gebruiken om een paginalijst op te geven; gebruik loadPage() om de nieuwe records voor elke pagina te laden. Implementeer caching om de toegang tot records te versnellen die al zijn geladen.

Gesorteerde gegevens retourneren

Gebruik de .orderBy()- of .orderByDescending()-querymethoden:

table
    .orderBy('name')
    .read()
    .then(success, failure);

Zie de [documentatie voor queryobjecten] voor meer informatie over het queryobject.

Gegevens invoegen

Maak een JavaScript-object met de juiste datum en roep table.insert() asynchroon aan:

var newItem = {
    name: 'My Name',
    signupDate: new Date()
};

table
    .insert(newItem)
    .done(function (insertedItem) {
        var id = insertedItem.id;
    }, failure);

Bij een geslaagde invoeging wordt het ingevoegde item geretourneerd met extra velden die vereist zijn voor synchronisatiebewerkingen. Werk uw eigen cache bij met deze informatie voor latere updates.

De Azure Mobile Apps Node.js Server SDK ondersteunt dynamisch schema voor ontwikkelingsdoeleinden. Met dynamisch schema kunt u kolommen toevoegen aan de tabel door deze op te geven in een invoeg- of bijwerkbewerking. U wordt aangeraden het dynamische schema uit te schakelen voordat u uw toepassing naar productie verplaatst.

Gegevens wijzigen

Net als bij de methode .insert() moet u een Update-object maken en vervolgens .update()aanroepen. Het updateobject moet de id van de record bevatten die moet worden bijgewerkt: de id wordt verkregen bij het lezen van de record of bij het aanroepen van .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);

Gegevens verwijderen

Als u een record wilt verwijderen, roept u de methode .del() aan. Geef de id door in een objectverwijzing:

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

Gebruikers verifiëren

Azure App Service biedt ondersteuning voor het verifiëren en autoriseren van app-gebruikers met behulp van verschillende externe id-providers: Facebook, Google, Microsoft-account en Twitter. U kunt machtigingen instellen voor tabellen om de toegang voor specifieke bewerkingen te beperken tot alleen geverifieerde gebruikers. U kunt ook de identiteit van geverifieerde gebruikers gebruiken om autorisatieregels in serverscripts te implementeren. Zie de zelfstudie Aan de slag met verificatie voor meer informatie.

Wanneer u verificatie gebruikt in een Apache Cordova-app, moeten de volgende Cordova-invoegtoepassingen beschikbaar zijn:

Notitie

Recente beveiligingswijzigingen in iOS en Android kunnen ervoor zorgen dat de serverstroomverificatie niet beschikbaar is. In deze gevallen moet u een clientstroom gebruiken.

Er worden twee verificatiestromen ondersteund: een serverstroom en een clientstroom. De serverstroom biedt de eenvoudigste verificatie-ervaring, omdat deze afhankelijk is van de webverificatieinterface van de provider. De clientstroom biedt een diepere integratie met apparaatspecifieke mogelijkheden, zoals eenmalige aanmelding, omdat deze afhankelijk is van providerspecifieke apparaatspecifieke SDK's.

Verifiëren met een provider (serverstroom)

Als u wilt dat Mobile Apps het verificatieproces in uw app beheert, moet u uw app registreren bij uw id-provider. Vervolgens moet u in uw Azure App Service de toepassings-id en het geheim van uw provider configureren. Zie de zelfstudie Verificatie toevoegen aan uw appvoor meer informatie.

Zodra u uw id-provider hebt geregistreerd, roept u de .login() methode aan met de naam van uw provider. Als u zich bijvoorbeeld wilt aanmelden met Facebook, gebruikt u de volgende code:

client.login("facebook").done(function (results) {
     alert("You are now signed in as: " + results.userId);
}, function (err) {
     alert("Error: " + err);
});

De geldige waarden voor de provider zijn 'aad', 'facebook', 'google', 'microsoftaccount' en 'twitter'.

Notitie

Vanwege beveiligingsproblemen werken sommige verificatieproviders mogelijk niet met een serverstroom. In deze gevallen moet u een clientstroommethode gebruiken.

In dit geval beheert Azure App Service de OAuth 2.0-verificatiestroom. De aanmeldingspagina van de geselecteerde provider wordt weergegeven en er wordt een App Service-verificatietoken gegenereerd nadat de aanmelding is geslaagd bij de id-provider. De aanmeldingsfunctie retourneert een JSON-object dat zowel de gebruikers-id als het App Service-verificatietoken beschikbaar maakt in respectievelijk de velden userId en authenticationToken. Dit token kan in de cache worden opgeslagen en opnieuw worden gebruikt totdat het verloopt.

Verifiëren met een provider (Client Flow)

Uw app kan ook onafhankelijk contact opnemen met de id-provider en vervolgens het geretourneerde token aan uw App Service opgeven voor verificatie. Met deze clientstroom kunt u eenmalige aanmelding bieden voor gebruikers of extra gebruikersgegevens ophalen van de id-provider.

In dit voorbeeld wordt de Facebook-client-SDK gebruikt voor verificatie:

client.login("facebook", {"access_token": token})
.done(function (results) {
     alert("You are now signed in as: " + results.userId);
}, function (err) {
     alert("Error: " + err);
});

In dit voorbeeld wordt ervan uitgegaan dat het token dat wordt geleverd door de respectieve provider-SDK is opgeslagen in de tokenvariabele. De gegevens die voor elke provider zijn vereist, verschillen enigszins. Raadpleeg de documentatie voor Verificatie en autorisatie van Azure App Service om de exacte vorm van de nettolading te bepalen.

Informatie verkrijgen over de geverifieerde gebruiker

De verificatiegegevens kunnen worden opgehaald uit het /.auth/me-eindpunt met behulp van een HTTP-aanroep met elke HTTP/REST-bibliotheek. Zorg ervoor dat u de X-ZUMO-AUTH header instelt op uw verificatietoken. Het verificatietoken wordt opgeslagen in client.currentUser.mobileServiceAuthenticationToken. Als u bijvoorbeeld de fetch-API wilt gebruiken:

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

Ophalen is beschikbaar als een npm-pakket of voor browserdownload van CDNJS-. Gegevens worden ontvangen als een JSON-object.

Configureer uw Mobile App Service voor externe omleidings-URL's.

Verschillende typen Apache Cordova-toepassingen maken gebruik van een loopback-mogelijkheid om OAuth UI-stromen te verwerken. OAuth UI-stromen op localhost veroorzaken problemen omdat de verificatieservice alleen weet hoe uw service standaard moet worden gebruikt. Voorbeelden van problematische OAuth UI-stromen zijn:

De Rimpelemulator.
Live Reload met Ionic.
De mobiele back-end lokaal uitvoeren
Het uitvoeren van de mobiele back-end in een andere Azure App Service dan de back-end die verificatie biedt.

Volg deze instructies om uw lokale instellingen toe te voegen aan de configuratie:

Meld u aan bij de Azure Portal-
Selecteer Alle resources of App Services klik vervolgens op de naam van uw mobiele app.
Klik op Extra
Klik op resourceverkenner in het menu OBSERVE en klik vervolgens op Ga. Er wordt een nieuw venster of tabblad geopend.
Vouw de -configuratieuit, authsettings knooppunten voor uw site in de linkernavigatiebalk.
Klik op bewerken
Zoek het element allowedExternalRedirectUrls. Deze kan worden ingesteld op null of een matrix met waarden. Wijzig de waarde in de volgende waarde:
```
"allowedExternalRedirectUrls": [
    "http://localhost:3000",
    "https://localhost:3000"
],
```
Vervang de URL's door de URL's van uw service. Voorbeelden zijn http://localhost:3000 (voor de Node.js voorbeeldservice) of http://localhost:4400 (voor de Rimpelservice). Deze URL's zijn echter voorbeelden: uw situatie, waaronder voor de services die in de voorbeelden worden genoemd, kunnen afwijken.
Klik op de knop lezen/schrijven in de rechterbovenhoek van het scherm.
Klik op de groene knop PUT.

De instellingen worden op dit moment opgeslagen. Sluit het browservenster pas nadat de instellingen zijn opgeslagen. Voeg deze loopback-URL's ook toe aan de CORS-instellingen voor uw App Service:

Meld u aan bij de Azure Portal-
Selecteer Alle resources of App Services klik vervolgens op de naam van uw mobiele app.
De blade Instellingen wordt automatisch geopend. Als dit niet het probleem is, klikt u op Alle instellingen.
Klik op CORS- onder het API-menu.
Voer de URL in die u wilt toevoegen in het vak en druk op Enter.
Voer indien nodig meer URL's in.
Klik op opslaan om de instellingen op te slaan.

Het duurt ongeveer 10-15 seconden voordat de nieuwe instellingen van kracht worden.

Delen via

De Apache Cordova-invoegtoepassing gebruiken voor Azure Mobile Apps

Ondersteunde platforms

Installatie en vereisten

Een Ionic v2-app instellen

Een clientverbinding maken

Werken met tabellen

Een query uitvoeren op een tabelreferentie

Gegevens filteren op de server

Paging door gegevens

Gesorteerde gegevens retourneren

Gegevens invoegen

Gegevens wijzigen

Gegevens verwijderen

Gebruikers verifiëren

Verifiëren met een provider (serverstroom)

Verifiëren met een provider (Client Flow)

Informatie verkrijgen over de geverifieerde gebruiker

Configureer uw Mobile App Service voor externe omleidings-URL's.

Aanvullende resources

Delen via

De Apache Cordova-invoegtoepassing gebruiken voor Azure Mobile Apps

Ondersteunde platforms

Installatie en vereisten

Een Ionic v2-app instellen

Een clientverbinding maken

Werken met tabellen

Een query uitvoeren op een tabelreferentie

Gegevens filteren op de server

Paging door gegevens

Gesorteerde gegevens retourneren

Gegevens invoegen

Gegevens wijzigen

Gegevens verwijderen

Gebruikers verifiëren

Verifiëren met een provider (serverstroom)

Verifiëren met een provider (Client Flow)

Basisvoorbeeld voor sociale verificatie

Informatie verkrijgen over de geverifieerde gebruiker

Configureer uw Mobile App Service voor externe omleidings-URL's.

Aanvullende resources