Ajouter l’authentification à votre application Xamarin Forms

Article
06/25/2019

Vue d’ensemble

Cette rubrique montre comment authentifier les utilisateurs d'une application App Service Mobile App à partir de votre application cliente. Dans ce didacticiel, vous allez ajouter l’authentification au projet de démarrage rapide Xamarin Forms à l’aide d’un fournisseur d’identité pris en charge par App Service. Une fois l’utilisateur authentifié et autorisé par votre application Mobile App, la valeur de l’ID utilisateur s’affiche ; vous pouvez alors accéder aux données de table limitées.

Prérequis

Pour obtenir les meilleurs résultats avec ce didacticiel, nous vous recommandons de commencer par suivre le didacticiel Créer une application Xamarin.Forms. Après avoir terminé ce didacticiel, vous disposerez d’un projet Xamarin Forms qui est une application TodoList multiplateforme.

Si vous n’utilisez pas le projet de serveur du démarrage rapide téléchargé, vous devez ajouter le package d’extension d’authentification à votre projet. Pour plus d'informations sur les packages d'extension de serveur, consultez Fonctionnement avec le Kit de développement logiciel (SDK) du serveur principal .NET pour Azure Mobile Apps.

Inscription de votre application pour l'authentification et configuration d'App Services

Commencez par inscrire votre application auprès d’un site de fournisseur d’identité, puis définissez les informations d’identification générées par le fournisseur dans le serveur principal Mobile Apps.

Configurez votre fournisseur d’identité en suivant les instructions correspondantes :
Répétez les étapes précédentes pour chaque fournisseur que vous souhaitez prendre en charge dans votre application.

Ajouter votre application aux URL de redirection externes autorisées

L’authentification sécurisée nécessite de définir un nouveau schéma d’URL pour votre application. Cela permet au système d’authentification de vous rediriger vers votre application une fois le processus d’authentification terminé. Dans ce didacticiel, nous utilisons le schéma d’URL appname. Toutefois, vous pouvez utiliser le schéma d’URL de votre choix. Il doit être propre à votre application mobile. Pour activer la redirection côté serveur, procédez comme suit :

Dans le portail Azure, sélectionnez votre instance App Service.
Cliquez sur l’option de menu Authentication/Authorisation.
Dans URL de redirection externes autorisées, saisissez url_scheme_of_your_app://easyauth.callback. La chaîne url_scheme_of_your_app de cette chaîne est le schéma d’URL de votre application mobile. Elle doit être conforme à la spécification d’URL normale pour un protocole (utiliser des lettres et des chiffres uniquement et commencer par une lettre). Vous devez noter la chaîne que vous choisissez, dans la mesure où vous devez ajuster votre code d’application mobile avec le schéma d’URL à plusieurs endroits.
Cliquez sur OK.
Cliquez sur Enregistrer.

Restriction des autorisations pour les utilisateurs authentifiés

Par défaut, les API d’un serveur principal Mobile Apps peuvent être appelées de manière anonyme. Vous devez ensuite restreindre l’accès aux clients authentifiés uniquement.

Serveur principal Node.js (par le biais du Portail Azure) :

Dans vos paramètres de Mobile Apps, cliquez sur tables faciles , puis sélectionnez votre table. Cliquez sur Modifier les autorisations, sélectionnez Accès authentifié uniquement pour toutes les autorisations, puis cliquez sur Enregistrer.
Serveur principal .NET (C#) :

Dans le projet serveur, accédez à contrôleurs>TodoItemController. cs. Ajoutez l’attribut [Authorize] à la classe TodoItemController comme suit : Pour restreindre l’accès à des méthodes spécifiques, vous pouvez également appliquer cet attribut à ces méthodes uniquement au lieu de la classe. Publier à nouveau le projet de serveur
```
  [Authorize]
  public class TodoItemController : TableController<TodoItem>
```
Serveur principal Node.js (via le code Node.js) :

Pour demander l’authentification pour l’accès des tables, ajoutez la ligne suivante au script de serveur Node.js :
```
  table.access = 'authenticated';
```
Pour plus d’informations, consultez la section Procédure : exiger une authentification pour l’accès aux tables. Pour savoir comment télécharger le projet de code de démarrage rapide de votre site, consultez Procédure : télécharger le projet de code de démarrage rapide du serveur principal Node.js à l’aide de Git.

Ajout de l'authentification à la bibliothèque de classes portable

Mobile Apps utilise la méthode d’extension LoginAsync sur le MobileServiceClient pour connecter un utilisateur avec l’authentification App Service. Cet exemple utilise un flux d’authentification géré par le serveur qui affiche l’interface de connexion du fournisseur dans l’application. Pour plus d’informations, voir la rubrique Authentification gérée par le serveur. Pour offrir une meilleure expérience utilisateur dans votre application de production, vous devez plutôt envisager d’utiliser une authentification gérée par le client.

Pour vous authentifier auprès d’un projet Xamarin Forms, définissez une interface IAuthenticate dans la bibliothèque de classes portable de l’application. Ensuite, ajoutez un bouton Connexion à l’interface utilisateur définie dans la bibliothèque de classes portable que l’utilisateur devra sélectionner pour démarrer l’authentification. Une fois l’authentification effectuée, les données sont chargées depuis le serveur principal d’application mobile.

Implémentez l’interface IAuthenticate pour chaque plateforme prise en charge par votre application.

dans Visual Studio ou Xamarin Studio, ouvrez App. cs à partir du projet avec portable dans le nom, qui est un projet de bibliothèque de classes portable, puis ajoutez l’instruction suivante using :
```
 ```csharp
 using System.Threading.Tasks;
 ```
```
Dans App.cs, ajoutez la définition d’interface IAuthenticate suivante immédiatement avant la définition de classe App.
```
 ```csharp
 public interface IAuthenticate
 {
     Task<bool> Authenticate();
 }
 ```
```

Pour initialiser l’interface avec une implémentation propre à la plateforme, ajoutez les membres statiques suivants à la classe App.

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

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

Ouvrez TodoList.xaml à partir du projet de bibliothèque de classes portable, ajoutez l’élément bouton suivant dans l’élément de disposition buttonsPanel , après le bouton existant :
```
 ```xml
   <Button x:Name="loginButton" Text="Sign-in" MinimumHeightRequest="30"
     Clicked="loginButton_Clicked"/>
 ```
```
Ce bouton déclenche l’authentification gérée par le serveur auprès du serveur principal de votre application mobile.
Ouvrez TodoList.xaml.cs à partir du projet de bibliothèque de classes portable, puis ajoutez le champ suivant à la classe TodoList :
```
 ```csharp
 // Track whether the user has authenticated.
 bool authenticated = false;
 ```
```

Remplacez la méthode OnAppearing par le code suivant :

 ```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;
     }
 }
 ```

Ce code permet de s’assurer que les données seront actualisées par le service seulement une fois que vous vous serez authentifié.

Ajoutez le gestionnaire suivant pour l’événement Clicked à la classe TodoList :

 ```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);
 }
 ```

Enregistrez vos modifications et régénérez le projet de bibliothèque de classes portable en vérifiant qu’il ne contient aucune erreur.

Ajout de l'authentification à l'application Android

Cette section montre comment implémenter l’interface IAuthenticate dans le projet d’application Android. Vous pouvez ignorer cette section si vous n’utilisez pas d’appareils Android.

Dans Visual Studio ou Xamarin Studio, cliquez avec le bouton droit sur le projet droid, puis cliquez sur Définir comme projet de démarrage.
Appuyez sur F5 pour démarrer le projet dans le débogueur, puis vérifiez qu’une exception non prise en charge avec le code d’état 401 (Unauthorized) est déclenchée après le démarrage de l’application. Ce code 401 se produit car l’accès au serveur principal est limité aux seuls utilisateurs autorisés.

Ouvrez MainActivity.cs dans le projet Android et ajoutez les instructions using suivantes :

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

Mettez à jour la classe MainActivity pour implémenter l’interface IAuthenticate, comme suit :

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

Mettez à jour la classe MainActivity en ajoutant un champ MobileServiceUser et une méthode Authenticate requise par l’interface IAuthenticate, comme suit :

 ```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();
 }
 ```

Si vous utilisez un fournisseur d’identité différent de Facebook, choisissez une autre valeur pour MobileServiceAuthenticationProvider.

Mettez à jour le fichier AndroidManifest.xml en ajoutant le code XML suivant à l’intérieur de l’élément <application> :

<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>

Remplacez {url_scheme_of_your_app} par votre modèle d’URL.

Ajoutez le code suivant à la méthode OnCreate de la classe MainActivity avant l’appel à LoadApplication() :
```
 ```csharp
 // Initialize the authenticator before loading the app.
 App.Init((IAuthenticate)this);
 ```
```
Ce code permet de garantir que l’authentificateur sera initialisé avant le chargement de l’application.
Recompilez et exécutez l’application, puis connectez-vous avec le fournisseur d’authentification choisi et vérifiez que vous êtes en mesure d’accéder aux données en tant qu’utilisateur authentifié.

Dépannage

L’application a planté avec Java.Lang.NoSuchMethodError: No static method startActivity

Dans certains cas, des conflits dans les packages de support sont affichés seulement en tant qu’avertissement dans Visual Studio, mais l’application plante avec cette exception lors de l’exécution. Dans ce cas, vous devez vérifier que tous les packages de support référencés dans votre projet ont la même version. Le package NuGet Azure Mobile Apps comporte une dépendance Xamarin.Android.Support.CustomTabs à la plateforme Android. Par conséquent, si votre projet utilise des packages de support plus récents, vous devez installer directement ce package avec la version requise pour éviter les conflits.

Ajout de l'authentification à l'application iOS

Cette section montre comment implémenter l’interface IAuthenticate dans le projet d’application iOS. Vous pouvez ignorer cette section si vous n’utilisez pas d’appareils iOS.

Dans Visual Studio ou Xamarin Studio, cliquez avec le bouton droit sur le projet iOS, puis cliquez surDéfinir comme projet de démarrage.
Appuyez sur F5 pour démarrer le projet dans le débogueur, puis vérifiez qu’une exception non prise en charge avec le code d’état 401 (Unauthorized) est déclenchée après le démarrage de l’application. Cette réponse 401 se produit car l’accès au serveur principal est limité aux seuls utilisateurs autorisés.

Ouvrez AppDelegate.cs dans le projet iOS et ajoutez les instructions using suivantes :

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

Mettez à jour la classe AppDelegate pour implémenter l’interface IAuthenticate, comme suit :

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

Mettez à jour la classe AppDelegate en ajoutant un champ MobileServiceUser et une méthode Authenticate requise par l’interface IAuthenticate, comme suit :

 ```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;
 }
 ```

Si vous utilisez un fournisseur d’identité différent de Facebook, choisissez une autre valeur pour [MobileServiceAuthenticationProvider].

Mettez à jour la classe AppDelegate en ajoutant la surcharge de méthode OpenUrl, comme suit :

 ```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);
 }
 ```

Ajoutez la ligne de code suivante à la méthode FinishedLaunching avant l’appel à LoadApplication() :
```
 ```csharp
 App.Init(this);
 ```
```
Ce code permet de garantir que l’authentificateur sera initialisé avant le chargement de l’application.
Ouvrez le fichier Info.plist et ajoutez un Type d’URL. Définissez l’Identificateur sur un nom de votre choix, les Schémas d’URL sur le modèle d’URL pour votre application, et le Rôle sur Aucun.
Recompilez et exécutez l’application, puis connectez-vous avec le fournisseur d’authentification choisi et vérifiez que vous êtes en mesure d’accéder aux données en tant qu’utilisateur authentifié.

Ajout de l’authentification à des projets d’application Windows 10 (y compris Windows Phone)

Cette section montre comment implémenter l’interface IAuthenticate dans les projets d’application Windows 10. Les mêmes étapes s’appliquent aux projets de plateforme Windows universelle (UWP), mais en utilisant le projet UWP (comportant des modifications indiquées). Vous pouvez ignorer cette section si vous n’utilisez pas d’appareils Windows.

Dans Visual Studio, cliquez avec le bouton droit sur le projet UWP, puis cliquez sur Définir comme projet de démarrage.
Appuyez sur F5 pour démarrer le projet dans le débogueur, puis vérifiez qu’une exception non prise en charge avec le code d’état 401 (Unauthorized) est déclenchée après le démarrage de l’application. Cette réponse 401 se produit car l’accès au serveur principal est limité aux seuls utilisateurs autorisés.
Ouvrez MainPage.xaml.cs dans le projet d’application Windows et ajoutez l’instruction using suivante :
```
 ```csharp
 using Microsoft.WindowsAzure.MobileServices;
 using System.Threading.Tasks;
 using Windows.UI.Popups;
 using <your_Portable_Class_Library_namespace>;
 ```
```
Remplacez <your_Portable_Class_Library_namespace> par l’espace de noms de votre bibliothèque de classes portable.
Mettez à jour la classe MainPage pour implémenter l’interface IAuthenticate, comme suit :
```
 public sealed partial class MainPage : IAuthenticate
```

Mettez à jour la classe MainPage en ajoutant un champ MobileServiceUser et une méthode Authenticate requise par l’interface IAuthenticate, comme suit :

 ```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;
 }
 ```