Använda JavaScript-klientbiblioteket för Azure Mobile Apps

2019-06-25

Översikt

Den här guiden lär dig att utföra vanliga scenarier med hjälp av den senaste JavaScript SDK för Azure Mobile Apps. Om du inte har använt Azure Mobile Apps tidigare kan du först slutföra Snabbstart för Azure Mobile Apps för att skapa en serverdel och skapa en tabell. I den här guiden fokuserar vi på att använda den mobila serverdelen i HTML/JavaScript-webbprogram.

Plattformar som stöds

Vi begränsar webbläsarstöd till de aktuella och sista versionerna av de större webbläsarna: Google Chrome, Microsoft Edge, Microsoft Internet Explorer och Mozilla Firefox. Vi förväntar oss att SDK:et fungerar med en relativt modern webbläsare.

Paketet distribueras som en Universell JavaScript-modul, så det stöder global-, AMD- och CommonJS-format.

Installation och krav

Den här guiden förutsätter att du har skapat en serverdel med en tabell. Den här guiden förutsätter att tabellen har samma schema som tabellerna i dessa självstudier.

Du kan installera JavaScript SDK för Azure Mobile Apps via npm kommandot :

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

Biblioteket kan också användas som en ES2015-modul i CommonJS-miljöer som Browserify och Webpack och som ett AMD-bibliotek. Till exempel:

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

Du kan också använda en fördefinierad version av SDK:n genom att ladda ned direkt från vårt CDN:

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

Skapa en klientanslutning

Skapa en klientanslutning genom att skapa ett WindowsAzure.MobileServiceClient objekt. Ersätt appUrl med URL:en till mobilappen.

var client = WindowsAzure.MobileServiceClient(appUrl);

Arbeta med tabeller

Om du vill komma åt eller uppdatera data skapar du en referens till serverdelstabellen. Ersätt tableName med namnet på tabellen

var table = client.getTable(tableName);

När du har en tabellreferens kan du arbeta vidare med tabellen:

fråga en tabell
infoga data
Ändra data
ta bort data

Anvisningar: Fråga en tabellreferens

När du har en tabellreferens kan du använda den för att fråga efter data på servern. Frågor görs på ett "LINQ-liknande" språk. Om du vill returnera alla data från tabellen använder du följande kod:

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

Funktion för framgång anropas med resultaten. Använd inte for (var i in results) i success-funktionen eftersom det itererar över information som ingår i resultatet när andra frågefunktioner (till exempel .includeTotalCount()) används.

Mer information om frågesyntaxen finns i [Dokumentation om frågeobjekt].

Filtrera data på servern

Du kan använda en where-sats i tabellreferensen:

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

Du kan också använda en funktion som filtrerar objektet. I det här fallet tilldelas variabeln this till det aktuella objekt som filtreras. Följande kod är funktionellt likvärdig med föregående exempel:

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

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

Bläddra genom data

Använd metoderna take() och skip(). Om du till exempel vill dela upp tabellen i poster på 100 rader:

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

Metoden .includeTotalCount() används för att lägga till ett totalCount-fält i resultatobjektet. Fältet totalCount fylls med det totala antalet poster som skulle ha returnerats om ingen paginering används.

Du kan sedan använda sidvariabeln och vissa användargränssnittsknappar för att tillhandahålla en sidlista. använd loadPage() för att läsa in de nya posterna för varje sida. Implementera cachelagring för att påskynda åtkomsten till poster som redan har lästs in.

Anvisningar: Returnera sorterade data

Använd frågemetoderna .orderBy() eller .orderByDescending():

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

Mer information om frågeobjektet finns i [Dokumentation om frågeobjekt].

Anvisningar: Infoga data

Skapa ett JavaScript-objekt med rätt datum och anropa table.insert() asynkront:

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

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

Vid lyckad infogning returneras det infogade objektet med de ytterligare fält som krävs för synkroniseringsåtgärder. Uppdatera din egen cache med den här informationen för senare uppdateringar.

Azure Mobile Apps Node.js Server SDK stöder dynamiskt schema i utvecklingssyfte. Med dynamiskt schema kan du lägga till kolumner i tabellen genom att ange dem i en infognings- eller uppdateringsåtgärd. Vi rekommenderar att du inaktiverar dynamiskt schema innan du flyttar programmet till produktion.

Så här ändrar du data

Precis som med metoden .insert() bör du skapa ett Update-objekt och sedan anropa .update(). Uppdateringsobjektet måste innehålla ID:t för posten som ska uppdateras – ID:t hämtas när posten läses eller när .insert()anropas.

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

Gör så här: Ta bort data

Om du vill ta bort en post anropar du metoden .del(). Skicka ID:t i en objektreferens:

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

Anvisningar: Autentisera användare

Azure App Service stöder autentisering och auktorisering av appanvändare med hjälp av olika externa identitetsprovidrar: Facebook, Google, Microsoft-konto och Twitter. Du kan ange behörigheter för tabeller för att begränsa åtkomsten för specifika åtgärder till endast autentiserade användare. Du kan också använda identiteten för autentiserade användare för att implementera auktoriseringsregler i serverskript. Mer information finns i självstudiekursen Komma igång med autentisering.

Två autentiseringsflöden stöds: ett serverflöde och ett klientflöde. Serverflödet ger den enklaste autentiseringsupplevelsen eftersom det förlitar sig på leverantörens webbautentiseringsgränssnitt. Klientflödet möjliggör djupare integrering med enhetsspecifika funktioner, till exempel enkel inloggning eftersom det förlitar sig på providerspecifika SDK:er.

Anvisningar: Autentisera med en provider (serverflöde)

Om du vill att Mobile Apps ska hantera autentiseringsprocessen i din app måste du registrera din app hos din identitetsprovider. I Azure App Service måste du sedan konfigurera program-ID:t och hemligheten som tillhandahålls av leverantören. Mer information finns i självstudien Lägg till autentisering i din app.

När du har registrerat din identitetsprovider anropar du metoden .login() med namnet på din leverantör. Om du till exempel vill logga in med Facebook använder du följande kod:

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

De giltiga värdena för providern är "aad", "facebook", "google", "microsoftaccount" och "twitter".

Anmärkning

Google-autentisering fungerar för närvarande inte via Server Flow. Om du vill autentisera med Google måste du använda en klientflödesmetod.

I det här fallet hanterar Azure App Service OAuth 2.0-autentiseringsflödet. Den visar inloggningssidan för den valda providern och genererar en App Service-autentiseringstoken efter lyckad inloggning med identitetsprovidern. När inloggningsfunktionen är klar returnerar den ett JSON-objekt som exponerar både användar-ID och App Service-autentiseringstoken i fälten userId respektive authenticationToken. Den här token kan cachelagras och återanvändas tills den upphör att gälla.

Gör så här: Autentisera med en provider (klientflöde)

Din app kan också självständigt kontakta identitetsprovidern och sedan ange den returnerade token till Din App Service för autentisering. Med det här klientflödet kan du tillhandahålla en enkel inloggningsupplevelse för användare eller hämta ytterligare användardata från identitetsprovidern.

I det här exemplet används Facebook-klient-SDK för autentisering:

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

Det här exemplet förutsätter att token som tillhandahålls av respektive provider-SDK lagras i tokenvariabeln.

Anvisningar: Hämta information om den autentiserade användaren

Autentiseringsinformationen /.auth/me kan hämtas från slutpunkten med hjälp av ett HTTP-anrop med valfritt AJAX-bibliotek. Se till att du anger X-ZUMO-AUTH-huvudet till din autentiseringstoken. Autentiseringstoken lagras i client.currentUser.mobileServiceAuthenticationToken. Om du till exempel vill använda hämtnings-API:et:

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

Hämta är tillgängligt som ett npm-paket eller för webbläsarnedladdning från CDNJS. Du kan också använda jQuery eller ett annat AJAX-API för att hämta informationen. Data tas emot som ett JSON-objekt.

Anvisningar: Konfigurera mobile app-tjänsten för externa omdirigerings-URL:er.

Flera typer av JavaScript-program använder en loopback-funktion för att hantera OAuth-UI-flöden. Dessa funktioner omfattar:

Köra tjänsten lokalt
Använda Live Reload med Ionic Framework
Omdirigera till App Service för autentisering.

Att köra lokalt kan orsaka problem eftersom App Service-autentisering som standard endast har konfigurerats för att tillåta åtkomst från mobilappens serverdel. Använd följande steg för att ändra App Service-inställningarna för att aktivera autentisering när servern körs lokalt:

Logga in på Azure-portalen
Gå till mobilappens serverdel.
Välj Resursutforskaren på menyn UTVECKLINGSVERKTYG .
Klicka på Gå för att öppna resursutforskaren för mobilappens serverdel på en ny flik eller ett nytt fönster.
Expandera noden config>authsettings för din app.
Klicka på knappen Redigera för att aktivera redigering av resursen.
Hitta elementet allowedExternalRedirectUrls , som ska vara null. Lägg till url:er i en matris:
```
  "allowedExternalRedirectUrls": [
      "https://localhost:3000",
      "https://localhost:3000"
  ],
```
Ersätt URL:erna i matrisen med URL:erna för din tjänst, som i det här exemplet är https://localhost:3000 för den lokala Node.js exempeltjänsten. Du kan också använda https://localhost:4400 för Ripple-tjänsten eller någon annan URL, beroende på hur din app har konfigurerats.
Klicka på Läs/skriv överst på sidan och klicka sedan på PUT för att spara dina uppdateringar.

Du måste också lägga till samma loopback-URL:er i CORS allowlist-inställningarna:

Gå tillbaka till Azure-portalen.
Gå till mobilappens serverdel.
Klicka på CORS på API-menyn .
Ange varje URL i den tomma textrutan Tillåtna ursprung . En ny textruta skapas.
Klicka på SPARA

När serverdelen har uppdaterats kan du använda de nya loopback-URL:erna i din app.

Dela via