Hinzufügen von Authentifizierung zu Ihrer Xamarin Forms-App

Artikel
06/25/2019

Übersicht

In diesem Thema wird die Authentifizierung von Benutzern einer mobilen App Service-App über Ihre Clientanwendung veranschaulicht. In diesem Tutorial fügen Sie dem Xamarin Forms-Schnellstartprojekt durch Verwenden eines von App Service unterstützten Identitätsanbieters eine Authentifizierungsfunktion hinzu. Nach der erfolgreichen Authentifizierung und Autorisierung durch Ihre mobile App wird die Benutzer-ID angezeigt, und Sie erhalten Zugriff auf beschränkte Tabellendaten.

Voraussetzungen

Wir empfehlen Ihnen, zuerst das Tutorial Erstellen einer Xamarin.Forms-App durchzuarbeiten, um für dieses Tutorial das bestmögliche Ergebnis zu erzielen. Nach Abschluss dieses Tutorials verfügen Sie über ein Xamarin Forms-Projekt, bei dem es sich um eine TodoList-App für mehrere Plattformen handelt.

Wenn Sie das heruntergeladene Schnellstart-Serverprojekt nicht verwenden, müssen Sie Ihrem Projekt das Authentifizierungs-Erweiterungspaket hinzufügen. Weitere Informationen zu Servererweiterungspaketen finden Sie unter Work with the .NET backend server SDK for Azure Mobile Apps(in englischer Sprache).

Registrieren Ihrer App für die Authentifizierung und Konfigurieren von 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.

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

Hinzufügen Ihrer App zu den zulässigen externen Umleitungs-URLs

Eine sichere Authentifizierung erfordert, dass Sie ein neues URL-Schema für Ihre App definieren. Dies ermöglicht dem Authentifizierungssystem die erneute Umleitung an Ihre App, sobald der Authentifizierungsprozess abgeschlossen ist. In diesem Tutorial verwenden wir ausschließlich das URL-Schema appname. Sie können jedoch ein beliebiges URL-Schema auswählen und verwenden. Es sollte für Ihre mobile Anwendung eindeutig sein. So aktivieren Sie die Umleitung auf der Serverseite

Wählen Sie im Azure-Portal App Service aus.
Klicken Sie auf die Menüoption Authentifizierung/Autorisierung.
Geben Sie in Zulässige externe Umleitungs-URLsurl_scheme_of_your_app://easyauth.callback ein. url_scheme_of_your_app steht in dieser Zeichenfolge für das URL-Schema für Ihre mobile Anwendung. Es sollte der normalen URL-Spezifikation für ein Protokoll folgen (nur aus Buchstaben und Zahlen bestehen und mit einem Buchstaben beginnen). Notieren Sie sich die gewählte Zeichenfolge, da Sie später Ihren mobilen Anwendungscode mehrfach mit dem URL-Schema anpassen müssen.
Klicken Sie auf OK.
Klicken Sie auf Speichern.

Einschränken von Berechtigungen für authentifizierte Benutzer

Standardmäßig können APIs auf Mobile Apps-Back-Ends anonym aufgerufen werden. Als Nächstes müssen Sie den Zugriff auf authentifizierte Clients beschränken.

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

Klicken Sie in den Einstellungen von Mobile Apps auf Einfache Tabellen, und wählen Sie Ihre Tabelle aus. Klicken Sie auf Berechtigungen ändern, wählen Sie für alle Berechtigungen Authenticated access only (Nur authentifizierter Zugriff) aus, und klicken Sie auf Speichern.
.NET-Back-End (C#):

Navigieren Sie im Serverprojekt zu ControllersTodoItemController.cs>. Fügen Sie das [Authorize]-Attribut der TodoItemController-Klasse wie folgt hinzu: Um den Zugriff auf bestimmte Methoden zu beschrä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-Back-End (über 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:
```
  table.access = 'authenticated';
```
Ausführlichere Informationen finden Sie unter Erzwingen der Authentifizierung für den Zugriff auf Tabellen. Informationen zum Herunterladen des Schnellstart-Codeprojekts von Ihrer Website finden Sie unter Herunterladen des Schnellstart-Codeprojekts für das Node.js-Back-End mithilfe von Git.

Hinzufügen der Authentifizierung zur portablen Klassenbibliothek

Mobile Apps verwendet die LoginAsync-Erweiterungsmethode auf dem MobileServiceClient, um für einen Benutzer die Anmeldung mit der App Service-Authentifizierung durchzuführen. In diesem Beispiel wird ein vom Server verwalteter Authentifizierungsfluss verwendet, bei dem in der App die Anmeldeoberfläche des Anbieters angezeigt wird. Weitere Informationen finden Sie unter Vom Server verwaltete Authentifizierung. Sie können stattdessen auch die vom Client verwaltete Authentifizierung verwenden, um in Ihrer Produktions-App eine bessere Benutzeroberfläche bereitzustellen.

Für die Authentifizierung mit einem Xamarin Forms-Projekt definieren Sie in der portablen Klassenbibliothek für die App eine IAuthenticate-Schnittstelle. Fügen Sie anschließend der Benutzeroberfläche, die in der portablen Klassenbibliothek definiert ist, die Schaltfläche Anmelden hinzu. Diese Schaltfläche wird zum Starten der Authentifizierung verwendet. Nach der erfolgreichen Authentifizierung werden die Daten aus dem mobilen App-Back-End geladen.

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

Öffnen Visual Studio oder Xamarin Studio App.cs aus dem Projekt mit Portable im Namen , das portable Klassenbibliotheksprojekt ist, und fügen Sie dann die folgende Anweisung using 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();
 }
 ```
```

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

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

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

Öffnen Sie die Datei „TodoList.xaml“ des Projekts „Portable Klassenbibliothek“, und 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 vom Server verwaltete Authentifizierung mit Ihrem mobilen App-Back-End aus.
Öffnen Sie die Datei „TodoList.xaml.cs“ im Projekt „Portable Klassenbibliothek“, und fügen Sie der TodoList -Klasse dann das folgende Feld hinzu:
```
 ```csharp
 // Track whether the user has authenticated.
 bool authenticated = false;
 ```
```

Ersetzen Sie die vorhandene 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;
     }
 }
 ```

Mit diesem Code wird sichergestellt, dass die Daten für den Dienst erst aktualisiert werden, nachdem Sie authentifiziert wurden.

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 die Änderungen, und erstellen Sie das Projekt „Portable Klassenbibliothek“ erneut, um sicherzustellen, dass es fehlerfrei ist.

Hinzufügen der Authentifizierung zur Android-App

In diesem Abschnitt wird das Implementieren der IAuthenticate -Schnittstelle im Android-App-Projekt gezeigt. Ü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 Projekt droid, und klicken Sie dann auf Als Startprojekt festlegen.
Drücken Sie F5, um das Projekt im Debugger zu starten. Stellen Sie anschließend sicher, dass ein Ausnahmefehler mit dem Statuscode 401 (Nicht autorisiert) ausgelöst wird, nachdem die App gestartet wurde. Der 401-Code wird angezeigt, weil der Zugriff auf dem Back-End nur auf autorisierte Benutzer beschränkt ist.
Öffnen Sie im Android-Projekt die Datei „MainActivity.cs“, und fügen Sie die folgenden using -Anweisungen hinzu:
```
 ```csharp
 using Microsoft.WindowsAzure.MobileServices;
 using System.Threading.Tasks;
 ```
```

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

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

Aktualisieren Sie die MainActivity-Klasse, indem Sie wie folgt ein MobileServiceUser-Feld und eine Authenticate-Methode hinzufügen, die für die IAuthenticate-Schnittstelle 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();
 }
 ```

Falls Sie einen anderen Identitätsanbieter als Facebook verwenden, müssen Sie für MobileServiceAuthenticationProvidereinen anderen Wert auswählen.

Aktualisieren Sie die Datei AndroidManifest.xml, indem Sie im <application>-Element folgenden XML-Code 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 der OnCreate-Methode der MainActivity-Klasse vor dem Aufruf von LoadApplication() den folgenden Code hinzu:
```
 ```csharp
 // Initialize the authenticator before loading the app.
 App.Init((IAuthenticate)this);
 ```
```
Mit diesem Code wird sichergestellt, dass der Authentifikator vor dem Laden der App initialisiert wird.
Erstellen Sie die App erneut, und führen Sie sie aus. Melden Sie sich dann über den ausgewählten Authentifizierungsanbieter an, und stellen Sie sicher, dass Sie als authentifizierter Benutzer auf Daten zugreifen können.

Problembehandlung

Die Anwendung ist mit dem Fehler Java.Lang.NoSuchMethodError: No static method startActivity abgestürzt.

In einigen Fällen werden Konflikte in den Unterstützungspaketen nur als Warnung in Visual Studio angezeigt, aber die Anwendung stürzt zur Laufzeit mit dieser Ausnahme ab. In diesem Fall müssen Sie sicherstellen, dass alle Unterstützungspakete, auf die in Ihrem Projekt verwiesen wird, die gleiche Version aufweisen. Das Azure Mobile Apps-NuGet-Paket hat eine Xamarin.Android.Support.CustomTabs-Abhängigkeit für die Android-Plattform. Wenn also das Projekt neuere Unterstützungspakete verwendet, müssen Sie dieses Paket direkt mit der erforderlichen Version installieren, um Konflikte zu vermeiden.

Hinzufügen der Authentifizierung zur iOS-App

In diesem Abschnitt wird das Implementieren der IAuthenticate -Schnittstelle im iOS-App-Projekt gezeigt. Ü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 klicken Sie dann auf Als Startprojekt festlegen.
Drücken Sie F5, um das Projekt im Debugger zu starten. Stellen Sie anschließend sicher, dass ein Ausnahmefehler mit dem Statuscode 401 (Nicht autorisiert) ausgelöst wird, nachdem die App gestartet wurde. Die 401-Antwort wird angezeigt, weil der Zugriff auf dem Back-End nur auf autorisierte Benutzer beschränkt ist.
Öffnen Sie die Datei „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 wie folgt, um die IAuthenticate-Schnittstelle zu implementieren:

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

Aktualisieren Sie die AppDelegate-Klasse, indem Sie wie folgt ein MobileServiceUser-Feld und eine Authenticate-Methode hinzufügen, die für die IAuthenticate-Schnittstelle 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;
 }
 ```

Falls Sie einen anderen Identitätsanbieter als Facebook verwenden, müssen Sie für [MobileServiceAuthenticationProvider] einen anderen Wert auswählen.

Aktualisieren Sie die Klasse AppDelegate, 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 der FinishedLaunching-Methode vor dem Aufruf von LoadApplication() die folgende Codezeile hinzu:
```
 ```csharp
 App.Init(this);
 ```
```
So wird sichergestellt, dass der Authentifikator vor dem Laden der App initialisiert wird.
Öffnen Sie „Info.plist“, und fügen Sie einen URL-Typ hinzu. Legen Sie als Bezeichner einen Namen Ihrer Wahl fest. Legen Sie außerdem für URL-Schemas das URL-Schema für Ihre App und für Rolle die Option „Keine“ fest.
Erstellen Sie die App erneut, und führen Sie sie aus. Melden Sie sich dann über den 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 Windows Phone)

In diesem Abschnitt wird das Implementieren der IAuthenticate-Schnittstelle in Windows 10-App-Projekten gezeigt. Die gleichen Schritte gelten auch für UWP-Projekte (Universelle Windows-Plattform), nur eben entsprechend mit Verwendung des UWP-Projekts (mit den angegebenen Änderungen). Überspringen Sie diesen Abschnitt, wenn Sie Windows-Geräte nicht unterstützen.

Klicken Sie in Visual Studio mit der rechten Maustaste auf das Projekt UWP, und klicken Sie dann auf Als Startprojekt festlegen.
Drücken Sie F5, um das Projekt im Debugger zu starten. Stellen Sie anschließend sicher, dass ein Ausnahmefehler mit dem Statuscode 401 (Nicht autorisiert) ausgelöst wird, nachdem die App gestartet wurde. Die 401-Antwort wird angezeigt, weil der Zugriff auf dem Back-End nur auf autorisierte Benutzer beschränkt ist.
Öffnen Sie die Datei „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 wie folgt, um die IAuthenticate-Schnittstelle zu implementieren:
```
 public sealed partial class MainPage : IAuthenticate
```

Aktualisieren Sie die MainPage-Klasse, indem Sie wie folgt ein MobileServiceUser-Feld und eine Authenticate-Methode hinzufügen, die für die IAuthenticate-Schnittstelle 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;
 }
 ```