Ajout de l'authentification à votre application Xamarin.iOS

Dans ce tutoriel, vous ajoutez l’authentification Microsoft au projet TodoApp à l’aide de l’ID Microsoft Entra. Avant de suivre ce didacticiel, vérifiez que vous avez créé le projet et déployé le back-end.

Ajouter l’authentification à votre service principal

Votre service principal est un service standard ASP.NET 6. Tout tutoriel qui vous montre comment activer l’authentification pour un service ASP.NET 6 fonctionne avec Azure Mobile Apps.

Pour activer l’authentification Microsoft Entra pour votre service principal, vous devez :

• Enregistrer une application avec Microsoft Entra ID.
• Ajoutez des case activée d’authentification au projet back-end ASP.NET 6.

Enregistrement de l’application

Tout d’abord, inscrivez l’API web dans votre tenant Microsoft Entra, puis ajoutez une étendue en effectuant les étapes suivantes :

1. Connectez-vous au portail Azure.

2. Si vous avez accès à plusieurs locataires, utilisez le filtre Répertoires + abonnements dans le menu supérieur pour basculer vers le locataire dans lequel vous souhaitez inscrire l’application.

3. Recherchez et sélectionnez Microsoft Entra ID.

4. Sous Gérer, sélectionnez Inscriptions d’applications>Nouvelle inscription.

   • Nom : entrez un nom pour votre application, par exemple, TodoApp Quickstart. Les utilisateurs de votre application verront ce nom. Vous pourrez le modifier par la suite.
   • Types de comptes pris en charge : comptes dans n’importe quel annuaire organisationnel (n’importe quel répertoire Microsoft Entra - Multilocataire) et comptes Microsoft personnels (par exemple, Skype, Xbox)

5. Sélectionnez Inscrire.

6. Sous Gérer, sélectionnez Exposer une API>Ajouter une étendue.

7. Pour l’URI d’ID d’application, acceptez la valeur par défaut en sélectionnant Enregistrer et continuer.

8. Entrez les informations suivantes :

   • Nom de l’étendue : access_as_user
   • Qui peut donner son consentement ? : Administrateurs et utilisateurs
   • Nom d’affichage du consentement administrateur : Access TodoApp
   • Description du consentement de l’administrateur : Allows the app to access TodoApp as the signed-in user.
   • Nom d’affichage du consentement utilisateur : Access TodoApp
   • Description du consentement de l’utilisateur : Allow the app to access TodoApp on your behalf.
   • État : Activé

9. Sélectionnez Ajouter une étendue pour finaliser l’ajout de l’étendue.

10. Notez la valeur de l’étendue, similaire à api://<client-id>/access_as_user (appelée étendue de l’API web). Vous avez besoin de l’étendue lors de la configuration du client.

11. Sélectionnez Vue d’ensemble.

12. Notez l’ID d’application (client) dans la section Essentials (appelée ID d’application de l’API web). Vous avez besoin de cette valeur pour configurer le service principal.

Ouvrez Visual Studio et sélectionnez le TodoAppService.NET6 projet.

1. Cliquez avec le bouton droit sur le TodoAppService.NET6 projet, puis sélectionnez Gérer les packages NuGet....

2. Dans le nouvel onglet, sélectionnez Parcourir, puis entrez Microsoft.Identity.Web dans la zone de recherche.

   

3. Sélectionnez le Microsoft.Identity.Web package, puis appuyez sur Installer.

4. Suivez les invites pour terminer l’installation du package.

5. Ouvrir Program.cs. Ajoutez ce qui suit à la liste des using instructions :

using Microsoft.AspNetCore.Authentication.JwtBearer;
using Microsoft.Identity.Web;

6. Ajoutez le code suivant directement au-dessus de l’appel à builder.Services.AddDbContext():

builder.Services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
  .AddMicrosoftIdentityWebApi(builder.Configuration);
builder.Services.AddAuthorization();

7. Ajoutez le code suivant directement au-dessus de l’appel à app.MapControllers():

app.UseAuthentication();
app.UseAuthorization();

Program.cs devrait maintenant se présenter ainsi :

using Microsoft.AspNetCore.Datasync;
using Microsoft.EntityFrameworkCore;
using Microsoft.AspNetCore.Authentication.JwtBearer;
using Microsoft.Identity.Web;
using TodoAppService.NET6.Db;
  
var builder = WebApplication.CreateBuilder(args);
var connectionString = builder.Configuration.GetConnectionString("DefaultConnection");
  
if (connectionString == null)
{
  throw new ApplicationException("DefaultConnection is not set");
}
  
builder.Services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
  .AddMicrosoftIdentityWebApi(builder.Configuration);
builder.Services.AddAuthorization();
builder.Services.AddDbContext<AppDbContext>(options => options.UseSqlServer(connectionString));
builder.Services.AddDatasyncControllers();
  
var app = builder.Build();
  
// Initialize the database
using (var scope = app.Services.CreateScope())
{
  var context = scope.ServiceProvider.GetRequiredService<AppDbContext>();
  await context.InitializeDatabaseAsync().ConfigureAwait(false);
}
  
// Configure and run the web service.
app.UseAuthentication();
app.UseAuthorization();
app.MapControllers();
app.Run();

8. Modifiez le Controllers\TodoItemController.cs. Ajoutez un [Authorize] attribut à la classe. Votre classe doit ressembler à ceci :

using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Datasync;
using Microsoft.AspNetCore.Datasync.EFCore;
using Microsoft.AspNetCore.Mvc;
using TodoAppService.NET6.Db;

namespace TodoAppService.NET6.Controllers
{
  [Authorize]
  [Route("tables/todoitem")]
  public class TodoItemController : TableController<TodoItem>
  {
    public TodoItemController(AppDbContext context)
      : base(new EntityTableRepository<TodoItem>(context))
    {
    }
  }
}

9. Modifiez le appsettings.json. Ajoutez le bloc suivant :

  "AzureAd": {
    "Instance": "https://login.microsoftonline.com",
    "ClientId": "<client-id>",
    "TenantId": "common"
  },

Remplacez l’ID <client-id> d’application de l’API web que vous avez enregistré précédemment. Une fois terminé, il doit ressembler à ceci :

{
  "AzureAd": {
    "Instance": "https://login.microsoftonline.com",
    "ClientId": "<client-id>",
    "TenantId": "common"
  },
  "ConnectionStrings": {
    "DefaultConnection": "Server=(localdb)\\mssqllocaldb;Database=TodoApp;Trusted_Connection=True"
  },
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*"
}

Publiez à nouveau votre service sur Azure :

1. Cliquez avec le bouton droit sur le TodoAppService.NET6 projet, puis sélectionnez Publier....
2. Sélectionnez le bouton Publier dans le coin supérieur droit de l’onglet.

Ouvrez un navigateur et accédez à https://yoursite.azurewebsites.net/tables/todoitem?ZUMO-API-VERSION=3.0.0. Notez que le service retourne maintenant une 401 réponse, ce qui indique que l’authentification est requise.

Inscrire votre application auprès du service d’identité

Microsoft Data Sync Framework prend en charge tous les fournisseurs d’authentification qui utilisent un jeton Web Json (JWT) dans un en-tête de la transaction HTTP. Cette application utilise la bibliothèque d’authentification Microsoft (MSAL) pour demander un tel jeton et autoriser l’utilisateur connecté au service principal.

Configurer une application cliente native

Vous pouvez inscrire des clients natifs pour permettre une authentification au niveau des API web hébergées dans votre application en utilisant une bibliothèque de client comme la bibliothèque d’identité Microsoft (MSAL).

1. Dans le Portail Azure, sélectionnez Inscriptions Nouvelles inscriptions> d’application d’ID>Microsoft Entra.

2. Dans la page Inscrire une application :

   • entrez un nom pour l’inscription de votre application. Vous pouvez utiliser le nom native-quickstart pour distinguer celui-ci de celui utilisé par votre service principal.
   • Sélectionnez Comptes dans n’importe quel annuaire organisationnel (n’importe quel annuaire Microsoft Entra - Multilocataire) et comptes Microsoft personnels (par exemple, Skype, Xbox).
   • Dans l’URI de redirection :
     • Sélectionner un client public (mobile &desktop)
     • Entrez l’URL quickstart://auth

3. Sélectionnez Inscrire.

4. Sélectionnez Autorisations des API>Ajouter une autorisation>Mes API.

5. Sélectionnez l’inscription d’application que vous avez créée précédemment pour votre service principal. Si vous ne voyez pas l’inscription de l’application, vérifiez que vous avez ajouté l’étendue access_as_user .

   

6. Sous Sélectionner des autorisations, sélectionnez access_as_user, puis ajoutez des autorisations.

7. Sélectionnez Authentification>Mobile et applications de bureau.

8. Cochez la case en regard de https://login.microsoftonline.com/common/oauth2/nativeclient.

9. Cochez la case en msal{client-id}://auth regard de (en {client-id} remplaçant par votre ID d’application).

10. Sélectionnez Ajouter un URI, puis ajoutez http://localhost le champ pour les URI supplémentaires.

11. Sélectionnez Enregistrer au bas de la page.

12. Sélectionnez Vue d’ensemble. Notez l’ID d’application (client) (appelé ID d’application cliente native), car vous en avez besoin pour configurer l’application mobile.

Nous avons défini trois URL de redirection :

• http://localhost est utilisé par les applications WPF.
• https://login.microsoftonline.com/common/oauth2/nativeclient est utilisé par les applications UWP.
• msal{client-id}://auth est utilisé par les applications mobiles (Android et iOS).

Ajouter le client d’identité Microsoft à votre application

Ouvrez la TodoApp.sln solution dans Visual Studio et définissez le TodoApp.iOS projet comme projet de démarrage. Ajoutez la bibliothèque d’identités Microsoft (MSAL) au TodoApp.iOS projet :

Ajoutez la bibliothèque d’identités Microsoft (MSAL) au projet de plateforme :

1. Cliquez avec le bouton droit sur le projet, puis sélectionnez Gérer les packages NuGet....

2. Sélectionnez l’onglet Parcourir.

3. Dans la zone de recherche, entrez Microsoft.Identity.Client et appuyez sur Entrée.

4. Sélectionnez le résultat Microsoft.Identity.Client, puis cliquez sur Installer.

   

5. Acceptez le contrat de licence pour poursuivre l’installation.

Ajoutez l’ID client natif et l’étendue du back-end à la configuration.

Ouvrez le TodoApp.Data projet et modifiez le Constants.cs fichier. Ajoutez des constantes pour ApplicationId et Scopes:

  public static class Constants
  {
      /// <summary>
      /// The base URI for the Datasync service.
      /// </summary>
      public static string ServiceUri = "https://demo-datasync-quickstart.azurewebsites.net";

      /// <summary>
      /// The application (client) ID for the native app within Microsoft Entra ID
      /// </summary>
      public static string ApplicationId = "<client-id>";

      /// <summary>
      /// The list of scopes to request
      /// </summary>
      public static string[] Scopes = new[]
      {
          "<scope>"
      };
  }

Remplacez l’ID d’application cliente native que vous avez reçu lors de l’inscription de l’application cliente dans Microsoft Entra ID et par <scope> l’étendue de l’API web que vous avez copiée lorsque vous avez utilisé Exposer une API lors de l’inscription de l’application de service.<client-id>

Ouvrez ViewControllers\HomeViewController.cs le TodoApp.iOS projet. Ajoutez les instructions using suivantes :

using Microsoft.Datasync.Client;
using Microsoft.Identity.Client;
using System.Diagnostics;
using System.Linq;

Dans la HomeViewController classe, ajoutez une nouvelle propriété :

public IPublicClientApplication IdentityClient { get; set; }

Ajustez le constructeur pour lire :

public HomeViewController() {
  Title = "Todo Items";
  TodoService = new RemoteTodoService(GetAuthenticationToken);
  TodoService.TodoItemsUpdated += OnTodoItemsUpdated;
}

Ajoutez la méthode GetAuthenticationToken à la classe :

public async Task<AuthenticationToken> GetAuthenticationToken()
{
    if (IdentityClient == null)
    {
        IdentityClient = PublicClientApplicationBuilder.Create(Constants.ApplicationId)
            .WithAuthority(AzureCloudInstance.AzurePublic, "common")
            .WithRedirectUri($"msal{Constants.ApplicationId}://auth")
            .WithIosKeychainSecurityGroup("com.microsoft.adalcache")
            .Build();
    }

    var accounts = await IdentityClient.GetAccountsAsync();
    AuthenticationResult result = null;
    bool tryInteractiveLogin = false;

    try
    {
        result = await IdentityClient
            .AcquireTokenSilent(Constants.Scopes, accounts.FirstOrDefault())
            .ExecuteAsync();
    }
    catch (MsalUiRequiredException)
    {
        tryInteractiveLogin = true;
    }
    catch (Exception ex)
    {
        Debug.WriteLine($"MSAL Silent Error: {ex.Message}");
    }

    if (tryInteractiveLogin)
    {
        try
        {
            result = await IdentityClient
                .AcquireTokenInteractive(Constants.Scopes)
                .ExecuteAsync()
                .ConfigureAwait(false);
        }
        catch (Exception ex)
        {
            Debug.WriteLine($"MSAL Interactive Error: {ex.Message}");
        }
    }

    return new AuthenticationToken
    {
        DisplayName = result?.Account?.Username ?? "",
        ExpiresOn = result?.ExpiresOn ?? DateTimeOffset.MinValue,
        Token = result?.AccessToken ?? "",
        UserId = result?.Account?.Username ?? ""
    };
}

La GetAuthenticationToken() méthode fonctionne avec la bibliothèque d’identités Microsoft (MSAL) pour obtenir un jeton d’accès adapté à l’autorisation de l’utilisateur connecté au service principal. Cette fonction est ensuite passée à la RemoteTodoService création du client. Si l’authentification réussit, elle AuthenticationToken est produite avec les données nécessaires pour autoriser chaque demande. Si ce n’est pas le cas, un jeton incorrect expiré est produit à la place.

Ajoutez le code suivant au bas de la AppDelegate classe :

[Export("application:openURL:options:")]
public bool OpenUrl(UIApplication app, NSUrl url, NSDictionary options)
{
    AuthenticationContinuationHelper.SetAuthenticationContinuationEventArgs(url);
    return true;
}

Ajoutez l’accès au trousseau :Entitlements.plist

1. Ouvrez le fichier Entitlements.plist .

2. Sélectionnez Trousseau.

3. Sélectionnez Ajouter nouveau dans les groupes de trousseau.

4. Entrez com.microsoft.adalcache comme valeur :

   

Ajoutez les droits personnalisés au projet :

1. Cliquez avec le bouton droit sur le TodoApp.iOS projet, puis sélectionnez Propriétés.

2. Sélectionnez Signature de bundle iOS.

3. Sélectionnez le bouton ... en regard du champ Droits personnalisés.

4. Sélectionnez Entitlements, puis sélectionnez Ouvrir.

5. Appuyez sur Ctrl+S pour enregistrer le projet.

   

Test de l'application

Définissez TodoApp.iOS comme projet de démarrage, puis générez et exécutez l’application. Au démarrage de l’application, vous êtes invité à vous connecter à l’application. Lors de la première exécution, vous êtes invité à donner votre consentement à l’application. Une fois l’authentification terminée, l’application s’exécute normalement.

Étapes suivantes

Ensuite, configurez votre application pour qu’elle fonctionne hors connexion en implémentant un magasin hors connexion.

Pour aller plus loin

• Démarrage rapide : Protéger une API web avec le Plateforme d'identités Microsoft
• Considérations relatives à l’utilisation de Xamarin iOS avec MSAL.NET
• Scénario : Application mobile appelant des API web