Verwenden der JavaScript-Clientbibliothek für Azure Mobile Apps

Überblick

In diesem Leitfaden erfahren Sie, wie Sie gängige Szenarien mit dem neuesten JavaScript SDK für Azure Mobile Apps ausführen. Wenn Sie mit Azure Mobile Apps noch nicht vertraut sind, führen Sie zuerst den Schnellstart für Azure Mobile Apps aus, um ein Back-End zu erstellen und eine Tabelle zu erstellen. In diesem Leitfaden konzentrieren wir uns auf die Verwendung des mobilen Back-Ends in HTML/JavaScript-Webanwendungen.

Unterstützte Plattformen

Wir beschränken die Browserunterstützung auf die aktuellen und letzten Versionen der wichtigsten Browser: Google Chrome, Microsoft Edge, Microsoft Internet Explorer und Mozilla Firefox. Wir erwarten, dass das SDK mit jedem relativ modernen Browser funktioniert.

Das Paket wird als universelles JavaScript-Modul verteilt, sodass es globalen, AMD- und CommonJS-Formaten unterstützt.

Einrichtung und Voraussetzungen

In diesem Leitfaden wird davon ausgegangen, dass Sie ein Back-End mit einer Tabelle erstellt haben. In diesem Leitfaden wird davon ausgegangen, dass die Tabelle dasselbe Schema wie die Tabellen in diesen Lernprogrammen aufweist.

Die Installation des JavaScript-SDKs für Azure Mobile Apps kann über den npm Befehl erfolgen:

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

Die Bibliothek kann auch als ES2015-Modul in CommonJS-Umgebungen wie Browserify und Webpack und als AMD-Bibliothek verwendet werden. Beispiel:

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

Sie können auch eine vordefinierte Version des SDK verwenden, indem Sie direkt aus unserem CDN herunterladen:

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

Erstellen einer Clientverbindung

Erstellen Sie eine Clientverbindung, indem Sie ein WindowsAzure.MobileServiceClient-Objekt erstellen. Ersetzen Sie appUrl durch die URL zu Ihrer mobilen App.

var client = WindowsAzure.MobileServiceClient(appUrl);

Mit Tabellen arbeiten

Um auf Daten zuzugreifen oder diese zu aktualisieren, erstellen Sie einen Verweis auf die Back-End-Tabelle. Ersetzen sie tableName durch den Namen der Tabelle.

var table = client.getTable(tableName);

Sobald Sie einen Tabellenverweis haben, können Sie mit Ihrer Tabelle weiterarbeiten:

Abfrage einer Tabelle
Einfügen von Daten
Ändern von Daten
Löschen von Daten

So geht's: Abfragen eines Tabellenverweises

Sobald Sie einen Tabellenverweis haben, können Sie ihn verwenden, um Daten auf dem Server abzufragen. Abfragen werden in einer "LINQ-like"-Sprache erstellt. Verwenden Sie den folgenden Code, um alle Daten aus der Tabelle zurückzugeben:

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

Die Erfolgsfunktion wird mit den Ergebnissen aufgerufen. Verwenden Sie for (var i in results) nicht in der Erfolgsfunktion, da dadurch über Informationen iteriert wird, die in den Ergebnissen enthalten sind, wenn andere Abfragefunktionen (z. B. .includeTotalCount()) verwendet werden.

Weitere Informationen zur Abfragesyntax finden Sie in der [Query-Objektdokumentation].

Filtern von Daten auf dem Server

Sie können eine where-Klausel für den Tabellenverweis verwenden:

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

Sie können auch eine Funktion verwenden, die das Objekt filtert. In diesem Fall wird die this Variable dem aktuellen Objekt zugewiesen, das gefiltert wird. Der folgende Code entspricht funktional dem vorherigen Beispiel:

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

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

Durchblättern von Daten

Verwenden Sie die methoden take() und skip(). Wenn Sie beispielsweise die Tabelle in Datensätze mit 100 Zeilen aufteilen möchten:

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

Die .includeTotalCount()-Methode wird verwendet, um dem Ergebnisobjekt ein totalCount-Feld hinzuzufügen. Das Feld "totalCount" wird mit der Gesamtzahl der Datensätze gefüllt, die zurückgegeben werden, wenn keine Paging verwendet wird.

Anschließend können Sie die Seitenvariable und einige UI-Schaltflächen verwenden, um eine Seitenliste bereitzustellen; verwenden Sie loadPage(), um die neuen Datensätze für jede Seite zu laden. Implementieren Sie die Zwischenspeicherung, um den Zugriff auf Bereits geladene Datensätze zu beschleunigen.

Vorgehensweise: Zurückgeben sortierter Daten

Verwenden Sie die abfragemethoden .orderBy() oder .orderByDescending():

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

Weitere Informationen zum Query-Objekt finden Sie in der [Query-Objektdokumentation].

Vorgehensweise: Einfügen von Daten

Erstellen Sie ein JavaScript-Objekt mit dem entsprechenden Datum, und rufen Sie table.insert() asynchron auf:

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

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

Bei erfolgreicher Einfügung wird das eingefügte Element mit den zusätzlichen Feldern zurückgegeben, die für Synchronisierungsvorgänge erforderlich sind. Aktualisieren Sie Ihren eigenen Cache mit diesen Informationen für spätere Updates.

Das Azure Mobile Apps Node.js Server SDK unterstützt dynamisches Schema für Entwicklungszwecke. Mit dem dynamischen Schema können Sie der Tabelle Spalten hinzufügen, indem Sie sie in einem Einfüge- oder Aktualisierungsvorgang angeben. Es wird empfohlen, das dynamische Schema zu deaktivieren, bevor Sie Ihre Anwendung in die Produktion verschieben.

Vorgehensweise: Ändern von Daten

Ähnlich wie bei der .insert()-Methode sollten Sie ein Update-Objekt erstellen und dann .update()aufrufen. Das Updateobjekt muss die ID des zu aktualisierenden Datensatzes enthalten – die ID wird beim Lesen des Datensatzes oder beim Aufrufen von .insert()abgerufen.

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

Vorgehensweise: Löschen von Daten

Rufen Sie zum Löschen eines Datensatzes die .del()-Methode auf. Übergeben Sie die ID in einem Objektverweis:

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

Gewusst wie: Authentifizieren von Benutzern

Azure App Service unterstützt die Authentifizierung und Autorisierung von App-Benutzern mithilfe verschiedener externer Identitätsanbieter: Facebook, Google, Microsoft-Konto und Twitter. Sie können Berechtigungen für Tabellen vergeben, um den Zugriff auf bestimmte Operationen auf authentifizierte Benutzer zu beschränken. Sie können auch die Identität authentifizierter Benutzer verwenden, um Autorisierungsregeln in Serverskripts zu implementieren. Weitere Informationen finden Sie im Lernprogramm " Erste Schritte mit der Authentifizierung ".

Zwei Authentifizierungsflüsse werden unterstützt: ein Serverfluss und ein Clientfluss. Der Serverfluss bietet die einfachste Authentifizierungserfahrung, da er auf der Webauthentifizierungsschnittstelle des Anbieters basiert. Der Clientfluss ermöglicht eine tiefere Integration mit gerätespezifischen Funktionen wie single-sign-on, da er auf anbieterspezifische SDKs basiert.

Vorgehensweise: Authentifizieren mit einem Anbieter (Serverfluss)

Damit Mobile Apps den Authentifizierungsprozess in Ihrer App verwalten können, müssen Sie Ihre App bei Ihrem Identitätsanbieter registrieren. Anschließend müssen Sie in Ihrem Azure App Service die von Ihrem Anbieter bereitgestellte Anwendungs-ID und den geheimen Schlüssel konfigurieren. Weitere Informationen finden Sie im Lernprogramm "Hinzufügen der Authentifizierung zu Ihrer App".

Nachdem Sie Ihren Identitätsanbieter registriert haben, rufen Sie die .login()-Methode mit dem Namen Ihres Anbieters auf. Um sich beispielsweise mit Facebook anzumelden, verwenden Sie den folgenden Code:

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

Die gültigen Werte für den Anbieter sind "aad", "facebook", "google", "microsoftaccount" und "twitter".

Hinweis

Die Google-Authentifizierung funktioniert derzeit nicht über den Serverfluss. Um sich bei Google zu authentifizieren, müssen Sie eine Clientflussmethode verwenden.

In diesem Fall verwaltet Azure App Service den OAuth 2.0-Authentifizierungsfluss. Es zeigt die Anmeldeseite des ausgewählten Anbieters an und generiert nach erfolgreicher Anmeldung mit dem Identitätsanbieter ein App Service-Authentifizierungstoken. Die Anmeldefunktion gibt nach Abschluss des Vorgangs ein JSON-Objekt zurück, das sowohl das Benutzer-ID- als auch das App Service-Authentifizierungstoken in den Feldern "userId" bzw. "authenticationToken" verfügbar macht. Dieses Token kann zwischengespeichert und wiederverwendet werden, bis es abläuft.

Vorgehensweise: Authentifizierung bei einem Anbieter (Client-Flow)

Ihre App kann sich auch unabhängig an den Identitätsanbieter wenden und dann das zurückgegebene Token für die Authentifizierung an Ihren App-Dienst bereitstellen. Dieser Clientfluss ermöglicht es Ihnen, benutzern eine einmalige Anmeldeumgebung bereitzustellen oder zusätzliche Benutzerdaten vom Identitätsanbieter abzurufen.

In diesem Beispiel wird das Facebook-Client-SDK für die Authentifizierung verwendet:

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

In diesem Beispiel wird davon ausgegangen, dass das vom jeweiligen Anbieter-SDK bereitgestellte Token in der Tokenvariable gespeichert wird.

So geht's: Abrufen von Informationen über den authentifizierten Benutzer

Die Authentifizierungsinformationen können mithilfe eines HTTP-Aufrufs mit jeder AJAX-Bibliothek vom /.auth/me Endpunkt abgerufen werden. Stellen Sie sicher, dass Sie den X-ZUMO-AUTH Header auf Ihr Authentifizierungstoken festlegen. Das Authentifizierungstoken wird in client.currentUser.mobileServiceAuthenticationTokengespeichert. So verwenden Sie z. B. die Abruf-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 ist als npm-Paket oder zum Browserdownload von CDNJS verfügbar. Sie können auch jQuery oder eine andere AJAX-API verwenden, um die Informationen abzurufen. Daten werden als JSON-Objekt empfangen.

Vorgehensweise: Konfigurieren Ihres mobilen App-Diensts für externe Umleitungs-URLs.

Mehrere Typen von JavaScript-Anwendungen verwenden eine Loopbackfunktion zum Behandeln von OAuth-UI-Flüssen. Zu diesen Funktionen gehören:

Lokales Ausführen eines Dienstes
Verwenden von Live Reload mit dem Ionic Framework
Umleitung zum App-Dienst für die Authentifizierung.

Die lokale Ausführung kann Zu Problemen führen, da die App Service-Authentifizierung standardmäßig nur so konfiguriert ist, dass der Zugriff über Ihr Mobile App-Back-End zugelassen wird. Führen Sie die folgenden Schritte aus, um die App Service-Einstellungen so zu ändern, dass die Authentifizierung beim lokalen Ausführen des Servers aktiviert wird:

Melden Sie sich beim Azure-Portal an
Navigieren Sie zu Ihrem Mobilen App-Back-End.
Wählen Sie im Menü "ENTWICKLUNGSTOOLS" den Ressourcen-Explorer aus.
Klicken Sie auf "Gehe ", um den Ressourcen-Explorer für Ihr Mobile App-Back-End auf einer neuen Registerkarte oder einem neuen Fenster zu öffnen.
Erweitern Sie den Konfigurations>Authentifizierungseinstellungen-Knoten für Ihre App.
Klicken Sie auf die Schaltfläche "Bearbeiten ", um die Bearbeitung der Ressource zu aktivieren.
Suchen Sie das allowedExternalRedirectUrls-Element , das null sein soll. Fügen Sie Ihre URLs in einem Array hinzu:
```
  "allowedExternalRedirectUrls": [
      "https://localhost:3000",
      "https://localhost:3000"
  ],
```
Ersetzen Sie die URLs im Array durch die URLs Ihres Diensts, die in diesem Beispiel für den lokalen Node.js Beispieldienst verwendet werden https://localhost:3000 . Sie können auch für den Ripple-Dienst oder eine andere URL verwenden https://localhost:4400 , je nachdem, wie Ihre App konfiguriert ist.
Klicken Sie oben auf der Seite auf "Lesen/Schreiben", und klicken Sie dann auf PUT , um Ihre Updates zu speichern.

Außerdem müssen Sie den CORS-Zulassungslisteneinstellungen dieselben Loopback-URLs hinzufügen:

Navigieren Sie zurück zum Azure-Portal.
Navigieren Sie zu Ihrem Mobilen App-Back-End.
Klicken Sie im API-Menü auf CORS.
Geben Sie jede URL in das leere Textfeld "Zulässige Ursprünge " ein. Es wird ein neues Textfeld erstellt.
Klicken Sie auf SPEICHERN.

Nach den Back-End-Updates können Sie die neuen Loopback-URLs in Ihrer App verwenden.

Last updated on 2019-06-25

Freigeben über