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

Artikel
06/25/2019

Översikt

I den här guiden får du lära dig att utföra vanliga scenarier med hjälp av den senaste JavaScript SDK:t 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ödet 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 globala, AMD- och CommonJS-format.

Konfiguration och förutsättningar

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. 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-adressen till din mobilapp.

var client = WindowsAzure.MobileServiceClient(appUrl);

Arbeta med tabeller

För att få åtkomst till 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 mer med din tabell:

Fråga en tabell
Infoga data
Ändra data
Ta bort data

Anvisning: Fråga en tabellreferens

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

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

Klarfunktionen anropas med resultatet. Använd inte for (var i in results) i klarfunktionen eftersom det upprepas över informationen som ingår i resultatet när andra frågefunktioner (som .includeTotalCount()) används.

Mer information om frågesyntaxen finns i [dokumentationen för frågeobjekt].

Filtrera data på servern

Du kan använda en where-sats på tabellreferensen:

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

Du kan även använda en funktion som filtrerar objektet. I det här fallet tilldelas variabeln this till det aktuella objektet som filtreras. Följande kod har samma funktioner som i föregående exempel:

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

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

Växling genom data

Utnyttja metoderna take() och skip(). Om du till exempel vill dela upp tabellen i 100-radsposter:

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 till resultatobjekten. Fältet totalCount fylls i med det totala antalet poster som skulle returneras om ingen sidindelning används.

Du kan sedan använda sidvariablerna och vissa UI-knappar för att få en sidlista. Läs in de nya posterna för varje sida med hjälp av loadPage(). Implementera cachelagring för att påskynda åtkomst till poster som redan har lästs in.

Anvisning: Returnera sorterade data

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

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

Mer information om frågeobjektet finns i [dokumentationen för frågeobjekt].

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

När infogningen har fungerat returneras den infogade posten med de ytterligare fält som krävs för synkroniseringsåtgärder. Uppdatera ditt eget cacheminne med den här informationen för senare uppdateringar.

Azure Mobile Apps Node.js Server SDK har funktioner för dynamiskt schema i utvecklingssyften. 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 stänger av dynamiskt schema innan du flyttar programmet till produktionen.

Anvisning: Ändra data

Precis som för metoden .insert() ska du skapa ett objekt för uppdateringen och sedan anropa .update(). Uppdateringsobjektet måste innehålla ID:t för posten som ska uppdateras – ID:t hämtas vid läsning av posten 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);

Anvisning: Ta bort data

Om du vill ta bort en post anropar du .del()-metoden. Skicka ID 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älvstudien Kom 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.

Gör så här för att: autentisera med en provider (Server Flow)

För att använda Mobile Apps för att hantera autentiseringsprocessen i din app måste du registrera din app med din identitetsprovider. Sedan måste du konfigurera program-ID och -hemligheten som du fått av din provider i Azure App Service. Mer information finns i självstudierna Lägg till autentisering till din app.

När du har registrerat din identitetsprovider anropar du .login()-metoden med namnet på din provider. 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);
});

Giltiga värden för providern är 'aad', 'facebook', 'google', 'microsoftaccount' och 'twitter'.

Anteckning

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 färdig returnerar den ett JSON-objekt som både visar 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 för att: autentisera med en provider (Client Flow)

Din app kan även oberoende kontakta identitetsprovidern och sedan tillhandahålla den returnerade token till App Service för autentisering. Det här klientflödet gör det möjligt för dig att tillhandahålla enkel inloggning för användare eller hämta ytterligare användardata från identitetsprovidern.

I det här exemplet används Facebook-klientens 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 den token som tillhandahålls av respektive provider-SDK lagras i token-variabeln.

Gör så här för att: Få mer information om den autentiserade användaren

Autentiseringsinformationen kan hämtas från /.auth/me-slutpunkten med hjälp av HTTP-anrop med ett AJAX-bibliotek. Se till att du ställer in X-ZUMO-AUTH-rubriken till din autentiseringstoken. Autentiseringstoken lagras i client.currentUser.mobileServiceAuthenticationToken. För att till exempel använda Fetch API:

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 är tillgängligt som ett npm-paket eller som nedladdning via en webbläsare från CDNJS. Du kan även använda jQuery eller en annan AJAX API för att hämta informationen. Data tas emot som ett JSON-objekt.

Anvisningar: Konfigurera din Mobile App Service 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 är:

Köra tjänsten lokalt
Använda Live Reload med Ionic Framework
Omdirigerar 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 inställningarna för App Service 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 i 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.
Leta reda på 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-inställningarna för listan över tillåtna:

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

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

Share via

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

Översikt

Plattformar som stöds

Konfiguration och förutsättningar

Skapa en klientanslutning

Arbeta med tabeller

Anvisning: Fråga en tabellreferens

Filtrera data på servern

Växling genom data

Anvisning: Returnera sorterade data

Anvisning: Infoga data

Anvisning: Ändra data

Anvisning: Ta bort data

Anvisningar: Autentisera användare

Gör så här för att: autentisera med en provider (Server Flow)

Gör så här för att: autentisera med en provider (Client Flow)

Gör så här för att: Få mer information om den autentiserade användaren

Anvisningar: Konfigurera din Mobile App Service för externa omdirigerings-URL:er.

Ytterligare resurser

Share via

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

Översikt

Plattformar som stöds

Konfiguration och förutsättningar

Skapa en klientanslutning

Arbeta med tabeller

Anvisning: Fråga en tabellreferens

Filtrera data på servern

Växling genom data

Anvisning: Returnera sorterade data

Anvisning: Infoga data

Anvisning: Ändra data

Anvisning: Ta bort data

Anvisningar: Autentisera användare

Gör så här för att: autentisera med en provider (Server Flow)

Gör så här för att: autentisera med en provider (Client Flow)

Grundläggande exempel på social autentisering

Gör så här för att: Få mer information om den autentiserade användaren

Anvisningar: Konfigurera din Mobile App Service för externa omdirigerings-URL:er.

Ytterligare resurser