Verwenden des Apache Cordova-Plug-Ins für Azure Mobile Apps
Anmerkung
Dieses Produkt wird eingestellt. Eine Ersetzung für Projekte mit .NET 8 oder höher finden Sie in der Community Toolkit Datasync-Bibliothek.
In diesem Leitfaden erfahren Sie, wie Sie gängige Szenarien mit dem neuesten Apache Cordova-Plug-In für Azure Mobile Appsdurchführen. Wenn Sie mit Azure Mobile Apps noch nicht vertraut sind, führen Sie zunächst Azure Mobile Apps Quick Start aus, um ein Back-End zu erstellen, eine Tabelle zu erstellen und ein vordefiniertes Apache Cordova-Projekt herunterzuladen. In diesem Leitfaden konzentrieren wir uns auf das clientseitige Apache Cordova Plugin.
Unterstützte Plattformen
Dieses SDK unterstützt Apache Cordova v6.0.0 und höher auf iOS-, Android- und Windows-Geräten. Der Plattformsupport lautet wie folgt:
- Android-API 19+.
- iOS-Versionen 8.0 und höher.
Warnung
In diesem Artikel werden Informationen für die v4.2.0-Bibliotheksversion behandelt, die eingestellt wird. An dieser Bibliothek werden keine weiteren Updates vorgenommen, einschließlich Updates für Sicherheitsprobleme. Erwägen Sie den Umstieg auf einen .NET-Client wie .NET MAUI- für den fortgesetzten Support.
Setup und Voraussetzungen
In diesem Leitfaden wird davon ausgegangen, dass Sie ein Back-End mit einer Tabelle erstellt haben. Beispiele verwenden die TodoItem Tabelle aus den Schnellstarts. Verwenden Sie zum Hinzufügen des Azure Mobile Apps-Plug-Ins zu Ihrem Projekt den folgenden Befehl:
cordova plugin add cordova-plugin-ms-azure-mobile-apps
Weitere Informationen zum Erstellen Ihrer ersten Apache Cordova-Appfinden Sie in ihrer Dokumentation.
Einrichten einer Ionic v2-App
Um ein Ionic v2-Projekt ordnungsgemäß zu konfigurieren, erstellen Sie zuerst eine einfache App, und fügen Sie das Cordova-Plug-In hinzu:
ionic start projectName --v2
cd projectName
ionic plugin add cordova-plugin-ms-azure-mobile-apps
Fügen Sie die folgenden Zeilen hinzu, um app.component.ts, um das Clientobjekt zu erstellen:
declare var WindowsAzure: any;
var client = new WindowsAzure.MobileServiceClient("https://yoursite.azurewebsites.net");
Sie können jetzt das Projekt im Browser erstellen und ausführen:
ionic platform add browser
ionic run browser
Das Azure Mobile Apps Cordova-Plug-In unterstützt sowohl Ionic v1- als auch v2-Apps. Nur die Ionic v2-Apps erfordern die zusätzliche Deklaration für das WindowsAzure-Objekt.
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);
Arbeiten mit Tabellen
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:
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) in der Erfolgsfunktion nicht, da dadurch Informationen durchlaufen werden, 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);
Auslagerung durch 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.
Zurückgegebene sortierte 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].
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 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.
Ä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);
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);
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 festlegen, um den Zugriff für bestimmte Vorgänge auf authentifizierte Benutzer einzuschrä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 Lernprogramm.
Wenn Sie die Authentifizierung in einer Apache Cordova-App verwenden, müssen die folgenden Cordova-Plug-Ins verfügbar sein:
Anmerkung
Aktuelle Sicherheitsänderungen in iOS und Android können die Serverflussauthentifizierung nicht verfügbar machen. In diesen Fällen müssen Sie einen Clientfluss verwenden.
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 anbieterspezifischen gerätespezifischen SDKs basiert.
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".
Anmerkung
Aufgrund von Sicherheitsbedenken funktionieren einige Authentifizierungsanbieter möglicherweise nicht mit einem Serverfluss. In diesen Fällen 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.
Authentifizieren mit einem Anbieter (Clientfluss)
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, eine einmalige Anmeldeumgebung für Benutzer bereitzustellen oder zusätzliche Benutzerdaten vom Identitätsanbieter abzurufen.
Standardbeispiel für die soziale Authentifizierung
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. Die für jeden Anbieter erforderlichen Details unterscheiden sich geringfügig. Lesen Sie die dokumentation Azure App Service Authentication and Authorization, um die genaue Form der Nutzlast zu ermitteln.
Abrufen von Informationen über den authentifizierten Benutzer
Die Authentifizierungsinformationen können über einen HTTP-Aufruf mit einer beliebigen HTTP-/REST-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 ein npm-Paket oder zum Browserdownload von CDNJSverfügbar. Daten werden als JSON-Objekt empfangen.
Konfigurieren Sie Ihren mobilen App-Dienst für externe Umleitungs-URLs.
Mehrere Arten von Apache Cordova-Anwendungen verwenden eine Loopbackfunktion zur Behandlung von OAuth-UI-Flüssen. OAuth-UI-Flüsse auf localhost verursachen Probleme, da der Authentifizierungsdienst nur weiß, wie Ihr Dienst standardmäßig verwendet werden kann. Beispiele für problematische OAuth-UI-Flüsse sind:
- Der Ripple-Emulator.
- Live Reload with Ionic.
- Lokales Ausführen des mobilen Back-End
- Ausführen des mobilen Back-Ends in einem anderen Azure App Service als das, das die Authentifizierung bereitstellt.
Führen Sie die folgenden Anweisungen aus, um die lokalen Einstellungen zur Konfiguration hinzuzufügen:
Melden Sie sich beim Azure-Portal an.
Wählen Sie Alle Ressourcen oder App Services aus, klicken Sie dann auf den Namen Ihrer mobilen App.
Klicken Sie auf Tools
Klicken Sie im OBSERV-Menü auf Ressourcen-Explorer, und klicken Sie dann auf Gehe zu. Ein neues Fenster oder eine neue Registerkarte wird geöffnet.
Erweitern Sie die Config, Authentifizierungseinstellungen Knoten für Ihre Website in der linken Navigation.
Klicken Sie auf bearbeiten
Suchen Sie nach dem Element "allowedExternalRedirectUrls". Er kann auf NULL oder ein Array von Werten festgelegt werden. Ändern Sie den Wert in den folgenden Wert:
"allowedExternalRedirectUrls": [ "http://localhost:3000", "https://localhost:3000" ],Ersetzen Sie die URLs durch die URLs Ihres Diensts. Beispiele sind
http://localhost:3000(für den Node.js Beispieldienst) oderhttp://localhost:4400(für den Ripple-Dienst). Diese URLs sind jedoch Beispiele – Ihre Situation, einschließlich der in den Beispielen erwähnten Dienste, kann unterschiedlich sein.Klicken Sie in der oberen rechten Ecke des Bildschirms auf die Schaltfläche Lese-/Schreibzugriff.
Klicken Sie auf die grüne PUT Schaltfläche.
Die Einstellungen werden an diesem Punkt gespeichert. Schließen Sie das Browserfenster erst, wenn die Einstellungen das Speichern abgeschlossen haben. Fügen Sie außerdem diese Loopback-URLs zu den CORS-Einstellungen für Ihren App-Dienst hinzu:
- Melden Sie sich beim Azure-Portal an.
- Wählen Sie Alle Ressourcen oder App Services aus, klicken Sie dann auf den Namen Ihrer mobilen App.
- Das Blatt "Einstellungen" wird automatisch geöffnet. Wenn dies nicht der Derb ist, klicken Sie auf Alle Einstellungen.
- Klicken Sie im API-Menü auf CORS-.
- Geben Sie die URL ein, die Sie im angegebenen Feld hinzufügen möchten, und drücken Sie die EINGABETASTE.
- Geben Sie bei Bedarf weitere URLs ein.
- Klicken Sie auf Speichern, um die Einstellungen zu speichern.
Es dauert ungefähr 10-15 Sekunden, bis die neuen Einstellungen wirksam werden.