Hinzufügen der Authentifizierung zu Ihrer Xamarin Forms-App

Überblick

In diesem Thema erfahren Sie, wie Sie Benutzer einer App Service Mobile-App von Ihrer Clientanwendung authentifizieren. In diesem Lernprogramm fügen Sie dem Schnellstartprojekt "Xamarin Forms" die Authentifizierung mithilfe eines Identitätsanbieters hinzu, der von App Service unterstützt wird. Nachdem Sie von Ihrer Mobilen App erfolgreich authentifiziert und autorisiert wurden, wird der Benutzer-ID-Wert angezeigt, und Sie können auf eingeschränkte Tabellendaten zugreifen.

Voraussetzungen

Um das beste Ergebnis mit diesem Lernprogramm zu erzielen, empfehlen wir, zuerst das Lernprogramm zum Erstellen einer Xamarin Forms-App abzuschließen. Nachdem Sie dieses Lernprogramm abgeschlossen haben, verfügen Sie über ein Xamarin Forms-Projekt, das eine multiplattformfähige TodoList-App ist.

Wenn Sie das heruntergeladene Schnellstartserverprojekt nicht verwenden, müssen Sie dem Projekt das Paket für die Authentifizierungserweiterung hinzufügen. Weitere Informationen zu Servererweiterungspaketen finden Sie unter Arbeiten mit dem .NET-Back-End-Server-SDK für Azure Mobile Apps.

Registrieren Sie Ihre App für die Authentifizierung und konfigurieren Sie App-Dienste

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.

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:

Wählen Sie im Azure-PortalIhren App-Dienst aus.
Klicken Sie auf die Menüoption Authentifizierung/Autorisierung.
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.
Klicke auf OK.
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.

Hinzufügen der Authentifizierung zur portablen Klassenbibliothek

Mobile Apps verwendet die LoginAsync-Erweiterungsmethode im MobileServiceClient , um sich mit der App Service-Authentifizierung bei einem Benutzer anzumelden. In diesem Beispiel wird ein serververwalteter Authentifizierungsfluss verwendet, der die Anmeldeschnittstelle des Anbieters in der App anzeigt. Weitere Informationen finden Sie unter serververwaltete Authentifizierung. Um eine bessere Benutzererfahrung in Ihrer Produktions-App zu ermöglichen, sollten Sie stattdessen die clientverwaltete Authentifizierung verwenden.

Um sich mit einem Xamarin Forms-Projekt zu authentifizieren, definieren Sie eine IAuthenticate-Schnittstelle in der Portable Class Library für die App. Fügen Sie dann eine Anmeldeschaltfläche zur Benutzeroberfläche hinzu, die in der portablen Klassenbibliothek definiert ist, auf die Sie klicken, um die Authentifizierung zu starten. Daten werden nach erfolgreicher Authentifizierung aus dem back-End der mobilen App geladen.

Implementieren Sie die IAuthenticate-Schnittstelle für jede Plattform, die von Ihrer App unterstützt wird.

Öffnen Sie in Visual Studio oder Xamarin Studio App.cs aus dem Projekt mit Portable im Namen, das Projekt portable Klassenbibliothek ist, und fügen Sie dann die folgende using Anweisung hinzu:
```
 ```csharp
 using System.Threading.Tasks;
 ```
```
Fügen Sie in App.cs die folgende IAuthenticate Schnittstellendefinition unmittelbar vor der App Klassendefinition hinzu.
```
 ```csharp
 public interface IAuthenticate
 {
     Task<bool> Authenticate();
 }
 ```
```

Um die Schnittstelle mit einer plattformspezifischen Implementierung zu initialisieren, fügen Sie der App-Klasse die folgenden statischen Member hinzu.

 ```csharp
 public static IAuthenticate Authenticator { get; private set; }

 public static void Init(IAuthenticate authenticator)
 {
     Authenticator = authenticator;
 }
 ```

Öffnen Sie TodoList.xaml aus dem Portable Class Library-Projekt, fügen Sie das folgende Button-Element im buttonsPanel-Layoutelement nach der vorhandenen Schaltfläche hinzu:
```
 ```xml
   <Button x:Name="loginButton" Text="Sign-in" MinimumHeightRequest="30"
     Clicked="loginButton_Clicked"/>
 ```
```
Diese Schaltfläche löst die serververwaltete Authentifizierung mit Ihrem mobilen App-Back-End aus.
Öffnen Sie TodoList.xaml.cs aus dem Projekt "Portable Class Library", und fügen Sie der Klasse das folgende Feld hinzu TodoList :
```
 ```csharp
 // Track whether the user has authenticated.
 bool authenticated = false;
 ```
```

Ersetzen Sie die OnAppearing-Methode durch den folgenden Code:

 ```csharp
 protected override async void OnAppearing()
 {
     base.OnAppearing();

     // Refresh items only when authenticated.
     if (authenticated == true)
     {
         // Set syncItems to true in order to synchronize the data
         // on startup when running in offline mode.
         await RefreshItems(true, syncItems: false);

         // Hide the Sign-in button.
         this.loginButton.IsVisible = false;
     }
 }
 ```

Dieser Code stellt sicher, dass Daten erst nach der Authentifizierung vom Dienst aktualisiert werden.

Fügen Sie der TodoList-Klasse den folgenden Handler für das Clicked-Ereignis hinzu:

 ```csharp
 async void loginButton_Clicked(object sender, EventArgs e)
 {
     if (App.Authenticator != null)
         authenticated = await App.Authenticator.Authenticate();

     // Set syncItems to true to synchronize the data on startup when offline is enabled.
     if (authenticated == true)
         await RefreshItems(true, syncItems: false);
 }
 ```

Speichern Sie Ihre Änderungen, und erstellen Sie das Projekt "Portable Class Library" neu, um sicherzustellen, dass keine Fehler vorliegen.

Hinzufügen der Authentifizierung zur Android-App

In diesem Abschnitt wird gezeigt, wie Sie die IAuthenticate-Schnittstelle im Android-App-Projekt implementieren. Überspringen Sie diesen Abschnitt, wenn Sie Android-Geräte nicht unterstützen.

Klicken Sie in Visual Studio oder Xamarin Studio mit der rechten Maustaste auf das droid-Projekt , und legen Sie dann "Als Startprojekt festlegen" fest.
Drücken Sie F5, um das Projekt im Debugger zu starten, und stellen Sie dann sicher, dass eine unbehandelte Ausnahme mit einem Statuscode von 401 (Nicht autorisiert) ausgelöst wird, nachdem die App gestartet wurde. Der 401-Code wird erstellt, da der Zugriff auf das Back-End nur auf autorisierte Benutzer beschränkt ist.
Öffnen Sie MainActivity.cs im Android-Projekt, und fügen Sie die folgenden using Anweisungen hinzu:
```
 ```csharp
 using Microsoft.WindowsAzure.MobileServices;
 using System.Threading.Tasks;
 ```
```

Aktualisieren Sie die MainActivity-Klasse , um die IAuthenticate-Schnittstelle wie folgt zu implementieren:

 ```csharp
 public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsApplicationActivity, IAuthenticate
 ```

Aktualisieren Sie die MainActivity-Klasse , indem Sie ein MobileServiceUser-Feld und eine Authenticate-Methode hinzufügen, die von der IAuthenticate-Schnittstelle wie folgt erforderlich ist:

 ```csharp
 // Define an authenticated user.
 private MobileServiceUser user;

 public async Task<bool> Authenticate()
 {
     var success = false;
     var message = string.Empty;
     try
     {
         // Sign in with Facebook login using a server-managed flow.
         user = await TodoItemManager.DefaultManager.CurrentClient.LoginAsync(this, 
             MobileServiceAuthenticationProvider.Facebook, "{url_scheme_of_your_app}");
         if (user != null)
         {
             message = string.Format("you are now signed-in as {0}.",
                 user.UserId);
             success = true;
         }
     }
     catch (Exception ex)
     {
         message = ex.Message;
     }

     // Display the success or failure message.
     AlertDialog.Builder builder = new AlertDialog.Builder(this);
     builder.SetMessage(message);
     builder.SetTitle("Sign-in result");
     builder.Create().Show();

     return success;
 }

 public override void OnResume()
 {
     base.OnResume();
     Xamarin.Essentials.Platform.OnResume();
 }
 ```

Wenn Sie einen anderen Identitätsanbieter als Facebook verwenden, wählen Sie einen anderen Wert für MobileServiceAuthenticationProvider aus.

Aktualisieren Sie die AndroidManifest.xml Datei, indem Sie den folgenden XML-Code innerhalb des <application> Elements hinzufügen:

<activity android:name="com.microsoft.windowsazure.mobileservices.authentication.RedirectUrlActivity" android:launchMode="singleTop" android:noHistory="true">
  <intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="{url_scheme_of_your_app}" android:host="easyauth.callback" />
  </intent-filter>
</activity>

Ersetzen Sie {url_scheme_of_your_app} durch Ihr URL-Schema.

Fügen Sie den folgenden Code in die OnCreate-Methode der MainActivity-Klasse ein, bevor der Aufruf von LoadApplication() erfolgt:
```
 ```csharp
 // Initialize the authenticator before loading the app.
 App.Init((IAuthenticate)this);
 ```
```
Dieser Code stellt sicher, dass der Authentifikator vor dem Laden der App initialisiert wird.
Erstellen Sie die App neu, führen Sie sie aus, und melden Sie sich dann mit dem von Ihnen ausgewählten Authentifizierungsanbieter an, und stellen Sie sicher, dass Sie als authentifizierter Benutzer auf Daten zugreifen können.

Problembehandlung

Die Anwendung ist aufgrund Java.Lang.NoSuchMethodError: No static method startActivity abgestürzt

In einigen Fällen werden Konflikte in den Supportpaketen im Visual Studio nur als Warnung angezeigt, jedoch stürzt die Anwendung bei der Laufzeit aufgrund dieser Ausnahme ab. In diesem Fall müssen Sie sicherstellen, dass alle Supportpakete, auf die in Ihrem Projekt verwiesen wird, über dieselbe Version verfügen. Das Azure Mobile Apps NuGet-Paket verfügt über Xamarin.Android.Support.CustomTabs Abhängigkeit für Android-Plattform. Wenn Ihr Projekt also neuere Supportpakete verwendet, müssen Sie dieses Paket mit der erforderlichen Version direkt installieren, um Konflikte zu vermeiden.

Hinzufügen der Authentifizierung zur iOS-App

In diesem Abschnitt wird gezeigt, wie Sie die IAuthenticate-Schnittstelle im iOS-App-Projekt implementieren. Überspringen Sie diesen Abschnitt, wenn Sie iOS-Geräte nicht unterstützen.

Klicken Sie in Visual Studio oder Xamarin Studio mit der rechten Maustaste auf das iOS-Projekt und dann als Startprojekt festlegen.
Drücken Sie F5, um das Projekt im Debugger zu starten, und stellen Sie dann sicher, dass eine unbehandelte Ausnahme mit einem Statuscode von 401 (Nicht autorisiert) ausgelöst wird, nachdem die App gestartet wurde. Die 401-Antwort wird erstellt, da der Zugriff auf das Back-End nur auf autorisierte Benutzer beschränkt ist.

Öffnen Sie AppDelegate.cs im iOS-Projekt, und fügen Sie die folgenden using Anweisungen hinzu:

 ```csharp
 using Microsoft.WindowsAzure.MobileServices;
 using System.Threading.Tasks;
 ```

Aktualisieren Sie die AppDelegate-Klasse , um die IAuthenticate-Schnittstelle wie folgt zu implementieren:

 ```csharp
 public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate, IAuthenticate
 ```

Aktualisieren Sie die AppDelegate-Klasse , indem Sie ein MobileServiceUser-Feld und eine Authenticate-Methode hinzufügen, die von der IAuthenticate-Schnittstelle wie folgt erforderlich ist:

 ```csharp
 // Define an authenticated user.
 private MobileServiceUser user;

 public async Task<bool> Authenticate()
 {
     var success = false;
     var message = string.Empty;
     try
     {
         // Sign in with Facebook login using a server-managed flow.
         if (user == null)
         {
             user = await TodoItemManager.DefaultManager.CurrentClient
                 .LoginAsync(UIApplication.SharedApplication.KeyWindow.RootViewController,
                 MobileServiceAuthenticationProvider.Facebook, "{url_scheme_of_your_app}");
             if (user != null)
             {
                 message = string.Format("You are now signed-in as {0}.", user.UserId);
                 success = true;
             }
         }
     }
     catch (Exception ex)
     {
        message = ex.Message;
     }

     // Display the success or failure message.
     UIAlertController avAlert = UIAlertController.Create("Sign-in result", message, UIAlertControllerStyle.Alert);
     avAlert.AddAction(UIAlertAction.Create("OK", UIAlertActionStyle.Default, null));
     UIApplication.SharedApplication.KeyWindow.RootViewController.PresentViewController(avAlert, true, null);

     return success;
 }
 ```

Wenn Sie einen anderen Identitätsanbieter als Facebook verwenden, wählen Sie einen anderen Wert für [MobileServiceAuthenticationProvider] aus.

Aktualisieren Sie die AppDelegate-Klasse , indem Sie die OpenUrl-Methodenüberladung wie folgt hinzufügen:

 ```csharp
 public override bool OpenUrl(UIApplication app, NSUrl url, NSDictionary options)
 {
     if (TodoItemManager.DefaultManager.CurrentClient.ResumeWithURL(app, url, options))
         return true;
     return base.OpenUrl(app, url, options);
 }
 ```

Fügen Sie die folgende Codezeile der FinishedLaunching-Methode vor dem Aufruf von LoadApplication():
```
 ```csharp
 App.Init(this);
 ```
```
Dieser Code stellt sicher, dass der Authentifikator initialisiert wird, bevor die App geladen wird.
Öffnen Sie Info.plist, und fügen Sie einen URL-Typ hinzu. Legen Sie den Bezeichner auf einen Namen Ihrer Wahl, die URL-Schemas auf das URL-Schema für Ihre App und die Rolle auf "Keine" fest.
Erstellen Sie die App neu, führen Sie sie aus, und melden Sie sich dann mit dem von Ihnen ausgewählten Authentifizierungsanbieter an, und stellen Sie sicher, dass Sie als authentifizierter Benutzer auf Daten zugreifen können.

Hinzufügen der Authentifizierung zu Windows 10-App-Projekten (einschließlich Phone)

In diesem Abschnitt wird gezeigt, wie Sie die IAuthenticate-Schnittstelle in den Windows 10-App-Projekten implementieren. Die gleichen Schritte gelten für Projekte der Universellen Windows-Plattform (UWP), aber unter Verwendung des UWP-Projekts mit den angegebenen Änderungen. Überspringen Sie diesen Abschnitt, wenn Sie keine Windows-Geräte unterstützen.

Klicken Sie in Visual Studio mit der rechten Maustaste auf das UWP-Projekt und dann als Startprojekt festlegen.
Drücken Sie F5, um das Projekt im Debugger zu starten, und stellen Sie dann sicher, dass eine unbehandelte Ausnahme mit einem Statuscode von 401 (Nicht autorisiert) ausgelöst wird, nachdem die App gestartet wurde. Die 401-Antwort erfolgt, da der Zugriff auf das Back-End nur auf autorisierte Benutzer beschränkt ist.
Öffnen Sie MainPage.xaml.cs für das Windows-App-Projekt, und fügen Sie die folgenden using Anweisungen hinzu:
```
 ```csharp
 using Microsoft.WindowsAzure.MobileServices;
 using System.Threading.Tasks;
 using Windows.UI.Popups;
 using <your_Portable_Class_Library_namespace>;
 ```
```
Ersetzen Sie <your_Portable_Class_Library_namespace> durch den Namespace für Ihre portable Klassenbibliothek.
Aktualisieren Sie die MainPage-Klasse , um die IAuthenticate-Schnittstelle wie folgt zu implementieren:
```
 public sealed partial class MainPage : IAuthenticate
```

Aktualisieren Sie die MainPage-Klasse , indem Sie ein MobileServiceUser-Feld und eine Authenticate-Methode hinzufügen, die von der IAuthenticate-Schnittstelle wie folgt erforderlich ist:

 ```csharp
 // Define an authenticated user.
 private MobileServiceUser user;

 public async Task<bool> Authenticate()
 {
     string message = string.Empty;
     var success = false;

     try
     {
         // Sign in with Facebook login using a server-managed flow.
         if (user == null)
         {
             user = await TodoItemManager.DefaultManager.CurrentClient
                 .LoginAsync(MobileServiceAuthenticationProvider.Facebook, "{url_scheme_of_your_app}");
             if (user != null)
             {
                 success = true;
                 message = string.Format("You are now signed-in as {0}.", user.UserId);
             }
         }

     }
     catch (Exception ex)
     {
         message = string.Format("Authentication Failed: {0}", ex.Message);
     }

     // Display the success or failure message.
     await new MessageDialog(message, "Sign-in result").ShowAsync();

     return success;
 }
 ```