De JavaScript-clientbibliotheek voor Azure Mobile Apps gebruiken

Artikel
06/25/2019

Overzicht

In deze handleiding leert u algemene scenario's uit te voeren met behulp van de nieuwste JavaScript SDK voor Azure Mobile Apps. Als u geen gebruik hebt gemaakt van Azure Mobile Apps, moet u eerst Aan de slag met Azure Mobile Apps voltooien om een back-end te maken en een tabel te maken. In deze handleiding richten we ons op het gebruik van de mobiele back-end in HTML-/JavaScript-webtoepassingen.

Ondersteunde platforms

We beperken browserondersteuning tot de huidige en laatste versie van de belangrijkste browsers: Google Chrome, Microsoft Edge, Microsoft Internet Explorer en Mozilla Firefox. We verwachten dat de SDK werkt met elke relatief moderne browser.

Het pakket wordt gedistribueerd als een Universele JavaScript-module, zodat het de indelingen globals, AMD en CommonJS ondersteunt.

Installatie en vereisten

In deze handleiding wordt ervan uitgegaan dat u een back-end met een tabel hebt gemaakt. In deze handleiding wordt ervan uitgegaan dat de tabel hetzelfde schema heeft als de tabellen in deze zelfstudies.

U kunt de JavaScript SDK van Azure Mobile Apps installeren via de npm opdracht :

npm install azure-mobile-apps-client --save

De bibliotheek kan ook worden gebruikt als een ES2015-module, in CommonJS-omgevingen zoals Browserify en Webpack en als een AMD-bibliotheek. Bijvoorbeeld:

// For ECMAScript 5.1 CommonJS
var WindowsAzure = require('azure-mobile-apps-client');
// For ES2015 modules
import * as WindowsAzure from 'azure-mobile-apps-client';

U kunt ook een vooraf gebouwde versie van de SDK gebruiken door rechtstreeks vanuit ons CDN te downloaden:

<script src="https://zumo.blob.core.windows.net/sdk/azure-mobile-apps-client.min.js"></script>

Een clientverbinding maken

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

var client = WindowsAzure.MobileServiceClient(appUrl);

Werken met tabellen

Maak een verwijzing naar de back-endtabel als u gegevens wilt bekijken of bijwerken. Vervang tableName door de naam van uw tabel

var table = client.getTable(tableName);

Wanneer u een tabelverwijzing hebt, kunt u verder werken aan uw tabel:

Een query uitvoeren op een tabel
Gegevens invoegen
Gegevens wijzigen
Gegevens verwijderen

Procedure: Een query uitvoeren op een tabelverwijzing

Als u een tabelverwijzing hebt, kunt u deze gebruiken om een query uit te voeren op gegevens op de server. Query's worden gemaakt in een LINQ-achtige taal. Gebruik de volgende code om alle gegevens uit de tabel op te halen:

/**
 * 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 functie voor geslaagde pogingen wordt aangeroepen met de resultaten. Gebruik for (var i in results) niet in de functie voor geslaagde pogingen, aangezien dit wordt herhaald voor informatie die is opgenomen in de resultaten wanneer andere queryfuncties (zoals .includeTotalCount()) worden gebruikt.

Zie de [Documentatie over queryobjecten] voor meer informatie over de querysyntaxis.

Gegevens filteren op de server

U kunt in de tabelverwijzing een where-clausule gebruiken:

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

U kunt ook een functie gebruiken die het object filtert. In dit geval wordt de this-variabele toegewezen aan het huidige object dat wordt gefilterd. De volgende code is functioneel equivalent 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 methode take() en skip(). Bijvoorbeeld als u de tabel wilt splitsen in records met 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 resultaatobject. Het veld totalCount wordt gevuld met het totale aantal records dat zou worden geretourneerd als er geen paginering zou zijn gebruikt.

U kunt vervolgens de paginavariabelen en sommige UI-knoppen gebruiken om een paginalijst op te geven; gebruik loadPage() om de nieuwe records voor elke pagina te laden. Implementeer caching voor snellere toegang tot de records die al zijn geladen.

Procedure: Gesorteerde gegevens retourneren

Gebruik de querymethode .orderBy() of .orderByDescending():

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

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

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

Wanneer het invoegen is geslaagd, wordt het ingevoegde item geretourneerd met de aanvullende velden die vereist zijn voor synchronisatiebewerkingen. Werk uw eigen cache bij met deze gegevens voor latere updates.

De Azure Mobile Apps Node.js Server SDK biedt ondersteuning voor dynamische schema's voor ontwikkelingsdoeleinden. Met een dynamisch schema kunt u kolommen toevoegen aan de tabel door deze op te geven in een Insert- of Update-bewerking. We raden u aan het dynamische schema uit te schakelen voordat u uw toepassing in productie neemt.

Procedure: Gegevens wijzigen

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

Procedure: Gegevens verwijderen

Roep de methode .del() aan als u een record wilt verwijderen. 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 ondersteunt het verifiëren en autoriseren van app-gebruikers met behulp van verschillende externe id-providers: Facebook, Google, Microsoft-account en Twitter. U kunt machtigingen voor tabellen instellen 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.

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

Procedure: Verifiëren bij een provider (Server Flow)

Als u het verificatieproces in uw app door Mobile Apps wilt laten beheren, moet u uw app registreren bij uw id-provider. Daarna moet u in uw Azure App Service de door uw provider verstrekte toepassings-id en geheim configureren. Zie de zelfstudie Verificatie toevoegen aan uw app voor meer informatie.

Wanneer u de id-provider hebt geregistreerd, roept u de methode .login() aan met de naam van uw provider. Gebruik bijvoorbeeld de volgende code om u aan te melden met Facebook:

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

Verificatie via Google werkt momenteel niet via Server Flow. Voor verificatie via Google moet u een client-flowmethode 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 na een geslaagde aanmelding met de id-provider. De aanmeldingsfunctie retourneert na voltooiing een JSON-object dat zowel de gebruikers-id als het App Service-verificatietoken respectievelijk in de velden userId en authenticationToken weergeeft. Dit token kan worden opgeslagen in de cache en opnieuw worden gebruikt totdat het verloopt.

Procedure: Verifiëren bij een provider (Client Flow)

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

In dit voorbeeld wordt de client-SDK van Facebook 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 is opgegeven door de betreffende SDK-provider, is opgeslagen in de tokenvariabele.

Procedure: Informatie verzamelen over de geverifieerde gebruiker

De verificatiegegevens kunnen worden opgehaald uit het /.auth/me-eindpunt met een HTTP aanroep aan een willekeurige AJAX-bibliotheek. Zorg ervoor dat u de X-ZUMO-AUTH-header in uw verificatietoken instelt. Het verificatietoken wordt opgeslagen in client.currentUser.mobileServiceAuthenticationToken. Als u bijvoorbeeld de API 'Ophalen' gebruikt:

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 npm-pakket, maar kan ook met een browser worden gedownload van CDNJS. U kunt ook jQuery of een andere AJAX-API gebruiken voor het ophalen van de informatie. Gegevens worden ontvangen als JSON-object.

Procedure: Uw mobiele App Service configureren voor externe omleidings-URL's.

Verschillende typen JavaScript-toepassingen maken gebruik van een loopback-mogelijkheid voor het verwerken van OAuth UI-stromen. Deze mogelijkheden omvatten:

Uw service lokaal uitvoeren
Live Opnieuw laden gebruiken met het Ionic Framework
Omleiden naar App Service voor verificatie.

Lokaal uitvoeren kan problemen veroorzaken omdat standaard App Service verificatie alleen is geconfigureerd om toegang toe te staan vanuit de back-end van uw mobiele app. Gebruik de volgende stappen om de App Service-instellingen te wijzigen om verificatie in te schakelen bij het lokaal uitvoeren van de server:

Meld u aan bij Azure Portal.
Navigeer naar de back-end van uw mobiele app.
Selecteer Resourceverkenner in het menu ONTWIKKELHULPPROGRAMMA's .
Klik op Ga om de resourceverkenner voor de back-end van uw mobiele app te openen in een nieuw tabblad of venster.
Vouw het knooppunt config>authsettings voor uw app uit.
Klik op de knop Bewerken om het bewerken van de resource in te schakelen.
Zoek het element allowedExternalRedirectUrls , dat null moet zijn. Voeg uw URL's toe aan een matrix:
```
  "allowedExternalRedirectUrls": [
      "https://localhost:3000",
      "https://localhost:3000"
  ],
```
Vervang de URL's in de matrix door de URL's van uw service. In dit voorbeeld is https://localhost:3000 dit voor de lokale Node.js voorbeeldservice. U kunt ook gebruiken https://localhost:4400 voor de Ripple-service of een andere URL, afhankelijk van hoe uw app is geconfigureerd.
Klik boven aan de pagina op Lezen/schrijven en klik vervolgens op PUT om uw updates op te slaan.

U moet ook dezelfde loopback-URL's toevoegen aan de instellingen van de CORS-acceptatielijst:

Ga terug naar de Azure Portal.
Navigeer naar de back-end van uw mobiele app.
Klik op CORS in het API-menu .
Voer elke URL in het lege tekstvak Toegestane oorsprongen in. Er wordt een nieuw tekstvak gemaakt.
Klik op OPSLAAN

Nadat de back-end is bijgewerkt, kunt u de nieuwe loopback-URL's in uw app gebruiken.