Hinzufügen von Authentifizierung zu Ihrer Apache Cordova-App

Artikel
06/25/2019

Zusammenfassung

In diesem Tutorial fügen Sie dem Aufgabenlisten-Schnellstartprojekt unter Apache Cordova mithilfe eines unterstützten Identitätsanbieters eine Authentifizierung hinzu. Dieses Tutorial baut auf dem Tutorial Erste Schritte mit mobilen Apps auf, das Sie zuerst abschließen müssen.

Registrieren Ihrer App für die Authentifizierung und Konfigurieren von App Service

Zuerst müssen Sie Ihre App auf der Website eines Identitätsanbieters registrieren und anschließend die vom Anbieter generierten Anmeldeinformationen im Mobile Apps-Back-End festlegen.

Konfigurieren Sie Ihren bevorzugten Identitätsanbieter anhand der anbieterspezifischen Anweisungen:
Wiederholen Sie die oben stehenden Schritte für jeden Anbieter, den Sie in Ihrer App unterstützen möchten.

Ansehen eines Videos mit ähnlichen Schritten

Einschränken von Berechtigungen für authentifizierte Benutzer

Standardmäßig können APIs auf Mobile Apps-Back-Ends anonym aufgerufen werden. Als Nächstes müssen Sie den Zugriff auf authentifizierte Clients beschränken.

Node.js-Back-End (über das Azure-Portal):

Klicken Sie in den Einstellungen von Mobile Apps auf Einfache Tabellen, und wählen Sie Ihre Tabelle aus. Klicken Sie auf Berechtigungen ändern, wählen Sie für alle Berechtigungen Authenticated access only (Nur authentifizierter Zugriff) aus, und klicken Sie auf Speichern.
.NET-Back-End (C#):

Navigieren Sie im Serverprojekt zu ControllersTodoItemController.cs>. Fügen Sie das [Authorize]-Attribut der TodoItemController-Klasse wie folgt hinzu: Um den Zugriff auf bestimmte Methoden zu beschränken, können Sie dieses Attribut auch nur auf diese Methoden anstelle der Klasse anwenden. Veröffentlichen Sie das Serverprojekt erneut.
```
  [Authorize]
  public class TodoItemController : TableController<TodoItem>
```
Node.js-Back-End (über Node.js-Code) :

Um für den Zugriff auf Tabellen eine Authentifizierung anzufordern, fügen Sie die folgende Zeile in das Node.js-Serverskript ein:
```
  table.access = 'authenticated';
```
Ausführlichere Informationen finden Sie unter Erzwingen der Authentifizierung für den Zugriff auf Tabellen. Informationen zum Herunterladen des Schnellstart-Codeprojekts von Ihrer Website finden Sie unter Herunterladen des Schnellstart-Codeprojekts für das Node.js-Back-End mithilfe von Git.

Nun können Sie überprüfen, ob der anonyme Zugriff auf Ihr Back-End deaktiviert wurde. In Visual Studio:

Öffnen Sie das Projekt, das Sie im Tutorial Erste Schritte mit mobilen Apps erstellt haben.
Führen Sie Ihre Anwendung im Google Android-Emulator aus.
Vergewissern Sie sich, dass nach dem Start der App ein unerwarteter Verbindungsfehler angezeigt wird.

Aktualisieren Sie nun die App, um Benutzer vor dem Anfordern von Ressourcen des Mobile App-Back-Ends zu authentifizieren.

Hinzufügen von Authentifizierung zur App

Öffnen Sie Ihr Projekt in Visual Studio, und öffnen Sie dann die Datei www/index.html zur Bearbeitung.

Suchen Sie das Content-Security-Policy -Metatag im Kopfzeilenbereich. Fügen Sie den OAuth-Host der Liste mit den zulässigen Quellen hinzu.

Anbieter	Name des SDK-Anbieters	OAuth-Host
Azure Active Directory	aad	https://login.microsoftonline.com
Facebook	facebook	https://www.facebook.com
Google	Google	https://accounts.google.com
Microsoft	microsoftaccount	https://login.live.com
Twitter	Twitter	https://api.twitter.com

Hier ein Beispiel für Content-Security-Policy (implementiert für Azure Active Directory):

 <meta http-equiv="Content-Security-Policy" content="default-src 'self'
     data: gap: https://login.microsoftonline.com https://yourapp.azurewebsites.net; style-src 'self'">

Ersetzen Sie https://login.microsoftonline.com durch den OAuth-Host aus der obigen Tabelle. Weitere Informationen zum Content-Security-Policy-Metatag finden Sie in der Whitelist Guide.

Bei Verwendung auf geeigneten Mobilgeräten ist bei einigen Authentifizierungsanbietern keine Änderung von Content-Security-Policy erforderlich. Beispielsweise sind bei Verwendung der Google-Authentifizierung auf einem Android-Gerät keine Änderungen an Content-Security-Policy notwendig.

Öffnen Sie die www/js/index.js Datei zur Bearbeitung, suchen Sie die onDeviceReady() -Methode, und fügen Sie unter dem Clienterstellungscode den folgenden Code hinzu:
```
 // Login to the service
 client.login('SDK_Provider_Name')
     .then(function () {

         // BEGINNING OF ORIGINAL CODE

         // Create a table reference
         todoItemTable = client.getTable('todoitem');

         // Refresh the todoItems
         refreshDisplay();

         // Wire up the UI Event Handler for the Add Item
         $('#add-item').submit(addItemHandler);
         $('#refresh').on('click', refreshDisplay);

         // END OF ORIGINAL CODE

     }, handleError);
```
Dieser Code ersetzt den vorhandenen Code, der die Tabellenreferenz erstellt und die Benutzeroberfläche aktualisiert.

Die Login()-Methode startet die Authentifizierung mit dem Anbieter. Die login()-Methode ist eine asynchrone Funktion, die eine JavaScript-Zusage zurückgibt. Der Rest der Initialisierung wird in der Zusagenantwort platziert, sodass sie erst ausgeführt wird, wenn die login()-Methode abgeschlossen ist.
Ersetzen Sie in dem gerade hinzugefügten Code SDK_Provider_Name durch den Namen des Login-Anbieters. Verwenden Sie für Azure Active Directory beispielsweise client.login('aad').
Führen Sie Ihr Projekt aus. Wenn die Initialisierung des Projekts abgeschlossen ist, zeigt Ihre Anwendung die OAuth-Anmeldeseite für den ausgewählten Authentifizierungsanbieter an.

Nächste Schritte

Erfahren Sie mehr über die Authentifizierung mit Azure App Service.
Führen Sie das Tutorial fort, indem Sie Ihrer Apache Cordova-App Pushbenachrichtigungen hinzufügen.

Erfahren Sie, wie Sie die SDKs nutzen,

Freigeben über