Hinzufügen der Authentifizierung zu Ihrer Apache Cordova-App

Artikel
06/25/2019

Zusammenfassung

In dieser Anleitung fügen Sie dem Todolist-Schnellstartprojekt auf Apache Cordova Authentifizierung mithilfe eines unterstützten Identitätsanbieters hinzu. Dieses Lernprogramm basiert auf dem Erste Schritte mit mobilen Apps Lernprogramm, das Sie zuerst abschließen müssen.

Registrieren Sie Ihre App für die Authentifizierung und konfigurieren Sie den App-Service.

Zuerst müssen Sie Ihre App auf der Website eines Identitätsanbieters registrieren, und dann legen Sie die vom Anbieter generierten Anmeldeinformationen im Back-End für mobile Apps fest.

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

Sehen Sie sich ein Video mit ähnlichen Schritten

Einschränken von Berechtigungen für authentifizierte Benutzer

Standardmäßig können APIs in einem Back-End für Mobile Apps anonym aufgerufen werden. Als Nächstes müssen Sie den Zugriff auf authentifizierte Clients einschränken.

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

Klicken Sie in ihren Einstellungen für mobile Apps auf einfache Tabellen, und wählen Sie Ihre Tabelle aus. Klicken Sie auf Berechtigungen ändern, wählen Sie Authentifizierten Zugriff nur für alle Berechtigungen aus, und klicken Sie dann auf Speichern.
.NET-Back-End (C#):

Navigieren Sie im Serverprojekt zu Controllern>TodoItemController.cs. Fügen Sie das attribut [Authorize] wie folgt zur TodoItemController Klasse hinzu. Um den Zugriff nur auf bestimmte Methoden einzuschrä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 Backend (über Node.js Code):

Um die Authentifizierung für den Tabellenzugriff zu erfordern, fügen Sie der Node.js Serverskript die folgende Zeile hinzu:
```
  table.access = 'authenticated';
```
Weitere Informationen finden Sie unter Anleitung: Authentifizierung für den Zugriff auf Tabellen erforderlich machen. Informationen zum Herunterladen des Schnellstartcodeprojekts von Ihrer Website finden Sie unter How to: Download the Node.js back-end quickstart code project using Git.

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

Öffnen Sie das Projekt, das Sie beim Abschluss des Lernprogramms erstellt haben, Erste Schritte mit mobilen Apps.
Führen Sie Ihre Anwendung im Google Android Emulatoraus.
Überprüfen Sie, ob nach dem Starten der App ein unerwarteter Verbindungsfehler angezeigt wird.

Aktualisieren Sie als Nächstes die App so, dass Benutzer authentifiziert werden, bevor Sie Ressourcen aus dem Mobilen App-Back-End anfordern.

Hinzufügen der Authentifizierung zur App

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

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

Anbieter	SDK-Anbietername	OAuth-Host
Azure Active Directory	aad	https://login.microsoftonline.com
Facebook	facebook	https://www.facebook.com
Googeln	google	https://accounts.google.com
Microsoft	Microsoft-Konto	https://login.live.com
Twitter	Twitter	https://api.twitter.com

Ein Beispiel für content-Security-Policy (implementiert für Azure Active Directory) lautet wie folgt:

 <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 vorherigen Tabelle. Weitere Informationen zum Metatag für Inhaltssicherheitsrichtlinien finden Sie in der Security-Policy Dokumentation.

Einige Authentifizierungsanbieter erfordern keine Inhalts-Security-Policy Änderungen, wenn sie auf entsprechenden mobilen Geräten verwendet werden. Beispielsweise sind keine Inhalts-Security-Policy Änderungen erforderlich, wenn Sie die Google-Authentifizierung auf einem Android-Gerät verwenden.

Öffnen Sie die www/js/index.js Datei zum Bearbeiten, 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 den Tabellenverweis erstellt und die Benutzeroberfläche aktualisiert.

Die Login()-Methode beginnt mit der Authentifizierung mit dem Anbieter. Die Login()-Methode ist eine asynchrone Funktion, die eine JavaScript-Zusage zurückgibt. Der Rest der Initialisierung wird innerhalb der Zusageantwort platziert, sodass sie erst ausgeführt wird, wenn die Login()-Methode abgeschlossen ist.
Ersetzen Sie im soeben hinzugefügten Code SDK_Provider_Name durch den Namen Ihres Anmeldeanbieters. Verwenden Sie z. B. für Azure Active Directory client.login('aad').
Führen Sie Ihr Projekt aus. Wenn das Projekt die Initialisierung abgeschlossen hat, zeigt Ihre Anwendung die OAuth-Anmeldeseite für den ausgewählten Authentifizierungsanbieter an.

Nächste Schritte

Erfahren Sie mehr über Authentifizierung mit Azure App Service.
Fahren Sie mit dem Lernprogramm fort, indem Sie Push-Benachrichtigungen zu Ihrer Apache Cordova-App hinzufügen.

Erfahren Sie, wie Sie die SDKs verwenden.

Freigeben über