Verwenden der JavaScript-Clientbibliothek für Azure Mobile Apps
Übersicht
Dieser Artikel beschreibt gängige Szenarien für die Verwendung des neuesten JavaScript-SDKs für Azure Mobile Apps. Wenn Sie mit Azure Mobile Apps noch nicht vertraut sind, führen Sie zunächst den Schnellstart von Azure Mobile Apps durch, um ein Back-End und eine Tabelle zu erstellen. In diesem Leitfaden liegt der Schwerpunkt auf der Verwendung des mobilen Back-Ends in HTML/JavaScript-Webanwendungen.
Unterstützte Plattformen
Wir beschränken die Browserunterstützung auf die aktuellen Versionen der wichtigen Browser: Google Chrome, Microsoft Edge, Microsoft Internet Explorer und Mozilla Firefox. Wir gehen davon aus, dass das SDK mit jedem relativ modernen Browser funktioniert.
Das Paket wird als universelles JavaScript-Modul bereitgestellt und unterstützt daher globale Formate ebenso wie AMD- und CommonJS-Formate.
Einrichtung und Voraussetzungen
Dieses Lernprogramm setzt voraus, dass Sie ein Back-End mit einer Tabelle erstellt haben. In dieser Anleitung wird davon ausgegangen, dass die Tabelle das gleiche Schema wie die Tabellen in diesen Lernprogrammen aufweist.
Die Installation des JavaScript SDKs für Azure Mobile Apps kann durch den Befehl npm vorgenommen werden.
npm install azure-mobile-apps-client --save
Die Bibliothek kann auch als ES2015-Modul in CommonJS-Umgebungen verwendet werden, wie z. B. Browserify und Webpack sowie als eine AMD-Bibliothek. 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 vorab erstellte Version des SDK verwenden, die 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
Stellen Sie eine Clientverbindung her, indem Sie ein WindowsAzure.MobileServiceClient -Objekt erstellen. Ersetzen Sie appUrl durch die URL zu Ihrer mobilen App.
var client = WindowsAzure.MobileServiceClient(appUrl);
Arbeiten mit Tabellen
Zum Zugreifen auf oder Aktualisieren von Daten erstellen Sie einen Verweis auf die Back-End-Tabelle. Ersetzen Sie tableName durch den Namen Ihrer Tabelle.
var table = client.getTable(tableName);
Sobald Sie einen Tabellenverweis haben, können Sie mit der Tabelle:
Vorgehensweise: Abfragen von Tabellenverweisen
Sobald Sie über einen Tabellenverweis verfügen, können Sie diesen zum Abfragen von Daten auf dem Server verwenden. Abfragen erfolgen in einer „LINQ-ähnlichen“ Sprache. 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 „success“-Funktion mit den Ergebnissen wird aufgerufen. Verwenden Sie for (var i in results) nicht in der „success“-Funktion, da dies zum Durchlaufen von Informationen in den Ergebnissen führt, wenn andere Abfragefunktionen verwendet werden (wie z.B. .includeTotalCount()).
Weitere Informationen zur Abfragesyntax finden Sie in der [Dokumentation zum Query-Objekt].
Filtern von Daten auf dem Server
Sie können für den Tabellenverweis eine where Klausel verwenden:
table
.where({ userId: user.userId, complete: false })
.read()
.then(success, failure);
Sie können auch eine Funktion nutzen, die das Objekt filtert. In diesem Fall wird die Variable this dem aktuell gefilterten Objekt zugewiesen. Der folgende Code hat die gleiche Funktion wie das vorherige Beispiel:
function filterByUserId(currentUserId) {
return this.userId === currentUserId && this.complete === false;
}
table
.where(filterByUserId, user.userId)
.read()
.then(success, failure);
Aufteilung von Daten auf Seiten
Verwenden Sie die Methoden take() und skip(). Angenommen, die Tabelle soll in Datensätze mit 100 Zeilen aufgeteilt werden:
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 Methode .includeTotalCount() wird verwendet, um ein totalCount-Feld dem „results“-Objekt hinzuzufügen. Das „totalCount“-Feld wird mit der Gesamtanzahl von Datensätzen aufgefüllt, die zurückgegeben wird, wenn keine Seitenverwaltung verwendet wird.
Sie können dann die pages-Variable und einige Schaltflächen auf der Benutzeroberfläche verwenden, um eine Seitenliste bereitzustellen. Verwenden Sie loadPage() zum Laden der neuen Datensätze für jede Seite. Implementieren Sie eine Zwischenspeicherung, um den Zugriff auf bereits geladene Datensätze zu beschleunigen.
Vorgehensweise: Zurückgeben sortierter Daten
Verwenden Sie die Abfragemethode .orderBy() oder .orderByDescending():
table
.orderBy('name')
.read()
.then(success, failure);
Weitere Informationen zum Query-Objekt finden Sie in der [Dokumentation zum Query-Objekt].
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 erfolgreichem Einfügen wird das eingefügte Element mit den zusätzlichen Feldern zurückgegeben, die für Synchronisierungsvorgänge erforderlich sind. Aktualisieren Sie Ihren Cache für spätere Updates mit diesen Informationen.
Das Node.js-Server SDK für Azure Mobile Apps unterstützt ein dynamisches Schema für die Entwicklung. Dadurch können Sie der Tabelle Spalten durch Angabe in einem Einfüge- oder Aktualisierungsvorgang hinzufügen. Es wird empfohlen, das dynamische Schema zu deaktivieren, bevor die Anwendung in die Produktion verlagert wird.
Vorgehensweise: Ändern von Daten
Ähnlich wie bei der .insert()-Methode müssen Sie zuerst ein Update-Objekt erstellen und dann .update() aufrufen. Das Update-Objekt muss die ID des Datensatzes enthalten, der aktualisiert werden soll. Die ID wird beim Lesen des Datensatzes oder 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 die .del()-Methode auf, um einen Datensatz zu löschen. Übergeben Sie die ID in einen Objektverweis:
table
.del({ id: '7163bc7a-70b2-4dde-98e9-8818969611bd' })
.done(function () {
// Record is now deleted - update your cache
}, failure);
Vorgehensweise: Authentifizieren von Benutzern
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. Außerdem können Sie die Identität authentifizierter Benutzer verwenden, um Autorisierungsregeln in Serverskripts zu implementieren. Weitere Informationen finden Sie im Lernprogramm Erste Schritte mit der Authentifizierung .
Insgesamt werden zwei Authentifizierungsflüsse unterstützt: ein Serverfluss und ein Clientfluss. Der Serverfluss bietet die einfachste Authentifizierungsform, da in diesem Fall die Authentifizierungs-Webschnittstelle des Anbieters verwendet wird. Der Clientfluss ermöglicht eine tiefere Integration mit gerätespezifischen Fähigkeiten wie z. B. einmalige Anmeldung, da in diesem Fall anbieterspezifische SDKs verwendet werden.
Vorgehensweise: Authentifizieren mithilfe eines Anbieters (Serverfluss)
Sie müssen Ihre Mobile Apps bei Ihrem Identitätsanbieter registrieren, um Mobile Services die Verwaltung des Authentifizierungsprozesses in Ihrer App zu ermöglichen. Anschließend müssen Sie in Ihrem Azure App Service die Anwendungs-ID und den geheimen Schlüssel Ihres Anbieters konfigurieren. Weitere Informationen finden Sie im Lernprogramm Authentifizierung zu Ihrer App hinzufügen.
Rufen Sie nach der Registrierung bei Ihrem Identitätsanbieter die .login()-Methode mit dem Namen Ihres Anbieters auf. Verwenden Sie also beispielsweise für die Facebook-Anmeldung den folgenden Code:
client.login("facebook").done(function (results) {
alert("You are now signed in as: " + results.userId);
}, function (err) {
alert("Error: " + err);
});
Gültige Anbieterwerte sind „aad“, „facebook“, „google“, „microsoftaccount“ und „twitter“.
Hinweis
Die Authentifizierung über Google ist zurzeit nicht per Serverfluss möglich. Für die Authentifizierung über Google muss eine Clientflussmethode verwendet werden.
In diesem Fall verwaltet Azure App Service den OAuth 2.0-Authentifizierungsfluss. Dabei wird die Anmeldeseite des ausgewählten Anbieters angezeigt und nach erfolgreicher Anmeldung beim Identitätsanbieter ein App Service-Authentifizierungstoken generiert. Die Anmeldefunktion gibt nach Abschluss ein JSON-Objekt zurück, das sowohl die 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: Authentifizieren mithilfe eines Anbieters (Clientfluss)
Ihre Anwendung kann den Identitätsanbieter auch unabhängig kontaktieren und das zurückgegebene Token zur Authentifizierung Ihrem App Service vorlegen. Mit diesem Clientfluss können Sie die einmalige Anmeldung für Ihre Benutzer implementieren oder zusätzliche Benutzerdaten vom Identitätsanbieter abrufen.
Einfaches Beispiel für die Authentifizierung über soziale Profile
Dieses Beispiel verwendet die Client-SDK von Facebook für die Authentifizierung:
client.login(
"facebook",
{"access_token": token})
.done(function (results) {
alert("You are now signed in as: " + results.userId);
}, function (err) {
alert("Error: " + err);
});
Dieses Beispiel geht davon aus, dass das vom jeweiligen Anbieter gelieferte Token in der token-Variable gespeichert wird.
Vorgehensweise: Abrufen von Informationen zum authentifizierten Benutzer
Die Authentifizierungsinformationen können mithilfe eines HTTP-Aufrufs mit einer beliebigen AJAX-Bibliothek vom /.auth/me-Endpunkt abgerufen werden. Stellen Sie sicher, dass der X-ZUMO-AUTH -Header auf Ihr Authentifizierungstoken festgelegt ist. Das Authentifizierungstoken wird in client.currentUser.mobileServiceAuthenticationTokengespeichert. Geben Sie beispielsweise Folgendes ein, um die API abzurufen:
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
});
Der Abruf ist als npm-Paket oder als Browserdownload über CDNJS verfügbar. Sie können auch JQuery oder eine andere AJAX-API zum Abrufen der Informationen verwenden. Daten werden als JSON-Objekt empfangen.
Vorgehensweise: Konfigurieren Ihres Mobile App Service für externe Umleitungs-URLs
Mehrere JavaScript-Anwendungen verwenden eine Loopback-Funktion, um Abläufe in der OAuth-Benutzeroberfläche zu verarbeiten. Diese Funktionen umfassen:
- Lokale Ausführung Ihres Dienstes
- Verwendung von Live Reload mit den Ionic-Framework
- Umleitung an den App Service zur Authentifizierung.
Lokale Ausführung kann problematisch sein, da die App Service-Authentifizierung in der Standardkonfiguration nur Zugriffe von Ihrem Back-End für mobile Apps zulässt. Führen Sie die folgenden Schritte aus, um die App Service-Einstellungen zu ändern und die Authentifizierung bei lokaler Serverausführung zu ermöglichen:
Melden Sie sich beim Azure portal
Navigieren Sie zum Back-End für mobile Apps.
Wählen Sie Ressourcen-Explorer im Menü ENTWICKLUNGSTOOLS.
Klicken Sie auf Gehe zu , um den Ressourcen-Explorer für Ihr Back-End für mobile Apps in einer neuen Registerkarte oder einem neuen Fenster zu öffnen.
Erweitern Sie den Knoten config>authsettings für Ihre App.
Klicken Sie auf die Schaltfläche Bearbeiten , um die Bearbeitung der Ressource zu ermöglichen.
Suchen Sie nach dem Element allowedExternalRedirectUrls , das den Wert NULL haben sollte. 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 (in diesem Beispiel
https://localhost:3000für den lokalen Node.js-Beispieldienst). Alternativ könnten Sie auchhttps://localhost:4400für den Ripple-Dienst oder eine andere URL verwenden (je nach Konfiguration Ihrer App).Klicken Sie oben auf der Seite auf Lesen/Schreiben und anschließend auf PUT, um Ihre Änderungen zu speichern.
Sie müssen auch die gleichen Loopback-URLs zu den CORS-Zulassungslisteneinstellungen hinzufügen:
- Navigieren Sie zurück zum Azure portal.
- Navigieren Sie zum Back-End für mobile Apps.
- 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 der Aktualisierung des Back-Ends können Sie die neuen Loopback-URLs in Ihrer App verwenden.