Freigeben über

Hinzufügen der Authentifizierung zu Ihrer Windows-App

  • Artikel

Überblick

In diesem Thema erfahren Sie, wie Sie Ihrer mobilen App cloudbasierte Authentifizierung hinzufügen. In diesem Tutorial fügen Sie dem Schnellstartprojekt für Mobile Apps auf der universellen Windows-Plattform (UWP) mithilfe eines von Azure App Service unterstützten Identitätsanbieters eine Authentifizierung hinzu. Nachdem der Benutzer von Ihrem mobilen App-Back-End erfolgreich authentifiziert und autorisiert wurde, wird der Wert der Benutzer-ID angezeigt.

Dieses Lernprogramm basiert auf der Schnellstartanleitung für mobile Apps. Sie müssen zuerst das Lernprogramm "Erste Schritte mit mobilen Apps" abschließen.

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.

  1. Konfigurieren Sie Ihren bevorzugten Identitätsanbieter, indem Sie die anbieterspezifischen Anweisungen befolgen:

  2. Wiederholen Sie die vorherigen Schritte für jeden Anbieter, den Sie in Ihrer App unterstützen möchten.

Fügen Sie Ihre App zu den zugelassenen externen Umleitungs-URLs hinzu.

Für die sichere Authentifizierung müssen Sie ein neues URL-Schema für Ihre App definieren. Auf diese Weise kann das Authentifizierungssystem wieder zu Ihrer App umgeleitet werden, sobald der Authentifizierungsprozess abgeschlossen ist. In diesem Lernprogramm verwenden wir das URL-Schema App-Namen. Sie können jedoch jedes von Ihnen ausgewählte URL-Schema verwenden. Es sollte für Ihre mobile Anwendung einzigartig sein. So aktivieren Sie die Umleitung auf der Serverseite:

  1. Wählen Sie im Azure-PortalIhren App-Dienst aus.

  2. Klicken Sie auf die Menüoption Authentifizierung/Autorisierung.

  3. Geben Sie bei den zulässigen externen Umleitungs-URLs, url_scheme_of_your_app://easyauth.callbackein. Die url_scheme_of_your_app in dieser Zeichenfolge ist das URL-Schema für Ihre mobile Anwendung. Es sollte die normale URL-Spezifikation für ein Protokoll befolgen (nur Buchstaben und Zahlen verwenden und mit einem Buchstaben beginnen). Notieren Sie sich die Zeichenfolge, die Sie auswählen, da Sie ihren mobilen Anwendungscode an mehreren Stellen mit dem URL-Schema anpassen müssen.

  4. Klicken Sie auf Speichern.

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 Anleitung: So laden Sie das Node.js-Backend-Schnellstartcodeprojekt mit Git herunter.

Jetzt können Sie überprüfen, ob der anonyme Zugriff auf Ihr Back-End deaktiviert wurde. Wenn das UWP-App-Projekt als Startprojekt festgelegt ist, stellen Sie die App bereit und führen Sie sie aus. Vergewissern Sie sich, dass nach dem Starten der App eine unbehandelte Ausnahme mit dem Statuscode 401 (Nicht autorisiert) ausgelöst wird. Dies geschieht, da die App versucht, als nicht authentifizierter Benutzer auf Ihren Mobilen App-Code zuzugreifen, aber die Tabelle "TodoItem " erfordert jetzt eine Authentifizierung.

Als Nächstes aktualisieren Sie die App so, dass Benutzer authentifiziert werden, bevor Sie Ressourcen von Ihrem App-Dienst anfordern.

Hinzufügen der Authentifizierung zur App

  1. Fügen Sie im UWP-App-Projekt in der Datei MainPage.xaml.cs den folgenden Codeausschnitt hinzu:

     // Define a member variable for storing the signed-in user. 
 private MobileServiceUser user;

 // Define a method that performs the authentication process
 // using a Facebook sign-in. 
 private async System.Threading.Tasks.Task<bool> AuthenticateAsync()
 {
     string message;
     bool success = false;
     try
     {
         // Change 'MobileService' to the name of your MobileServiceClient instance.
         // Sign-in using Facebook authentication.
         user = await App.MobileService
             .LoginAsync(MobileServiceAuthenticationProvider.Facebook, "{url_scheme_of_your_app}");
         message =
             string.Format("You are now signed in - {0}", user.UserId);

         success = true;
     }
     catch (InvalidOperationException)
     {
         message = "You must log in. Login Required";
     }

     var dialog = new MessageDialog(message);
     dialog.Commands.Add(new UICommand("OK"));
     await dialog.ShowAsync();
     return success;
 }

    Dieser Code authentifiziert den Benutzer mit einer Facebook-Anmeldung. Wenn Sie einen anderen Identitätsanbieter als Facebook verwenden, ändern Sie den Wert von MobileServiceAuthenticationProvider oben in den Wert für Ihren Anbieter.

  2. Ersetzen Sie die OnNavigatedTo()- Methode in MainPage.xaml.cs. Als Nächstes fügen Sie der App eine Anmeldeschaltfläche hinzu, die die Authentifizierung auslöst.

     protected override async void OnNavigatedTo(NavigationEventArgs e)
 {
     if (e.Parameter is Uri)
     {
         App.MobileService.ResumeWithURL(e.Parameter as Uri);
     }
 }

  3. Fügen Sie dem MainPage.xaml.cs den folgenden Codeausschnitt hinzu:

     private async void ButtonLogin_Click(object sender, RoutedEventArgs e)
 {
     // Login the user and then load data from the mobile app.
     if (await AuthenticateAsync())
     {
         // Switch the buttons and load items from the mobile app.
         ButtonLogin.Visibility = Visibility.Collapsed;
         ButtonSave.Visibility = Visibility.Visible;
         //await InitLocalStoreAsync(); //offline sync support.
         await RefreshTodoItems();
     }
 }

  4. Öffnen Sie die Projektdatei "MainPage.xaml", suchen Sie das Element, das die Schaltfläche " Speichern " definiert, und ersetzen Sie sie durch den folgenden Code:

     <Button Name="ButtonSave" Visibility="Collapsed" Margin="0,8,8,0" 
         Click="ButtonSave_Click">
     <StackPanel Orientation="Horizontal">
         <SymbolIcon Symbol="Add"/>
         <TextBlock Margin="5">Save</TextBlock>
     </StackPanel>
 </Button>
 <Button Name="ButtonLogin" Visibility="Visible" Margin="0,8,8,0" 
         Click="ButtonLogin_Click" TabIndex="0">
     <StackPanel Orientation="Horizontal">
         <SymbolIcon Symbol="Permissions"/>
         <TextBlock Margin="5">Sign in</TextBlock> 
     </StackPanel>
 </Button>

  5. Fügen Sie dem App.xaml.cs den folgenden Codeausschnitt hinzu:

     protected override void OnActivated(IActivatedEventArgs args)
 {
     if (args.Kind == ActivationKind.Protocol)
     {
         ProtocolActivatedEventArgs protocolArgs = args as ProtocolActivatedEventArgs;
         Frame content = Window.Current.Content as Frame;
         if (content.Content.GetType() == typeof(MainPage))
         {
             content.Navigate(typeof(MainPage), protocolArgs.Uri);
         }
     }
     Window.Current.Activate();
     base.OnActivated(args);
 }

  6. Öffnen Sie die Datei "Package.appxmanifest", navigieren Sie zu "Deklarationen", wählen Sie in der Dropdownliste "Verfügbare Deklarationen " die Option "Protokoll" aus, und klicken Sie auf " Hinzufügen ". Konfigurieren Sie nun die Eigenschaften der Protokolldeklaration . Fügen Sie im Anzeigenamen den Namen hinzu, den Sie Benutzern Ihrer Anwendung anzeigen möchten. Fügen Sie im Name das URL-Schema Ihrer App hinzu.

  7. Drücken Sie F5, um die App auszuführen, klicken Sie auf die Schaltfläche " Anmelden ", und melden Sie sich mit Ihrem ausgewählten Identitätsanbieter bei der App an. Nachdem die Anmeldung erfolgreich war, wird die App ohne Fehler ausgeführt, und Sie können Ihr Back-End abfragen und Aktualisierungen an Daten vornehmen.

Speichern des Authentifizierungstokens auf dem Client

Im vorherigen Beispiel wurde eine Standardanmeldung gezeigt, bei der der Client bei jedem Start der App sowohl den Identitätsanbieter als auch den App-Dienst kontaktieren muss. Diese Methode ist nicht nur ineffizient, Sie könnten auf Nutzungsprobleme stoßen, wenn viele Kunden versuchen, gleichzeitig Ihre App zu starten. Ein besserer Ansatz besteht darin, das von Ihrem App-Dienst zurückgegebene Autorisierungstoken zwischenzuspeichern und dies zuerst zu verwenden, bevor Sie eine anbieterbasierte Anmeldung verwenden.

Hinweis

Sie können das von App Services ausgestellte Token zwischenspeichern, unabhängig davon, ob Sie die vom Client verwaltete oder vom Dienst verwaltete Authentifizierung verwenden. In diesem Lernprogramm wird die vom Dienst verwaltete Authentifizierung verwendet.

  1. Fügen Sie in der MainPage.xaml.cs Projektdatei die folgenden using-Anweisungen hinzu:

     using System.Linq;        
 using Windows.Security.Credentials;

  2. Ersetzen Sie die AuthenticateAsync-Methode durch den folgenden Code:

     private async System.Threading.Tasks.Task<bool> AuthenticateAsync()
 {
     string message;
     bool success = false;

     // This sample uses the Facebook provider.
     var provider = MobileServiceAuthenticationProvider.Facebook;

     // Use the PasswordVault to securely store and access credentials.
     PasswordVault vault = new PasswordVault();
     PasswordCredential credential = null;

     try
     {
         // Try to get an existing credential from the vault.
         credential = vault.FindAllByResource(provider.ToString()).FirstOrDefault();
     }
     catch (Exception)
     {
         // When there is no matching resource an error occurs, which we ignore.
     }

     if (credential != null)
     {
         // Create a user from the stored credentials.
         user = new MobileServiceUser(credential.UserName);
         credential.RetrievePassword();
         user.MobileServiceAuthenticationToken = credential.Password;

         // Set the user from the stored credentials.
         App.MobileService.CurrentUser = user;

         // Consider adding a check to determine if the token is 
         // expired, as shown in this post: https://aka.ms/jww5vp.

         success = true;
         message = string.Format("Cached credentials for user - {0}", user.UserId);
     }
     else
     {
         try
         {
             // Sign in with the identity provider.
             user = await App.MobileService
                 .LoginAsync(provider, "{url_scheme_of_your_app}");

             // Create and store the user credentials.
             credential = new PasswordCredential(provider.ToString(),
                 user.UserId, user.MobileServiceAuthenticationToken);
             vault.Add(credential);

             success = true;
             message = string.Format("You are now signed in - {0}", user.UserId);
         }
         catch (MobileServiceInvalidOperationException)
         {
             message = "You must sign in. Sign-In Required";
         }
     }

     var dialog = new MessageDialog(message);
     dialog.Commands.Add(new UICommand("OK"));
     await dialog.ShowAsync();

     return success;
 }

    In dieser Version von AuthenticateAsync versucht die App, im PasswordVault gespeicherte Anmeldeinformationen für den Zugriff auf den Dienst zu verwenden. Eine reguläre Anmeldung wird auch ausgeführt, wenn keine gespeicherten Anmeldeinformationen vorhanden sind.

    Hinweis

    Ein zwischengespeichertes Token ist möglicherweise abgelaufen, und der Ablauf des Tokens kann auch nach der Authentifizierung auftreten, wenn die App verwendet wird. Informationen zum Ermitteln, ob ein Token abgelaufen ist, finden Sie unter "Überprüfen auf abgelaufene Authentifizierungstoken". Für eine Lösung zum Umgang mit Autorisierungsfehlern im Zusammenhang mit ablaufenden Tokens, siehe den Beitrag Zwischenspeichern und Behandeln abgelaufener Tokens im verwalteten SDK für Azure Mobile Services.

  3. Starten Sie die App zweimal neu.

    Beachten Sie, dass beim ersten Start die Anmeldung mit dem Anbieter erneut erforderlich ist. Beim zweiten Neustart werden die zwischengespeicherten Anmeldeinformationen jedoch verwendet, und die Anmeldung wird umgangen.

Nächste Schritte

Nachdem Sie dieses Lernprogramm für die Standardauthentifizierung abgeschlossen haben, sollten Sie mit einem der folgenden Lernprogramme fortfahren:

  • Hinzufügen von Pushbenachrichtigungen zu Ihrer App
    Erfahren Sie, wie Sie Ihrer App Pushbenachrichtigungen hinzufügen und Ihr Mobile App-Back-End so konfigurieren, dass Azure Notification Hubs zum Senden von Pushbenachrichtigungen verwendet werden.
  • Aktivieren der Offlinesynchronisierung für Ihre App
    Erfahren Sie, wie Sie Ihre App mithilfe eines Mobilen App-Back-Ends offline unterstützen. Die Offlinesynchronisierung ermöglicht Endbenutzern die Interaktion mit einer mobilen App – Anzeigen, Hinzufügen oder Ändern von Daten – auch wenn keine Netzwerkverbindung vorhanden ist.