Hinzufügen der Authentifizierung zu Ihrer Xamarin.iOS-AppAdd authentication to your Xamarin.iOS 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.

ÜbersichtOverview

In diesem Thema wird die Authentifizierung von Benutzern einer mobilen App Service-App über Ihre Clientanwendung veranschaulicht.This topic shows you how to authenticate users of an App Service Mobile App from your client application. In diesem Lernprogramm fügen Sie dem Xamarin.iOS-Schnellstartprojekt durch Verwenden eines von App Service unterstützten Identitätsanbieters eine Authentifizierungsfunktion hinzu.In this tutorial, you add authentication to the Xamarin.iOS quickstart project using an identity provider that is supported by App Service. Nach der erfolgreichen Authentifizierung und Autorisierung durch Ihre mobile App wird die Benutzer-ID angezeigt und Sie erhalten Zugriff auf beschränkte Tabellendaten.After being successfully authenticated and authorized by your Mobile App, the user ID value is displayed and you will be able to access restricted table data.

Sie müssen zunächst das Lernprogramm Erstellen einer Xamarin.iOS-Appabschließen.You must first complete the tutorial Create a Xamarin.iOS app. Wenn Sie das heruntergeladene Schnellstart-Serverprojekt nicht verwenden, müssen Sie Ihrem Projekt das Authentifizierungs-Erweiterungspaket hinzufügen.If you do not use the downloaded quick start server project, you must add the authentication extension package to your project. Weitere Informationen zu Servererweiterungspaketen finden Sie unter Work with the .NET backend server SDK for Azure Mobile Apps(in englischer Sprache).For more information about server extension packages, see Work with the .NET backend server SDK for Azure Mobile Apps.

Registrieren Ihrer App für die Authentifizierung und Konfigurieren von App ServicesRegister your app for authentication and configure App Services

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.

Hinzufügen Ihrer App zu den zulässigen externen Umleitungs-URLsAdd your app to the Allowed External Redirect URLs

Eine sichere Authentifizierung erfordert, dass Sie ein neues URL-Schema für Ihre App definieren.Secure authentication requires that you define a new URL scheme for your app. Dies ermöglicht dem Authentifizierungssystem die erneute Umleitung an Ihre App, sobald der Authentifizierungsprozess abgeschlossen ist.This allows the authentication system to redirect back to your app once the authentication process is complete. In diesem Tutorial verwenden wir ausschließlich das URL-Schema appname.In this tutorial, we use the URL scheme appname throughout. Sie können jedoch ein beliebiges URL-Schema auswählen und verwenden.However, you can use any URL scheme you choose. Es sollte für Ihre mobile Anwendung eindeutig sein.It should be unique to your mobile application. So aktivieren Sie die Umleitung auf der ServerseiteTo enable the redirection on the server side:

  1. Wählen Sie im Azure-Portal App Service aus.In the Azure portal, select your App Service.

  2. Klicken Sie auf die Menüoption Authentifizierung/Autorisierung.Click the Authentication / Authorization menu option.

  3. Geben Sie in Zulässige externe Umleitungs-URLs url_scheme_of_your_app://easyauth.callback ein.In the Allowed External Redirect URLs, enter url_scheme_of_your_app://easyauth.callback. url_scheme_of_your_app steht in dieser Zeichenfolge für das URL-Schema für Ihre mobile Anwendung.The url_scheme_of_your_app in this string is the URL Scheme for your mobile application. Es sollte der normalen URL-Spezifikation für ein Protokoll folgen (nur aus Buchstaben und Zahlen bestehen und mit einem Buchstaben beginnen).It should follow normal URL specification for a protocol (use letters and numbers only, and start with a letter). Notieren Sie sich die gewählte Zeichenfolge, da Sie später Ihren mobilen Anwendungscode mehrfach mit dem URL-Schema anpassen müssen.You should make a note of the string that you choose as you will need to adjust your mobile application code with the URL Scheme in several places.

  4. Klicken Sie auf OK.Click OK.

  5. Klicken Sie auf Speichern.Click Save.

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.

  • Führen Sie das Clientprojekt in Visual Studio oder Xamarin Studio auf einem Gerät oder Emulator aus.In Visual Studio or Xamarin Studio, run the client project on a device or emulator. Stellen Sie sicher, dass ein Ausnahmefehler mit dem Statuscode 401 (Nicht autorisiert) angezeigt wird, nachdem die App gestartet wurde.Verify that an unhandled exception with a status code of 401 (Unauthorized) is raised after the app starts. Der Fehler wird in der Konsole des Debuggers protokolliert.The failure is logged to the console of the debugger. Daher sollte in Visual Studio der Fehler im Ausgabefenster angezeigt werden.So in Visual Studio, you should see the failure in the output window.

    Dieser Fehler des Typs „Nicht autorisiert“ kommt vor, weil die App versucht, als nicht authentifizierter Benutzer auf Ihr Mobile App-Back-End zuzugreifen.This unauthorized failure happens because the app attempts to access your Mobile App backend as an unauthenticated user. Die Tabelle TodoItem erfordert jetzt eine Authentifizierung.The TodoItem table now requires authentication.

Als Nächstes aktualisieren Sie die Client-App, um Ressourcen vom mobilen App-Back-End mit einem authentifizierten Benutzer zu aktualisieren.Next, you will update the client app to request resources from the Mobile App backend with an authenticated user.

Hinzufügen von Authentifizierung zur AppAdd authentication to the app

In diesem Abschnitt modifizieren Sie die App, sodass vor der Anzeige von Daten ein Anmeldebildschirm angezeigt wird.In this section, you will modify the app to display a login screen before displaying data. Wenn die App gestartet wird, baut sie keine Verbindung zu App Service auf und zeigt keinerlei Daten an.When the app starts, it will not connect to your App Service and will not display any data. Nachdem der Benutzer die Aktualisierungsgeste durchführt, wird der Anmeldebildschirm angezeigt, nach der erfolgreichen Anmeldung dann die Liste von To-Do-Objekten.After the first time that the user performs the refresh gesture, the login screen will appear; after successful login the list of todo items will be displayed.

  1. Öffnen Sie im Clientprojekt die Datei QSTodoService.cs, und fügen Sie der QSTodoService-Klasse nachstehende using-Anweisung und MobileServiceUser mit Accessor hinzu:In the client project, open the file QSTodoService.cs and add the following using statement and MobileServiceUser with accessor to the QSTodoService class:

    using UIKit;
    
    // Logged in user
    private MobileServiceUser user;
    public MobileServiceUser User { get { return user; } }
    
  2. Fügen Sie die neue Methode Authenticate mit der folgenden Definition zu QSTodoService hinzu:Add new method named Authenticate to QSTodoService with the following definition:

    public async Task Authenticate(UIViewController view)
    {
        try
        {
            AppDelegate.ResumeWithURL = url => url.Scheme == "{url_scheme_of_your_app}" && client.ResumeWithURL(url);
            user = await client.LoginAsync(view, MobileServiceAuthenticationProvider.Facebook, "{url_scheme_of_your_app}");
        }
        catch (Exception ex)
        {
            Console.Error.WriteLine (@"ERROR - AUTHENTICATION FAILED {0}", ex.Message);
        }
    }
    

    Hinweis

    Falls Sie einen anderen Identitätsanbieter als Facebook verwenden, ändern Sie den an LoginAsync übergebenen Wert in einen der folgenden Werte: MicrosoftAccount, Twitter, Google oder WindowsAzureActiveDirectory.If you are using an identity provider other than a Facebook, change the value passed to LoginAsync above to one of the following: MicrosoftAccount, Twitter, Google, or WindowsAzureActiveDirectory.

  3. Öffnen Sie QSTodoListViewController.cs.Open QSTodoListViewController.cs. Ändern Sie die Methodendefinition von ViewDidLoad, und entfernen Sie den Aufruf von RefreshAsync() am Ende:Modify the method definition of ViewDidLoad removing the call to RefreshAsync() near the end:

    public override async void ViewDidLoad ()
    {
        base.ViewDidLoad ();
    
        todoService = QSTodoService.DefaultService;
        await todoService.InitializeStoreAsync();
    
        RefreshControl.ValueChanged += async (sender, e) => {
            await RefreshAsync();
        }
    
        // Comment out the call to RefreshAsync
        // await RefreshAsync();
    }
    
  4. Ändern Sie die Methode RefreshAsync für die Authentifizierung, wenn die Eigenschaft User null ist.Modify the method RefreshAsync to authenticate if the User property is null. Fügen Sie folgenden Code oben in der Methodendefinition hinzu:Add the following code at the top of the method definition:

    // start of RefreshAsync method
    if (todoService.User == null) {
        await QSTodoService.DefaultService.Authenticate(this);
        if (todoService.User == null) {
            Console.WriteLine("couldn't login!!");
            return;
        }
    }
    // rest of RefreshAsync method
    
  5. Öffnen Sie AppDelegate.cs, und fügen Sie die folgende Methode hinzu:Open AppDelegate.cs, add the following method:

    public static Func<NSUrl, bool> ResumeWithURL;
    
    public override bool OpenUrl(UIApplication app, NSUrl url, NSDictionary options)
    {
        return ResumeWithURL != null && ResumeWithURL(url);
    }
    
  6. Öffnen Sie die Datei Info.plist, und navigieren Sie im Abschnitt Erweitert zu URL-Typen.Open Info.plist file, navigate to URL Types in the Advanced section. Konfigurieren Sie nun Bezeichner und URL-Schemas Ihres URL-Typs, und klicken Sie auf URL-Typ hinzufügen.Now configure the Identifier and the URL Schemes of your URL Type and click Add URL Type. URL-Schemas sollte mit „{url_scheme_of_your_app}“ identisch sein.URL Schemes should be the same as your {url_scheme_of_your_app}.

  7. Führen Sie in Visual Studio mit Verbindung zum Mac-Host oder in Visual Studio für Mac das Clientprojekt auf einem Gerät oder Emulator aus.In Visual Studio, connected to your Mac Host or Visual Studio for Mac, run the client project targeting a device or emulator. Überprüfen Sie, dass die App keine Daten anzeigt.Verify that the app displays no data.

    Führen Sie die Aktualisierungsgeste durch Herunterziehen der Objektliste, was die Anzeige des Anmeldebildschirms auslöst.Perform the refresh gesture by pulling down the list of items, which will cause the login screen to appear. Nachdem Sie erfolgreich gültige Anmeldeinformationen eingegeben haben, zeigt die App die Liste der To-Do-Objekte an, und Sie können die Daten ändern.Once you have successfully entered valid credentials, the app will display the list of todo items, and you can make updates to the data.