Hinzufügen von Authentifizierung zu Ihrer Apache Cordova-AppAdd authentication to your Apache Cordova app

Hinweis

Visual Studio App Center unterstützt End-to-End- und integrierte Dienste, die für die Entwicklung mobiler Apps von zentraler Bedeutung sind.Visual Studio App Center supports end to end and integrated services central to mobile app development. Entwickler können Build-, Test- und Verteilungsdienste nutzen, um eine Pipeline für Continuous Integration und Delivery einzurichten.Developers can use Build, Test and Distribute services to set up Continuous Integration and Delivery pipeline. Nach der Bereitstellung der App können Entwickler den Status und die Nutzung ihrer App mithilfe der Analyse- und Diagnosedienste überwachen und mit Benutzern über den Pushdienst interagieren.Once the app is deployed, developers can monitor the status and usage of their app using the Analytics and Diagnostics services, and engage with users using the Push service. Entwickler können auch den Authentifizierungsdienst nutzen, um ihre Benutzer zu authentifizieren, und den Datendienst, um App-Daten dauerhaft in der Cloud zu speichern und zu synchronisieren.Developers can also leverage Auth to authenticate their users and Data service to persist and sync app data in the cloud.

Falls Sie Clouddienste in Ihre mobile Anwendung integrieren möchten, sollten Sie sich noch heute für App Center registrieren.If you are looking to integrate cloud services in your mobile application, sign up with App Center today.

ZusammenfassungSummary

In diesem Tutorial fügen Sie dem Aufgabenlisten-Schnellstartprojekt unter Apache Cordova mithilfe eines unterstützten Identitätsanbieters eine Authentifizierung hinzu.In this tutorial, you add authentication to the todolist quickstart project on Apache Cordova using a supported identity provider. Dieses Tutorial baut auf dem Tutorial Erste Schritte mit Mobile Apps auf, das Sie zuerst abschließen müssen.This tutorial is based on the Get started with Mobile Apps tutorial, which you must complete first.

Registrieren Ihrer App für die Authentifizierung und Konfigurieren von App ServiceRegister your app for authentication and configure the 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.First, you need to register your app at an identity provider's site, and then you will set the provider-generated credentials in the Mobile Apps back end.

  1. Konfigurieren Sie Ihren bevorzugten Identitätsanbieter anhand der anbieterspezifischen Anweisungen:Configure your preferred identity provider by following the provider-specific instructions:

  2. Wiederholen Sie die oben stehenden Schritte für jeden Anbieter, den Sie in Ihrer App unterstützen möchten.Repeat the previous steps for each provider you want to support in your app.

Ansehen eines Videos mit ähnlichen SchrittenWatch a video showing similar steps

Einschränken von Berechtigungen für authentifizierte BenutzerRestrict permissions to authenticated users

Standardmäßig können APIs auf Mobile Apps-Back-Ends anonym aufgerufen werden.By default, APIs in a Mobile Apps back end can be invoked anonymously. Als Nächstes müssen Sie den Zugriff auf authentifizierte Clients beschränken.Next, you need to restrict access to only authenticated clients.

  • Node.js-Back-End (über das Azure-Portal):Node.js back end (via the Azure portal) :

    Klicken Sie in den Einstellungen von Mobile Apps auf Einfache Tabellen, und wählen Sie Ihre Tabelle aus.In your Mobile Apps settings, click Easy Tables and select your table. Klicken Sie auf Berechtigungen ändern, wählen Sie für alle Berechtigungen Authenticated access only (Nur authentifizierter Zugriff) aus, und klicken Sie auf Speichern.Click Change permissions, select Authenticated access only for all permissions, and then click Save.

  • .NET-Back-End (C#):.NET back end (C#):

    Navigieren Sie im Serverprojekt zu Controller > TodoItemController.cs.In the server project, navigate to Controllers > TodoItemController.cs. Fügen Sie das [Authorize]-Attribut der TodoItemController-Klasse wie folgt hinzu:Add the [Authorize] attribute to the TodoItemController class, as follows. Um den Zugriff auf bestimmte Methoden zu beschränken, können Sie dieses Attribut auch nur auf diese Methoden anstelle der Klasse anwenden.To restrict access only to specific methods, you can also apply this attribute just to those methods instead of the class. Veröffentlichen Sie das Serverprojekt erneut.Republish the server project.

      [Authorize]
      public class TodoItemController : TableController<TodoItem>
    
  • Node.js-Back-End (über Node.js-Code) :Node.js backend (via 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:To require authentication for table access, add the following line to the Node.js server script:

      table.access = 'authenticated';
    

    Weitere Details finden Sie unter Gewusst wie: Erzwingen der Authentifizierung für den Zugriff auf Tabellen.For more details, see How to: Require authentication for access to tables. Informationen zum Herunterladen des Schnellstart-Codeprojekts von Ihrer Website finden Sie unter Vorgehensweise: Herunterladen des Schnellstart-Codeprojekts für das Node.js-Back-End mit Git.To learn how to download the quickstart code project from your site, see How to: Download the Node.js backend quickstart code project using Git.

Nun können Sie überprüfen, ob der anonyme Zugriff auf Ihr Back-End deaktiviert wurde.Now, you can verify that anonymous access to your backend has been disabled. In Visual Studio:In Visual Studio:

  • Öffnen Sie das Projekt, das Sie im Tutorial Erste Schritte mit Mobile Apps erstellt haben.Open the project that you created when you completed the tutorial Get started with Mobile Apps.
  • Führen Sie Ihre Anwendung im Google Android-Emulator aus.Run your application in the Google Android Emulator.
  • Vergewissern Sie sich, dass nach dem Start der App ein unerwarteter Verbindungsfehler angezeigt wird.Verify that an Unexpected Connection Failure is shown after the app starts.

Aktualisieren Sie nun die App, um Benutzer vor dem Anfordern von Ressourcen des Mobile App-Back-Ends zu authentifizieren.Next, update the app to authenticate users before requesting resources from the Mobile App backend.

Hinzufügen von Authentifizierung zur AppAdd authentication to the app

  1. Öffnen Sie Ihr Projekt in Visual Studio, und öffnen Sie dann die Datei www/index.html zur Bearbeitung.Open your project in Visual Studio, then open the www/index.html file for editing.

  2. Suchen Sie das Content-Security-Policy -Metatag im Kopfzeilenbereich.Locate the Content-Security-Policy meta tag in the head section. Fügen Sie den OAuth-Host der Liste mit den zulässigen Quellen hinzu.Add the OAuth host to the list of allowed sources.

    AnbieterProvider Name des SDK-AnbietersSDK Provider Name OAuth-HostOAuth Host
    Azure Active DirectoryAzure Active Directory aadaad https://login.microsoftonline.com
    FacebookFacebook Facebookfacebook https://www.facebook.com
    GoogleGoogle Googlegoogle https://accounts.google.com
    MicrosoftMicrosoft microsoftaccountmicrosoftaccount https://login.live.com
    TwitterTwitter Twittertwitter https://api.twitter.com

    Hier ein Beispiel für Content-Security-Policy (implementiert für Azure Active Directory):An example Content-Security-Policy (implemented for Azure Active Directory) is as follows:

     <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.Replace https://login.microsoftonline.com with the OAuth host from the preceding table. Weitere Informationen zum Content-Security-Policy-Metatag finden Sie in der Whitelist Guide.For more information about the content-security-policy meta tag, see the Content-Security-Policy documentation.

    Bei Verwendung auf geeigneten Mobilgeräten ist bei einigen Authentifizierungsanbietern keine Änderung von Content-Security-Policy erforderlich.Some authentication providers do not require Content-Security-Policy changes when used on appropriate mobile devices. Beispielsweise sind bei Verwendung der Google-Authentifizierung auf einem Android-Gerät keine Änderungen an Content-Security-Policy notwendig.For example, no Content-Security-Policy changes are required when using Google authentication on an Android device.

  3. Öffnen Sie die Datei www/js/index.js zur Bearbeitung, suchen Sie die onDeviceReady()-Methode, und fügen Sie unterhalb des Codes zur Clienterstellung Folgendes ein:Open the www/js/index.js file for editing, locate the onDeviceReady() method, and under the client creation code add the following code:

     // 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.This code replaces the existing code that creates the table reference and refreshes the UI.

    Die Login()-Methode startet die Authentifizierung mit dem Anbieter.The login() method starts authentication with the provider. Die login()-Methode ist eine asynchrone Funktion, die eine JavaScript-Zusage zurückgibt.The login() method is an async function that returns a JavaScript Promise. Der Rest der Initialisierung wird in der Zusagenantwort platziert, sodass sie erst ausgeführt wird, wenn die login()-Methode abgeschlossen ist.The rest of the initialization is placed inside the promise response so that it is not executed until the login() method completes.

  4. Ersetzen Sie in dem gerade hinzugefügten Code SDK_Provider_Name durch den Namen des Login-Anbieters.In the code that you just added, replace SDK_Provider_Name with the name of your login provider. Verwenden Sie für Azure Active Directory beispielsweise client.login('aad').For example, for Azure Active Directory, use client.login('aad').

  5. Führen Sie das Projekt aus.Run your project. Wenn die Initialisierung des Projekts abgeschlossen ist, zeigt Ihre Anwendung die OAuth-Anmeldeseite für den ausgewählten Authentifizierungsanbieter an.When the project has finished initializing, your application shows the OAuth login page for the chosen authentication provider.

Nächste SchritteNext Steps

Erfahren Sie, wie Sie die SDKs nutzen,Learn how to use the SDKs.