Verwenden der Apache Cordova-Clientbibliothek für Azure Mobile Apps

Überblick

In diesem Leitfaden erfahren Sie, wie Sie häufige Szenarien mit dem neuesten Apache Cordova-Plug-In für Azure Mobile Apps ausführen. Wenn Sie mit Azure Mobile Apps noch nicht vertraut sind, führen Sie zunächst den Schnellstart für Azure Mobile Apps 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-24 (KitKat über Nougat).
iOS-Versionen 8.0 und höher.
Windows Phone 8.1.
Universelle Windows-Plattform

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. In diesem Leitfaden wird auch davon ausgegangen, dass Sie ihrem Code das Apache Cordova-Plug-In hinzugefügt haben. Wenn Sie dies nicht getan haben, können Sie das Apache Cordova-Plug-In zu Ihrem Projekt in der Befehlszeile hinzufügen:

cordova plugin add cordova-plugin-ms-azure-mobile-apps

Weitere Informationen zum Erstellen Ihrer ersten Apache Cordova-App finden 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 zu app.component.ts hinzu, um das Client-Objekt 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);

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 ".

Wenn Sie die Authentifizierung in einer Apache Cordova-App verwenden, müssen die folgenden Cordova-Plug-Ins verfügbar sein:

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.

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.

Gewusst wie: Abrufen von Informationen zum 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 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-Neuladen mit 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, und klicken Sie dann auf den Namen Ihrer mobilen App.
Klicken Sie auf "Extras".
Klicken Sie im Menü "BEOBACHTEN" auf Ressourcen-Explorer und dann auf Gehe. Ein neues Fenster oder eine neue Registerkarte wird geöffnet.
Erweitern Sie die Konfigurations- und Authentifizierungsknoten 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": [
      "https://localhost:3000",
      "https://localhost:3000"
  ],
```
Ersetzen Sie die URLs durch die URLs Ihres Diensts. Beispiele sind https://localhost:3000 (für den Node.js Beispieldienst) oder https://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 " Lesen/Schreiben ".
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, und klicken Sie dann auf den Namen Ihrer mobilen App.
Das Blatt "Einstellungen" wird automatisch geöffnet. Wenn nicht, 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 zusätzliche URLs ein.
Klicken Sie auf " Speichern ", um die Einstellungen zu speichern.

Es dauert ungefähr 10-15 Sekunden, bis die neuen Einstellungen wirksam werden.

Vorgehensweise: Registrieren für Pushbenachrichtigungen

Installieren Sie das Phonegap-Plugin-Push , um Pushbenachrichtigungen zu verarbeiten. Dieses Plug-In kann ganz einfach über den cordova plugin add Befehl in der Befehlszeile oder über das Git-Plug-In-Installationsprogramm in Visual Studio hinzugefügt werden. Der folgende Code in Ihrer Apache Cordova-App registriert Ihr Gerät für Pushbenachrichtigungen:

var pushOptions = {
    android: {
        senderId: '<from-gcm-console>'
    },
    ios: {
        alert: true,
        badge: true,
        sound: true
    },
    windows: {
    }
};
pushHandler = PushNotification.init(pushOptions);

pushHandler.on('registration', function (data) {
    registrationId = data.registrationId;
    // For cross-platform, you can use the device plugin to determine the device
    // Best is to use device.platform
    var name = 'gcm'; // For android - default
    if (device.platform.toLowerCase() === 'ios')
        name = 'apns';
    if (device.platform.toLowerCase().substring(0, 3) === 'win')
        name = 'wns';
    client.push.register(name, registrationId);
});

pushHandler.on('notification', function (data) {
    // data is an object and is whatever is sent by the PNS - check the format
    // for your particular PNS
});

pushHandler.on('error', function (error) {
    // Handle errors
});

Verwenden Sie das Notification Hubs SDK, um Pushbenachrichtigungen vom Server zu senden. Senden Sie Pushbenachrichtigungen niemals direkt von Clients. Dies kann verwendet werden, um einen Denial-of-Service-Angriff auf Notification Hubs oder PNS auszulösen. Das PNS könnte Ihren Datenverkehr aufgrund solcher Angriffe sperren.

Weitere Informationen

Detaillierte API-Details finden Sie in unserer API-Dokumentation.

Last updated on 2019-06-25

Freigeben über