Ajouter l’authentification à votre application Windows

Article
2019-06-25

Android
Cordova
iOS
Windows
Xamarin.Android
Xamarin.Forms
Xamarin.iOS

Aperçu

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

Ce tutoriel est basé sur le guide de démarrage rapide Mobile Apps. Vous devez d’abord suivre le didacticiel Bien démarrer avec Mobile Apps.

Inscrire votre application pour l’authentification et configurer App Service

Tout d’abord, vous devez inscrire votre application sur le site d’un fournisseur d’identité, puis définir les informations d’identification générées par le fournisseur dans le back-end Mobile Apps.

Configurez votre fournisseur d’identité préféré en suivant les instructions spécifiques au fournisseur :
- Azure Active Directory
- Facebook
- Google
- Microsoft
- twitter
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 externe autorisées

L’authentification sécurisée nécessite que vous définissiez un nouveau schéma d’URL pour votre application. Cela permet au système d’authentification de revenir à votre application une fois le processus d’authentification terminé. Dans ce tutoriel, nous utilisons le schéma d’URL nom d’application dans l’ensemble. Toutefois, vous pouvez utiliser n’importe quel schéma d’URL que vous choisissez. Il doit être unique à votre application mobile. Pour activer la redirection côté serveur :

Dans le portail Azure, sélectionnez votre App Service.
Cliquez sur l’option de menu Authentification /Autorisation.
Dans les URL de redirection externe autorisées , entrez url_scheme_of_your_app://easyauth.callback. Le url_scheme_of_your_app dans cette chaîne de caractères est le schéma d'URL de votre application mobile. Il doit suivre la spécification d’URL normale pour un protocole (utilisez uniquement des lettres et des chiffres, puis commencez par une lettre). Vous devez noter la chaîne que vous choisissez, car vous devez ajuster votre code d’application mobile avec le schéma d’URL à plusieurs endroits.
Cliquez sur Enregistrer.

Restreindre les autorisations aux utilisateurs authentifiés

Par défaut, les API d’un back-end Mobile Apps peuvent être appelées anonymement. Ensuite, vous devez restreindre l’accès aux clients authentifiés uniquement.

Node.js back-end (via le portail Azure) :

Dans vos paramètres Mobile Apps, cliquez sur Tables faciles et 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 de serveur, accédez à Controllers>TodoItemController.cs. Ajoutez l’attribut [Authorize] à la classe TodoItemController, comme suit. Pour restreindre l’accès uniquement à des méthodes spécifiques, vous pouvez également appliquer cet attribut uniquement à ces méthodes au lieu de la classe. Republiez le projet de serveur.
```
  [Authorize]
  public class TodoItemController : TableController<TodoItem>
```
Node.js back-end (via Node.js code) :

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

À présent, vous pouvez vérifier que l’accès anonyme à votre back-end a été désactivé. Avec le projet d’application UWP défini comme projet de démarrage, déployez et exécutez l’application ; vérifiez qu’une exception non gérée avec un code d’état 401 (non autorisé) est déclenchée après le démarrage de l’application. Cela se produit parce que l’application tente d’accéder à votre code d’application mobile en tant qu’utilisateur non authentifié, mais la table TodoItem nécessite désormais l’authentification.

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

Ajouter l’authentification à l’application

Dans le fichier projet d’application UWP MainPage.xaml.cs et 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 avec une connexion Facebook. Si vous utilisez un fournisseur d’identité autre que 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 un bouton se connecter à l’application 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 à l’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 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 à l’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, puis cliquez sur le bouton Ajouter. Configurez maintenant les propriétés de la déclaration du protocole. Dans nom d’affichage, ajoutez le nom que vous souhaitez afficher aux utilisateurs de votre application. Dans Nom: ajoutez votre {url_scheme_of_your_app}.
Appuyez sur la touche F5 pour exécuter l’application, cliquez sur le bouton Se connecter, puis connectez-vous à l’application avec votre fournisseur d’identité choisi. Une fois votre connexion réussie, l’application s’exécute sans erreur et vous pouvez interroger votre back-end et effectuer des mises à jour des données.

Stocker le jeton d’authentification sur le client

L’exemple précédent montre une connexion standard, ce qui oblige le client à contacter le fournisseur d’identité et l’App Service chaque fois que l’application démarre. Non seulement cette méthode est inefficace, vous pouvez rencontrer des problèmes liés à l’utilisation si de nombreux clients essaient de démarrer votre application en même temps. Une meilleure approche consiste à mettre en cache le jeton d’autorisation retourné par votre App Service et à essayer d’utiliser ce dernier avant d’utiliser une connexion basée sur un fournisseur.

Remarque

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

Dans le fichier projet MainPage.xaml.cs, ajoutez les suivantes à l’aide d’instructions :
```
 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 de AuthenticateAsync, l’application tente d’utiliser les informations d’identification stockées dans le PasswordVault pour accéder au service. Une connexion régulière est également effectuée lorsqu’il n’y a pas d’informations d’identification stockées.

Remarque

Un jeton mis en cache peut être expiré et l’expiration du jeton peut également se produire après l’authentification lorsque l’application est en cours d’utilisation. Pour savoir comment déterminer si un jeton a expiré, consultez Vérifier les jetons d’authentification expirés. Pour obtenir une solution permettant de gérer les erreurs d’autorisation liées aux jetons arrivant à expiration, consultez la publication Mise en cache et gestion des jetons expirés dans le KIT de développement logiciel (SDK) managé Azure Mobile Services.

Redémarrez l’application deux fois.

Notez que lors du premier démarrage, la connexion avec le fournisseur est à nouveau requise. Toutefois, lors du deuxième redémarrage, les informations d’identification mises en cache sont utilisées et la connexion est ignorée.

Étapes suivantes

Maintenant que vous avez terminé ce didacticiel d’authentification de base, envisagez de passer à l’un des didacticiels suivants :

Ajouter des notifications Push à votre application
Découvrez comment ajouter la prise en charge des notifications Push à votre application et configurer votre back-end d’application mobile pour utiliser Azure Notification Hubs pour envoyer des notifications Push.
Activer la synchronisation hors connexion pour votre application
Découvrez comment ajouter la prise en charge hors connexion de votre application à l’aide d’un serveur principal d’application mobile. La synchronisation hors connexion permet aux utilisateurs finaux d’interagir avec une application mobile (affichage, ajout ou modification de données), même s’il n’existe aucune connexion réseau.

Partager via