Ajout de l'authentification à votre application Windows

Article
06/25/2019

Vue d’ensemble

Cette rubrique indique comment ajouter l'authentification basée sur le cloud à votre application mobile. Dans ce didacticiel, vous ajoutez l'authentification au projet de démarrage rapide de plateforme Windows universelle pour Mobile Apps à l'aide d'un fournisseur d'identité pris en charge par Azure App Service. Une fois l'utilisateur authentifié et autorisé par votre backend d'application Mobile, la valeur de l'ID utilisateur s'affiche.

Ce didacticiel est basé sur le démarrage rapide de Mobile Apps. Vous devez commencer par suivre le didacticiel Prise en main de Mobile Apps.

Inscription de votre application pour l’authentification et configuration d’App Service

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

À présent, vous pouvez vérifier que l’accès anonyme à votre serveur principal a été désactivé. Avec le projet d’application Windows défini en tant que projet de démarrage, déployez et exécutez l'application, et vérifiez qu'une exception non prise en charge avec le code d'état 401 (Non autorisé) est déclenchée après le démarrage de l'application. Cette exception se produit, car l’application tente d’accéder à votre code Mobile App en tant qu’utilisateur non authentifié, alors que la table TodoItem requiert désormais une authentification.

Ensuite, vous allez mettre à jour l'application pour authentifier les utilisateurs avant de demander des ressources à partir de votre service App Service.

Ajout de l'authentification à l'application

Dans le fichier de projet d’application UWP MainPage.xaml.cs, ajoutez l’extrait de code suivant :

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

Ce code authentifie l’utilisateur à l’aide d’une connexion Facebook. Si vous utilisez un fournisseur d'identité différent de Facebook, remplacez la valeur de MobileServiceAuthenticationProvider ci-dessus par la valeur de votre fournisseur.

Remplacez la méthode OnNavigatedTo() dans MainPage.xaml.cs. Ensuite, vous allez ajouter à l’application un bouton Connexion qui déclenche l’authentification.

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

Ajoutez l’extrait de code suivant dans MainPage.xaml.cs :

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

Ouvrez le fichier de projet MainPage.xaml, recherchez l’élément qui définit le bouton Enregistrer et remplacez-le par le code suivant :

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

Ajoutez l’extrait de code suivant dans App.xaml.cs :

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

Ouvrez le fichier Package.appxmanifest, accédez à Déclarations, dans la liste déroulante Déclarations disponibles, sélectionnez Protocole et cliquez sur le bouton Ajouter. À présent, configurez les propriétés de la déclaration Protocole. Dans Nom d’affichage, ajoutez le nom que vous souhaitez montrer aux utilisateurs de votre application. Dans Nom, ajoutez votre {url_scheme_of_your_app}.
Appuyez sur la touche F5 pour exécuter l'application, puis cliquez sur le bouton Se connecter pour vous connecter à l'application avec le fournisseur d'identité choisi. Lorsque vous êtes connecté, l'application s'exécute sans erreur, et vous pouvez exécuter des requêtes sur votre backend et mettre à jour les données.

Stockage du jeton d’authentification sur le client

L’exemple précédent montrait une connexion standard, qui nécessite que le client contacte le fournisseur d’identité et le service d’application à chaque démarrage de l’application. Cette méthode est non seulement inefficace, mais vous pouvez rencontrer des problèmes d'utilisation si de nombreux clients tentent de lancer votre application en même temps. Une meilleure approche consiste à mettre en cache le jeton d’autorisation renvoyé par votre service d’application et à l’utiliser en premier avant de faire appel à la connexion via un fournisseur.

Notes

Vous pouvez mettre en cache le jeton émis par App Services, que vous utilisiez l’authentification gérée par un client ou gérée par un service. Ce didacticiel utilise cette dernière.

Ouvrez le fichier de projet MainPage.xaml.cs et ajoutez les instructions using suivantes :
```
 using System.Linq;        
 using Windows.Security.Credentials;
```

Remplacez la méthode AuthenticateAsync par le code suivant :

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

Dans cette version d’AuthenticateAsync, l’application essaie d’utiliser les informations d’identification stockées dans le coffre de mots de passe pour accéder au service. Une connexion normale est également effectuée quand il n'y a pas d'informations d'identification stockées.

Notes

Un jeton en cache peut avoir expiré et l'expiration des jetons peut également survenir après l'authentification, alors que l'application est en cours d'utilisation. Pour savoir comment déterminer si un jeton est arrivé à expiration, consultez Rechercher les jetons d'authentification expirés. Pour une solution permettant de gérer les erreurs d'autorisation liées à des jetons expirés, consultez le post Mise en cache et gestion des jetons expirés dans le Kit de développement logiciel (SDK) managé d'Azure Mobile Services.

Redémarrez l'application deux fois.

Notez que lors du premier démarrage, la connexion avec le fournisseur est à nouveau requise. Cependant, lors du second redémarrage, les informations d'identification mises en cache sont utilisées et l'étape de connexion est ignorée.

Étapes suivantes

Maintenant que vous avez terminé ce didacticiel sur l'authentification de base, vous pouvez passer à l'un des didacticiels suivants :

Ajout de notifications Push à votre application
Apprenez à ajouter la prise en charge des notifications Push à votre application et à configurer le serveur principal d’applications mobiles pour utiliser Azure Notification Hubs afin d’envoyer des notifications Push.
Activer la synchronisation hors connexion pour votre application
Apprenez à ajouter une prise en charge hors connexion à votre application à l’aide d’un serveur principal d’applications mobiles. La synchronisation hors connexion permet aux utilisateurs finaux d’interagir avec une application mobile, en affichant, en ajoutant ou en modifiant des données, même en l’absence de connexion réseau.

Partager via