Apache Cordova-clientbibliotheek gebruiken voor Azure Mobile Apps

Artikel
2019-06-25

Overzicht

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-24 (KitKat via Nougat).
iOS-versies 8.0 en hoger.
Windows Phone 8.1.
Universal Windows Platform (Universeel Windows-platform).

Installatie en vereisten

In deze handleiding wordt ervan uitgegaan dat u een back-end hebt gemaakt met een tabel. In deze handleiding wordt ervan uitgegaan dat de tabel hetzelfde schema heeft als de tabellen in deze zelfstudies. In deze handleiding wordt ook ervan uitgegaan dat u de Apache Cordova-invoegtoepassing aan uw code hebt toegevoegd. Als u dit nog niet hebt gedaan, kunt u de Apache Cordova-invoegtoepassing toevoegen aan uw project op de opdrachtregel:

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

Hoe voer je een query uit 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 voor queryobjecten] voor 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);

Door gegevens bladeren

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.

Procedure: 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.

Hoe te: 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 de 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.

Hoe: 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);

Hoe: 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);

Procedure: 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:

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.

Procedure: 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

Google-verificatie werkt momenteel niet via Server Flow. Als u zich wilt authentiseren met Google, moet u een client-flowmethodegebruiken.

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.

Procedure: Authenticeren met een provider (clientflow)

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.

Procedure: informatie verkrijgen over de geverifieerde gebruiker

De verificatiegegevens kunnen worden opgehaald uit het /.auth/me-eindpunt met behulp van een HTTP-aanroep met elke AJAX-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-. U kunt ook jQuery of een andere AJAX-API gebruiken om de informatie op te halen. Gegevens worden ontvangen als een JSON-object.

Procedure: 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 Ripple-emulator.
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 service die verificatie biedt.

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

Meld u aan bij 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 configuratie, authsettings knooppunten uit voor uw site in de linkernavigatie.
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": [
      "https://localhost:3000",
      "https://localhost:3000"
  ],
```
Vervang de URL's door de URL's van uw service. Voorbeelden zijn https://localhost:3000 (voor de Node.js voorbeeldservice) of https://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 Azure Portal.
Selecteer Alle resources of App Services klik vervolgens op de naam van uw mobiele app.
Het instellingenpaneel wordt automatisch geopend. Als dit niet werkt, 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 extra 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.

Procedure: Registreren voor pushmeldingen

Installeer de phonegap-plugin-push- om pushmeldingen te verwerken. Deze invoegtoepassing kan eenvoudig worden toegevoegd met behulp van de opdracht cordova plugin add op de opdrachtregel of via het installatieprogramma van de Git-invoegtoepassing in Visual Studio. De volgende code in uw Apache Cordova-app registreert uw apparaat voor pushmeldingen:

var pushOptions = {
    android: {
        senderId: '<from-gcm-console>'
    },
    ios: {
        alert: true,
        badge: true,
        sound: true
    },
    windows: {
    }
};
pushHandler = PushNotification.init(pushOptions);

pushHandler.on('registration', function (data) {
    registrationId = data.registrationId;
    // For cross-platform, you can use the device plugin to determine the device
    // Best is to use device.platform
    var name = 'gcm'; // For android - default
    if (device.platform.toLowerCase() === 'ios')
        name = 'apns';
    if (device.platform.toLowerCase().substring(0, 3) === 'win')
        name = 'wns';
    client.push.register(name, registrationId);
});

pushHandler.on('notification', function (data) {
    // data is an object and is whatever is sent by the PNS - check the format
    // for your particular PNS
});

pushHandler.on('error', function (error) {
    // Handle errors
});

Gebruik de Notification Hubs SDK om pushmeldingen van de server te verzenden. Verzend nooit rechtstreeks pushmeldingen van clients. Dit kan worden gebruikt om een Denial of Service-aanval te activeren tegen Notification Hubs of de PNS. De PNS kan uw verkeer verbieden als gevolg van dergelijke aanvallen.

Meer informatie

Gedetailleerde API-details vindt u in onze API-documentatie.

Delen via