Ajout de l'authentification à votre application Xamarin.iOS

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

Vous devez commencer par suivre le didacticiel Création d’une application Xamarin.iOS. 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.

Dans Visual Studio ou Xamarin Studio, exécutez le projet client sur un appareil ou un émulateur. Vérifiez qu'une exception non gérée avec un code d'état 401 (Non autorisé) est générée après le démarrage de l'application. L’échec est consigné dans la console du débogueur. Ainsi, dans Visual Studio, vous devez voir l’échec dans la fenêtre de sortie.

Cet échec non autorisé se produit car l’application tente d’accéder à votre backend Mobile App en tant qu’utilisateur non authentifié. La table TodoItem nécessite désormais l’authentification.

Ensuite, vous mettrez à jour l’application cliente pour demander des ressources au backend Mobile App avec un utilisateur authentifié.

Ajout de l'authentification à l'application

Dans cette section, vous allez modifier l'application de façon à afficher un écran de connexion avant d'afficher des données. Quand l’application démarre, elle ne se connecte pas à votre service App Service et n’affiche pas de données. Après le premier geste d'actualisation de l'utilisateur, l'écran de connexion s'affiche. Une fois la connexion réussie, la liste des tâches s'affiche.

Dans le projet client, ouvrez le fichier QSTodoService.cs et ajoutez l’instruction suivante et MobileServiceUser avec l’accesseur à la classe QSTodoService :
```
using UIKit;

// Logged in user
private MobileServiceUser user;
public MobileServiceUser User { get { return user; } }
```

Ajoutez une nouvelle méthode nommée Authenticate à QSTodoService avec la définition suivante :

public async Task Authenticate(UIViewController view)
{
    try
    {
        AppDelegate.ResumeWithURL = url => url.Scheme == "{url_scheme_of_your_app}" && client.ResumeWithURL(url);
        user = await client.LoginAsync(view, MobileServiceAuthenticationProvider.Facebook, "{url_scheme_of_your_app}");
    }
    catch (Exception ex)
    {
        Console.Error.WriteLine (@"ERROR - AUTHENTICATION FAILED {0}", ex.Message);
    }
}

Notes

Si vous utilisez un autre fournisseur d’identité que Facebook, remplacez la valeur passée à la méthode LoginAsync ci-dessus par l’une des valeurs suivantes : MicrosoftAccount, Twitter, Google ou WindowsAzureActiveDirectory.

Ouvrez QSTodoListViewController.cs. Modifiez la définition de méthode de ViewDidLoad pour supprimer l’appel à RefreshAsync() vers la fin :

public override async void ViewDidLoad ()
{
    base.ViewDidLoad ();

    todoService = QSTodoService.DefaultService;
    await todoService.InitializeStoreAsync();

    RefreshControl.ValueChanged += async (sender, e) => {
        await RefreshAsync();
    }

    // Comment out the call to RefreshAsync
    // await RefreshAsync();
}

Modifiez la méthode RefreshAsync pour vous authentifier si la propriété User a la valeur null. Ajoutez le code suivant en haut de la définition de méthode :

// start of RefreshAsync method
if (todoService.User == null) {
    await QSTodoService.DefaultService.Authenticate(this);
    if (todoService.User == null) {
        Console.WriteLine("couldn't login!!");
        return;
    }
}
// rest of RefreshAsync method

Ouvrez AppDelegate.cs et ajoutez la méthode suivante :

public override bool OpenUrl(UIApplication app, NSUrl url, NSDictionary options)
{
    if (client.ResumeWithURL(app, url, options))
        return true;
    return base.OpenUrl(app, url, options);
}

Ouvrez le fichier Info.plist et accédez à Types d’URL dans la section Avancé. À présent, configurez l’identificateur et les schémas d’URL de votre type d’URL et cliquez sur Ajouter un type d’URL. Les schémas d’URL doivent être les mêmes que votre {url_scheme_of_your_app}.
Dans Visual Studio, connecté à votre hôte Mac ou Visual Studio pour Mac, exécutez le projet client ciblant un appareil ou un émulateur. Vérifiez que l'application n'affiche aucune donnée.

Effectuez le geste d'actualisation en affichant la liste des éléments, ce qui fait apparaître l'écran de connexion. Une fois que vous avez entré des informations d'identification valides, l'application affiche la liste des tâches et vous pouvez mettre à jour les données.

Partager via