Utiliser l’API Graph avec ASP.NET Core Blazor WebAssembly

Les instructions suivantes s’appliquent à Microsoft Graph v5.

Le Kit de développement logiciel (SDK) Microsoft Graph à utiliser dans les applications Blazor est appelé bibliothèque cliente Microsoft Graph .NET.

• Microsoft.AspNetCore.Components.WebAssembly.Authentication
• Microsoft.Authentication.WebAssembly.Msal
• Microsoft.Extensions.Http
• Microsoft.Graph

Dans le Portail Azure, accordez des permissions déléguées (étendues)† pour les données Microsoft Graph auxquelles l’application doit pouvoir accéder pour le compte d’un utilisateur. Pour l’exemple de cet article, l’inscription de l’application doit comprendre une autorisation déléguée de lire les données utilisateur (Microsoft.Graph>User.Read étendue dans les autorisations d’API, Type : Délégué). L’étendue User.Read permet aux utilisateurs à se connecter à l’application, mais également à l’application à lire le profil et les informations sur la société des utilisateurs connectés. Pour plus d’informations, consultez Vue d’ensemble des autorisations et du consentement dans la plateforme identity Microsoft et Vue d’ensemble des autorisations Microsoft Graph.

†Permissions et étendues signifient la même chose et sont interchangeables dans la documentation de sécurité et dans le Portail Azure. Sauf si le texte fait référence au portail Azure, cet article utilise étendue/étendues pour désigner les autorisations Graph.

Les étendues ne respectent pas la casse, User.Read est donc la même chose que user.read. N’hésitez pas à utiliser l’un ou l’autre format, mais nous vous recommandons de faire preuve de cohérence dans le code de l’application.

Après avoir ajouté les étendues de l’API Microsoft Graph dans l’inscription de l’application dans le Portail Azure, ajoutez la configuration suivante des paramètres d’application au fichier wwwroot/appsettings.json. Ce dernier contient l’URL de base Graph avec la version et les étendues graph. Dans l’exemple suivant, l’étendue User.Read est spécifiée pour les exemples dans les sections ultérieures de cet article. Les étendues ne respectent pas la casse.

"MicrosoftGraph": {
  "BaseUrl": "https://graph.microsoft.com",
  "Version": "{VERSION}",
  "Scopes": [
    "user.read"
  ]
}

Dans l’exemple précédent, l’espace réservé {VERSION} est la version de l’API Microsoft Graph (par exemple : v1.0).

Voici un exemple de fichier de configuration wwwroot/appsettings.json complet pour une application qui utilise ME-ID comme fournisseur d’identity, dans lequel la lecture des données utilisateur (étendue user.read) est spécifiée pour Microsoft Graph :

{
  "AzureAd": {
    "Authority": "https://login.microsoftonline.com/{TENANT ID}",
    "ClientId": "{CLIENT ID}",
    "ValidateAuthority": true
  },
  "MicrosoftGraph": {
    "BaseUrl": "https://graph.microsoft.com",
    "Version": "v1.0",
    "Scopes": [
      "user.read"
    ]
  }
}

Dans l’exemple précédent, l’espace réservé {TENANT ID} est l’ID de l’annuaire (locataire), tandis que l’espace réservé {CLIENT ID} est l’ID de l’application (client). Pour plus d’informations, consultez Sécuriser une application autonome ASP.NET Core Blazor WebAssembly avec Microsoft Entra ID.

Lorsqu’un jeton d’accès n’est pas obtenu, le code suivant ne définit pas d’en-tête d’autorisation du porteur pour les requêtes Graph.

GraphClientExtensions.cs :

using Microsoft.AspNetCore.Components.WebAssembly.Authentication;
using Microsoft.Authentication.WebAssembly.Msal.Models;
using Microsoft.Graph;
using Microsoft.Kiota.Abstractions;
using Microsoft.Kiota.Abstractions.Authentication;
using IAccessTokenProvider = 
    Microsoft.AspNetCore.Components.WebAssembly.Authentication.IAccessTokenProvider;

namespace BlazorSample;

internal static class GraphClientExtensions
{
    public static IServiceCollection AddGraphClient(
            this IServiceCollection services, string? baseUrl, List<string>? scopes)
    {
        if (string.IsNullOrEmpty(baseUrl) || scopes?.Count == 0)
        {
            return services;
        }

        services.Configure<RemoteAuthenticationOptions<MsalProviderOptions>>(
            options =>
            {
                scopes?.ForEach((scope) =>
                {
                    options.ProviderOptions.DefaultAccessTokenScopes.Add(scope);
                });
            });

        services.AddScoped<IAuthenticationProvider, GraphAuthenticationProvider>();

        services.AddScoped(sp =>
        {
            return new GraphServiceClient(
                new HttpClient(),
                sp.GetRequiredService<IAuthenticationProvider>(),
                baseUrl);
        });

        return services;
    }

    private class GraphAuthenticationProvider(IAccessTokenProvider tokenProvider, 
        IConfiguration config) : IAuthenticationProvider
    {
        private readonly IConfiguration config = config;

        public IAccessTokenProvider TokenProvider { get; } = tokenProvider;

        public async Task AuthenticateRequestAsync(RequestInformation request, 
            Dictionary<string, object>? additionalAuthenticationContext = null, 
            CancellationToken cancellationToken = default)
        {
            var result = await TokenProvider.RequestAccessToken(
                new AccessTokenRequestOptions()
                {
                    Scopes = 
                        config.GetSection("MicrosoftGraph:Scopes").Get<string[]>() ??
                        [ "user.read" ]
                });

            if (result.TryGetToken(out var token))
            {
                request.Headers.Add("Authorization", 
                    $"{CoreConstants.Headers.Bearer} {token.Value}");
            }
        }
    }
}

Dans le fichier Program, ajoutez les services clients et la configuration avec la méthode d’extension AddGraphClient. Le code suivant est défini par défaut sur l’adresse de base de la version 1.0 de Microsoft Graph et les étendues User.Read si ces paramètres ne sont pas trouvés dans le fichier de paramètres de l’application :

var baseUrl = string.Join("/",
    builder.Configuration.GetSection("MicrosoftGraph")["BaseUrl"] ??
        "https://graph.microsoft.com",
    builder.Configuration.GetSection("MicrosoftGraph")["Version"] ??
        "v1.0");
var scopes = builder.Configuration.GetSection("MicrosoftGraph:Scopes")
    .Get<List<string>>() ?? [ "user.read" ];

builder.Services.AddGraphClient(baseUrl, scopes);

Appeler l’API Graph à partir d’un composant à l’aide du Kit de développement logiciel (SDK) Graph

Le composant UserData suivant utilise un GraphServiceClient injecté pour obtenir les données de profil ME-ID de l’utilisateur et afficher son numéro de téléphone mobile.

Pour tout utilisateur de test que vous créez dans ME-ID, veillez à donner au profil ME-ID de l’utilisateur un numéro de téléphone mobile dans le portail Azure.

UserData.razor :

@page "/user-data"
@using Microsoft.AspNetCore.Authorization
@using Microsoft.Graph
@attribute [Authorize]
@inject GraphServiceClient Client

<PageTitle>User Data</PageTitle>

<h1>Microsoft Graph User Data</h1>

@if (!string.IsNullOrEmpty(user?.MobilePhone))
{
    <p>Mobile Phone: @user.MobilePhone</p>
}

@code {
    private Microsoft.Graph.Models.User? user;

    protected override async Task OnInitializedAsync()
    {
        user = await Client.Me.GetAsync();
    }
}

Ajoutez un lien vers la page du composant dans le composant NavMenu (Layout/NavMenu.razor) :

<div class="nav-item px-3">
    <NavLink class="nav-link" href="user-data">
        <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> User Data
    </NavLink>
</div>

Lorsque vous effectuez des tests en local avec le kit de développement logiciel (SDK) Graph, nous vous recommandons d’utiliser une nouvelle session de navigateur privée/incognito pour chaque test afin d’éviter que les cookies persistants n’interfèrent avec les tests. Pour plus d’informations, consultez Sécuriser une application autonome ASP.NET Core Blazor WebAssembly avec Microsoft Entra ID.

Personnaliser les revendications utilisateur à l’aide du Kit de développement logiciel (SDK) Graph

Dans l’exemple suivant, l’application crée un numéro de téléphone mobile et des revendications d’emplacement de bureau pour un utilisateur à partir des données de son profil utilisateur ME-ID. L’application doit avoir l’étendue de l’API Graph User.Read configurée dans ME-ID. Tous les utilisateurs de test pour ce scénario doivent avoir un numéro de téléphone mobile et un emplacement de bureau dans leur profil ME-ID, qui peut être ajouté via le portail Azure.

Dans la fabrique de compte d’utilisateur personnalisée suivante :

• Un ILogger (logger) est inclus pour des raisons pratiques au cas où vous souhaitez consigner des informations ou des erreurs dans la méthode CreateUserAsync.
• Si une exception AccessTokenNotAvailableException est renvoyée, l’utilisateur est redirigé vers le fournisseur d’identity pour se connecter à son compte. Des actions supplémentaires ou différentes peuvent être effectuées lors de l’échec de la requête d’un jeton d’accès. Par exemple, l’application peut enregistrer le AccessTokenNotAvailableException et créer un ticket de support pour une investigation plus approfondie.
• Le framework RemoteUserAccount représente le compte de l’utilisateur. Si l’application nécessite une classe de compte d’utilisateur personnalisée qui étend RemoteUserAccount, changez votre classe de compte d’utilisateur personnalisée pour RemoteUserAccount dans le code suivant.

CustomAccountFactory.cs :

using System.Security.Claims;
using Microsoft.AspNetCore.Components.WebAssembly.Authentication;
using Microsoft.AspNetCore.Components.WebAssembly.Authentication.Internal;
using Microsoft.Graph;
using Microsoft.Kiota.Abstractions.Authentication;

public class CustomAccountFactory(IAccessTokenProviderAccessor accessor,
        IServiceProvider serviceProvider, ILogger<CustomAccountFactory> logger,
        IConfiguration config) 
    : AccountClaimsPrincipalFactory<RemoteUserAccount>(accessor)
{
    private readonly ILogger<CustomAccountFactory> logger = logger;
    private readonly IServiceProvider serviceProvider = serviceProvider;
    private readonly string? baseUrl = string.Join("/",
        config.GetSection("MicrosoftGraph")["BaseUrl"] ?? 
            "https://graph.microsoft.com",
        config.GetSection("MicrosoftGraph")["Version"] ??
            "v1.0");

    public override async ValueTask<ClaimsPrincipal> CreateUserAsync(
        RemoteUserAccount account,
        RemoteAuthenticationUserOptions options)
    {
        var initialUser = await base.CreateUserAsync(account, options);

        if (initialUser.Identity is not null &&
            initialUser.Identity.IsAuthenticated)
        {
            var userIdentity = initialUser.Identity as ClaimsIdentity;

            if (userIdentity is not null && !string.IsNullOrEmpty(baseUrl))
            {
                try
                {
                    var client = new GraphServiceClient(
                        new HttpClient(),
                        serviceProvider
                            .GetRequiredService<IAuthenticationProvider>(),
                        baseUrl);

                    var user = await client.Me.GetAsync();

                    if (user is not null)
                    {
                        userIdentity.AddClaim(new Claim("mobilephone",
                            user.MobilePhone ?? "(000) 000-0000"));
                        userIdentity.AddClaim(new Claim("officelocation",
                            user.OfficeLocation ?? "Not set"));
                    }
                }
                catch (AccessTokenNotAvailableException exception)
                {
                    exception.Redirect();
                }
            }
        }

        return initialUser;
    }
}

Configurez l’authentification MSAL pour utiliser la fabrique de compte d’utilisateur personnalisée.

Vérifiez que le fichier Program utilise l’espace de noms Microsoft.AspNetCore.Components.WebAssembly.Authentication :

using Microsoft.AspNetCore.Components.WebAssembly.Authentication;

L’exemple de cette section s’appuie sur l’approche de lecture de l’URL de base avec la version et les étendues de la configuration d’application via la section MicrosoftGraph dans le fichierwwwroot/appsettings.json. Les lignes suivantes doivent déjà être présentes dans le fichier Program après avoir suivi les instructions décrites plus haut dans cet article :

var baseUrl = string.Join("/",
    builder.Configuration.GetSection("MicrosoftGraph")["BaseUrl"] ??
        "https://graph.microsoft.com",
    builder.Configuration.GetSection("MicrosoftGraph")["Version"] ??
        "v1.0");
var scopes = builder.Configuration.GetSection("MicrosoftGraph:Scopes")
    .Get<List<string>>() ?? [ "user.read" ];

builder.Services.AddGraphClient(baseUrl, scopes);

Dans le fichier Program, recherchez l’appel à la méthode d’extension AddMsalAuthentication. Mettez à jour le code suivant, ce qui inclut un appel à AddAccountClaimsPrincipalFactory qui ajoute une fabrique de principal de revendications de compte avec le CustomAccountFactory.

Si l’application utilise une classe de compte d’utilisateur personnalisée qui s’étend RemoteUserAccount, changez la classe de compte d’utilisateur personnalisée pour RemoteUserAccount dans le code suivant.

builder.Services.AddMsalAuthentication<RemoteAuthenticationState,
    RemoteUserAccount>(options =>
    {
        builder.Configuration.Bind("AzureAd", 
            options.ProviderOptions.Authentication);
    })
    .AddAccountClaimsPrincipalFactory<RemoteAuthenticationState, RemoteUserAccount,
        CustomAccountFactory>();

Vous pouvez utiliser le composant UserClaims suivant pour étudier les revendications de l’utilisateur après l’authentification de l’utilisateur avec ME-ID :

UserClaims.razor :

@page "/user-claims"
@using System.Security.Claims
@using Microsoft.AspNetCore.Authorization
@attribute [Authorize]
@inject AuthenticationStateProvider AuthenticationStateProvider

<h1>User Claims</h1>

@if (claims.Any())
{
    <ul>
        @foreach (var claim in claims)
        {
            <li>@claim.Type: @claim.Value</li>
        }
    </ul>
}
else
{
    <p>No claims found.</p>
}

@code {
    private IEnumerable<Claim> claims = Enumerable.Empty<Claim>();

    protected override async Task OnInitializedAsync()
    {
        var authState = await AuthenticationStateProvider
            .GetAuthenticationStateAsync();
        var user = authState.User;

        claims = user.Claims;
    }
}

Ajoutez un lien vers la page du composant dans le composant NavMenu (Layout/NavMenu.razor) :

<div class="nav-item px-3">
    <NavLink class="nav-link" href="user-claims">
        <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> User Claims
    </NavLink>
</div>

Lorsque vous effectuez des tests en local avec le kit de développement logiciel (SDK) Graph, nous vous recommandons d’utiliser une nouvelle session de navigateur privée/incognito pour chaque test afin d’éviter que les cookies persistants n’interfèrent avec les tests. Pour plus d’informations, consultez Sécuriser une application autonome ASP.NET Core Blazor WebAssembly avec Microsoft Entra ID.

Les instructions suivantes s’appliquent à Microsoft Graph v4. Si vous mettez à niveau une application du SDK v4 vers v5, consultez le journal des modifications et le guide de mise à niveau du Kit de développement logiciel (SDK) .NET Microsoft Graph v5.

Le Kit de développement logiciel (SDK) Microsoft Graph à utiliser dans les applications Blazor est appelé bibliothèque cliente Microsoft Graph .NET.

• Microsoft.AspNetCore.Components.WebAssembly.Authentication
• Microsoft.Authentication.WebAssembly.Msal
• Microsoft.Extensions.Http
• Microsoft.Graph

Dans le Portail Azure, accordez des permissions déléguées (étendues)† pour les données Microsoft Graph auxquelles l’application doit pouvoir accéder pour le compte d’un utilisateur. Pour l’exemple de cet article, l’inscription de l’application doit comprendre une autorisation déléguée de lire les données utilisateur (Microsoft.Graph>User.Read étendue dans les autorisations d’API, Type : Délégué). L’étendue User.Read permet aux utilisateurs à se connecter à l’application, mais également à l’application à lire le profil et les informations sur la société des utilisateurs connectés. Pour plus d’informations, consultez Vue d’ensemble des autorisations et du consentement dans la plateforme identity Microsoft et Vue d’ensemble des autorisations Microsoft Graph.

†Permissions et étendues signifient la même chose et sont interchangeables dans la documentation de sécurité et dans le Portail Azure. Sauf si le texte fait référence au portail Azure, cet article utilise étendue/étendues pour désigner les autorisations Graph.

Les étendues ne respectent pas la casse, User.Read est donc la même chose que user.read. N’hésitez pas à utiliser l’un ou l’autre format, mais nous vous recommandons de faire preuve de cohérence dans le code de l’application.

Après avoir ajouté les étendues de l’API Microsoft Graph dans l’inscription de l’application dans le Portail Azure, ajoutez la configuration suivante des paramètres d’application au fichier wwwroot/appsettings.json. Ce dernier contient l’URL de base Graph avec la version et les étendues graph. Dans l’exemple suivant, l’étendue User.Read est spécifiée pour les exemples dans les sections ultérieures de cet article. Les étendues ne respectent pas la casse.

"MicrosoftGraph": {
  "BaseUrl": "https://graph.microsoft.com",
  "Version": "{VERSION}",
  "Scopes": [
    "user.read"
  ]
}

Dans l’exemple précédent, l’espace réservé {VERSION} est la version de l’API Microsoft Graph (par exemple : v1.0).

Voici un exemple de fichier de configuration wwwroot/appsettings.json complet pour une application qui utilise ME-ID comme fournisseur d’identity, dans lequel la lecture des données utilisateur (étendue user.read) est spécifiée pour Microsoft Graph :

{
  "AzureAd": {
    "Authority": "https://login.microsoftonline.com/{TENANT ID}",
    "ClientId": "{CLIENT ID}",
    "ValidateAuthority": true
  },
  "MicrosoftGraph": {
    "BaseUrl": "https://graph.microsoft.com",
    "Version": "v1.0",
    "Scopes": [
      "user.read"
    ]
  }
}

Dans l’exemple précédent, l’espace réservé {TENANT ID} est l’ID de l’annuaire (locataire), tandis que l’espace réservé {CLIENT ID} est l’ID de l’application (client). Pour plus d’informations, consultez Sécuriser une application autonome ASP.NET Core Blazor WebAssembly avec Microsoft Entra ID.

Lorsqu’un jeton d’accès n’est pas obtenu, le code suivant ne définit pas d’en-tête d’autorisation du porteur pour les requêtes Graph.

GraphClientExtensions.cs :

using System.Net.Http.Headers;
using Microsoft.AspNetCore.Components.WebAssembly.Authentication;
using Microsoft.Authentication.WebAssembly.Msal.Models;
using Microsoft.Graph;

namespace BlazorSample;

internal static class GraphClientExtensions
{
    public static IServiceCollection AddGraphClient(
        this IServiceCollection services, string? baseUrl, List<string>? scopes)
    {
        if (string.IsNullOrEmpty(baseUrl) || scopes?.Count == 0)
        {
            return services;
        }

        services.Configure<RemoteAuthenticationOptions<MsalProviderOptions>>(
            options =>
            {
                scopes?.ForEach((scope) =>
                {
                    options.ProviderOptions.DefaultAccessTokenScopes.Add(scope);
                });
            });

        services.AddScoped<IAuthenticationProvider, GraphAuthenticationProvider>();

        services.AddScoped<IHttpProvider, HttpClientHttpProvider>(sp =>
            new HttpClientHttpProvider(new HttpClient()));

        services.AddScoped(sp =>
        {
            return new GraphServiceClient(
                baseUrl,
                sp.GetRequiredService<IAuthenticationProvider>(),
                sp.GetRequiredService<IHttpProvider>());
        });

        return services;
    }

    private class GraphAuthenticationProvider(IAccessTokenProvider tokenProvider, 
        IConfiguration config) : IAuthenticationProvider
    {
        private readonly IConfiguration config = config;

        public IAccessTokenProvider TokenProvider { get; } = tokenProvider;

        public async Task AuthenticateRequestAsync(HttpRequestMessage request)
        {
            var result = await TokenProvider.RequestAccessToken(
                new AccessTokenRequestOptions()
                { 
                    Scopes = config.GetSection("MicrosoftGraph:Scopes").Get<string[]>()
                });

            if (result.TryGetToken(out var token))
            {
                request.Headers.Authorization ??= new AuthenticationHeaderValue(
                    "Bearer", token.Value);
            }
        }
    }

    private class HttpClientHttpProvider(HttpClient client) : IHttpProvider
    {
        private readonly HttpClient client = client;

        public ISerializer Serializer { get; } = new Serializer();

        public TimeSpan OverallTimeout { get; set; } = TimeSpan.FromSeconds(300);

        public Task<HttpResponseMessage> SendAsync(HttpRequestMessage request)
        {
            return client.SendAsync(request);
        }

        public Task<HttpResponseMessage> SendAsync(HttpRequestMessage request,
            HttpCompletionOption completionOption,
            CancellationToken cancellationToken)
        {
            return client.SendAsync(request, completionOption, cancellationToken);
        }

        public void Dispose()
        {
        }
    }
}

Dans le fichier Program, ajoutez les services clients et la configuration Graph avec la méthode d’extension AddGraphClient :

var baseUrl = string.Join("/",
    builder.Configuration.GetSection("MicrosoftGraph")["BaseUrl"] ??
        "https://graph.microsoft.com",
    builder.Configuration.GetSection("MicrosoftGraph")["Version"] ??
        "v1.0");
var scopes = builder.Configuration.GetSection("MicrosoftGraph:Scopes")
    .Get<List<string>>() ?? [ "user.read" ];

builder.Services.AddGraphClient(baseUrl, scopes);

Appeler l’API Graph à partir d’un composant à l’aide du Kit de développement logiciel (SDK) Graph

Le composant UserData suivant utilise un GraphServiceClient injecté pour obtenir les données de profil ME-ID de l’utilisateur et afficher son numéro de téléphone mobile. Pour tout utilisateur de test que vous créez dans ME-ID, veillez à donner au profil ME-ID de l’utilisateur un numéro de téléphone mobile dans le portail Azure.

UserData.razor :

@page "/user-data"
@using Microsoft.AspNetCore.Authorization
@using Microsoft.Graph
@attribute [Authorize]
@inject GraphServiceClient Client

<PageTitle>User Data</PageTitle>

<h1>Microsoft Graph User Data</h1>

@if (!string.IsNullOrEmpty(user?.MobilePhone))
{
    <p>Mobile Phone: @user.MobilePhone</p>
}

@code {
    private Microsoft.Graph.User? user;

    protected override async Task OnInitializedAsync()
    {
        var request = Client.Me.Request();
        user = await request.GetAsync();
    }
}

Ajoutez un lien vers la page du composant dans le composant NavMenu (Layout/NavMenu.razor) :

<div class="nav-item px-3">
    <NavLink class="nav-link" href="user-data">
        <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> User Data
    </NavLink>
</div>

Lorsque vous effectuez des tests en local avec le kit de développement logiciel (SDK) Graph, nous vous recommandons d’utiliser une nouvelle session de navigateur privée/incognito pour chaque test afin d’éviter que les cookies persistants n’interfèrent avec les tests. Pour plus d’informations, consultez Sécuriser une application autonome ASP.NET Core Blazor WebAssembly avec Microsoft Entra ID.

Personnaliser les revendications utilisateur à l’aide du Kit de développement logiciel (SDK) Graph

Dans l’exemple suivant, l’application crée un numéro de téléphone mobile et des revendications d’emplacement de bureau pour un utilisateur à partir des données de son profil utilisateur ME-ID. L’application doit avoir l’étendue de l’API Graph User.Read configurée dans ME-ID. Tous les utilisateurs de test pour ce scénario doivent avoir un numéro de téléphone mobile et un emplacement de bureau dans leur profil ME-ID, qui peut être ajouté via le portail Azure.

Dans la fabrique de compte d’utilisateur personnalisée suivante :

• Un ILogger (logger) est inclus pour des raisons pratiques au cas où vous souhaitez consigner des informations ou des erreurs dans la méthode CreateUserAsync.
• Si une exception AccessTokenNotAvailableException est renvoyée, l’utilisateur est redirigé vers le fournisseur d’identity pour se connecter à son compte. Des actions supplémentaires ou différentes peuvent être effectuées lors de l’échec de la requête d’un jeton d’accès. Par exemple, l’application peut enregistrer le AccessTokenNotAvailableException et créer un ticket de support pour une investigation plus approfondie.
• Le framework RemoteUserAccount représente le compte de l’utilisateur. Si l’application nécessite une classe de compte d’utilisateur personnalisée qui étend RemoteUserAccount, changez votre classe de compte d’utilisateur personnalisée pour RemoteUserAccount dans le code suivant.

CustomAccountFactory.cs :

using System.Security.Claims;
using Microsoft.AspNetCore.Components.WebAssembly.Authentication;
using Microsoft.AspNetCore.Components.WebAssembly.Authentication.Internal;
using Microsoft.Graph;

public class CustomAccountFactory(IAccessTokenProviderAccessor accessor, 
        IServiceProvider serviceProvider, ILogger<CustomAccountFactory> logger)
    : AccountClaimsPrincipalFactory<RemoteUserAccount>(accessor)
{
    private readonly ILogger<CustomAccountFactory> logger = logger;
    private readonly IServiceProvider serviceProvider = serviceProvider;

    public override async ValueTask<ClaimsPrincipal> CreateUserAsync(
        RemoteUserAccount account,
        RemoteAuthenticationUserOptions options)
    {
        var initialUser = await base.CreateUserAsync(account, options);

        if (initialUser.Identity is not null && 
            initialUser.Identity.IsAuthenticated)
        {
            var userIdentity = initialUser.Identity as ClaimsIdentity;

            if (userIdentity is not null)
            {
                try
                {
                    var client = ActivatorUtilities
                        .CreateInstance<GraphServiceClient>(serviceProvider);
                    var request = client.Me.Request();
                    var user = await request.GetAsync();

                    if (user is not null)
                    {
                        userIdentity.AddClaim(new Claim("mobilephone",
                            user.MobilePhone ?? "(000) 000-0000"));
                        userIdentity.AddClaim(new Claim("officelocation",
                            user.OfficeLocation ?? "Not set"));
                    }
                }
                catch (AccessTokenNotAvailableException exception)
                {
                    exception.Redirect();
                }
            }
        }

        return initialUser;
    }
}

Configurez l’authentification MSAL pour utiliser la fabrique de compte d’utilisateur personnalisée.

Vérifiez que le fichier Program utilise l’espace de noms Microsoft.AspNetCore.Components.WebAssembly.Authentication :

using Microsoft.AspNetCore.Components.WebAssembly.Authentication;

L’exemple de cette section s’appuie sur l’approche de lecture de l’URL de base avec la version et les étendues de la configuration d’application via la section MicrosoftGraph dans le fichierwwwroot/appsettings.json. Les lignes suivantes doivent déjà être présentes dans le fichier Program après avoir suivi les instructions décrites plus haut dans cet article :

var baseUrl = string.Join("/",
    builder.Configuration.GetSection("MicrosoftGraph")["BaseUrl"] ??
        "https://graph.microsoft.com",
    builder.Configuration.GetSection("MicrosoftGraph")["Version"] ??
        "v1.0");
var scopes = builder.Configuration.GetSection("MicrosoftGraph:Scopes")
    .Get<List<string>>() ?? [ "user.read" ];

builder.Services.AddGraphClient(baseUrl, scopes);

Dans le fichier Program, recherchez l’appel à la méthode d’extension AddMsalAuthentication. Mettez à jour le code suivant, ce qui inclut un appel à AddAccountClaimsPrincipalFactory qui ajoute une fabrique de principal de revendications de compte avec le CustomAccountFactory.

Si l’application utilise une classe de compte d’utilisateur personnalisée qui s’étend RemoteUserAccount, changez la classe de compte d’utilisateur personnalisée pour RemoteUserAccount dans le code suivant.

builder.Services.AddMsalAuthentication<RemoteAuthenticationState,
    RemoteUserAccount>(options =>
    {
        builder.Configuration.Bind("AzureAd", 
            options.ProviderOptions.Authentication);
    })
    .AddAccountClaimsPrincipalFactory<RemoteAuthenticationState, RemoteUserAccount,
        CustomAccountFactory>();

Vous pouvez utiliser le composant UserClaims suivant pour étudier les revendications de l’utilisateur après l’authentification de l’utilisateur avec ME-ID :

UserClaims.razor :

@page "/user-claims"
@using System.Security.Claims
@using Microsoft.AspNetCore.Authorization
@attribute [Authorize]
@inject AuthenticationStateProvider AuthenticationStateProvider

<h1>User Claims</h1>

@if (claims.Any())
{
    <ul>
        @foreach (var claim in claims)
        {
            <li>@claim.Type: @claim.Value</li>
        }
    </ul>
}
else
{
    <p>No claims found.</p>
}

@code {
    private IEnumerable<Claim> claims = Enumerable.Empty<Claim>();

    protected override async Task OnInitializedAsync()
    {
        var authState = await AuthenticationStateProvider
            .GetAuthenticationStateAsync();
        var user = authState.User;

        claims = user.Claims;
    }
}

Ajoutez un lien vers la page du composant dans le composant NavMenu (Layout/NavMenu.razor) :

<div class="nav-item px-3">
    <NavLink class="nav-link" href="user-claims">
        <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> User Claims
    </NavLink>
</div>

Lorsque vous effectuez des tests en local avec le kit de développement logiciel (SDK) Graph, nous vous recommandons d’utiliser une nouvelle session de navigateur privée/incognito pour chaque test afin d’éviter que les cookies persistants n’interfèrent avec les tests. Pour plus d’informations, consultez Sécuriser une application autonome ASP.NET Core Blazor WebAssembly avec Microsoft Entra ID.

Les exemples suivants utilisent un HttpClient nommé pour les appels d’API Graph pour obtenir le numéro de téléphone mobile d’un utilisateur pour traiter un appel ou personnaliser les revendications d’un utilisateur afin d’inclure une revendication de numéro de téléphone mobile et une revendication d’emplacement de bureau.

Dans le Portail Azure, accordez des permissions déléguées (étendues)† pour les données Microsoft Graph auxquelles l’application doit pouvoir accéder pour le compte d’un utilisateur. Pour l’exemple de cet article, l’inscription de l’application doit comprendre une autorisation déléguée de lire les données utilisateur (Microsoft.Graph>User.Read étendue dans les autorisations d’API, Type : Délégué). L’étendue User.Read permet aux utilisateurs à se connecter à l’application, mais également à l’application à lire le profil et les informations sur la société des utilisateurs connectés. Pour plus d’informations, consultez Vue d’ensemble des autorisations et du consentement dans la plateforme identity Microsoft et Vue d’ensemble des autorisations Microsoft Graph.

†Permissions et étendues signifient la même chose et sont interchangeables dans la documentation de sécurité et dans le Portail Azure. Sauf si le texte fait référence au portail Azure, cet article utilise étendue/étendues pour désigner les autorisations Graph.

Les étendues ne respectent pas la casse, User.Read est donc la même chose que user.read. N’hésitez pas à utiliser l’un ou l’autre format, mais nous vous recommandons de faire preuve de cohérence dans le code de l’application.

Après avoir ajouté les étendues de l’API Microsoft Graph dans l’inscription de l’application dans le Portail Azure, ajoutez la configuration suivante des paramètres d’application au fichier wwwroot/appsettings.json. Ce dernier contient l’URL de base Graph avec la version et les étendues graph. Dans l’exemple suivant, l’étendue User.Read est spécifiée pour les exemples dans les sections ultérieures de cet article. Les étendues ne respectent pas la casse.

"MicrosoftGraph": {
  "BaseUrl": "https://graph.microsoft.com",
  "Version": "{VERSION}",
  "Scopes": [
    "user.read"
  ]
}

Dans l’exemple précédent, l’espace réservé {VERSION} est la version de l’API Microsoft Graph (par exemple : v1.0).

Voici un exemple de fichier de configuration wwwroot/appsettings.json complet pour une application qui utilise ME-ID comme fournisseur d’identity, dans lequel la lecture des données utilisateur (étendue user.read) est spécifiée pour Microsoft Graph :

{
  "AzureAd": {
    "Authority": "https://login.microsoftonline.com/{TENANT ID}",
    "ClientId": "{CLIENT ID}",
    "ValidateAuthority": true
  },
  "MicrosoftGraph": {
    "BaseUrl": "https://graph.microsoft.com",
    "Version": "v1.0",
    "Scopes": [
      "user.read"
    ]
  }
}

Dans l’exemple précédent, l’espace réservé {TENANT ID} est l’ID de l’annuaire (locataire), tandis que l’espace réservé {CLIENT ID} est l’ID de l’application (client). Pour plus d’informations, consultez Sécuriser une application autonome ASP.NET Core Blazor WebAssembly avec Microsoft Entra ID.

Créez la configuration de projet et de classe suivante GraphAuthorizationMessageHandler dans le fichier Program pour utiliser l’API Graph. L’URL de base et les étendues sont fournies au gestionnaire à partir de la configuration.

GraphAuthorizationMessageHandler.cs :

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.WebAssembly.Authentication;

namespace BlazorSample;

public class GraphAuthorizationMessageHandler : AuthorizationMessageHandler
{
    public GraphAuthorizationMessageHandler(IAccessTokenProvider provider,
        NavigationManager navigation, IConfiguration config)
        : base(provider, navigation)
    {
        ConfigureHandler(
            authorizedUrls: [ 
                string.Join("/",
                    config.GetSection("MicrosoftGraph")["BaseUrl"] ??
                        "https://graph.microsoft.com",
                    config.GetSection("MicrosoftGraph")["Version"] ??
                        "v1.0")
            ],
            scopes: config.GetSection("MicrosoftGraph:Scopes")
                        .Get<List<string>>() ?? [ "user.read" ]);
    }
}

La barre oblique de fin (/) de l’URL autorisée est requise. Le code précédent génère l’URL autorisée suivante à partir de la configuration des paramètres d’application ou correspond par défaut à l’URL autorisée suivante si la configuration des paramètres de l’application est manquante : https://graph.microsoft.com/v1.0/.

Dans le fichier Program, configurez le HttpClient nommé pour l’API Graph :

builder.Services.AddTransient<GraphAuthorizationMessageHandler>();

builder.Services.AddHttpClient("GraphAPI",
        client => client.BaseAddress = new Uri(
            string.Join("/",
                builder.Configuration.GetSection("MicrosoftGraph")["BaseUrl"] ??
                    "https://graph.microsoft.com",
                builder.Configuration.GetSection("MicrosoftGraph")["Version"] ??
                    "v1.0",
                string.Empty)))
    .AddHttpMessageHandler<GraphAuthorizationMessageHandler>();

Dans l’exemple précédent, le GraphAuthorizationMessageHandlerDelegatingHandler est inscrit en tant que service temporaire pour AddHttpMessageHandler. L’inscription temporaire est recommandée pour IHttpClientFactory, qui gère ses propres étendues de DI. Pour plus d'informations, reportez-vous aux ressources suivantes :

• Classes de composants de base de l’utilitaire pour gérer une étendue de DI
• Détecter les éléments jetables temporaires côté client

Une barre oblique de fin (/) sur l’adresse de base est requise. Dans le code précédent, le troisième argument de string.Join est string.Empty pour s’assurer que la barre oblique de fin est présente : https://graph.microsoft.com/v1.0/.

Appeler l’API Graph à partir d’un composant à l’aide d’un HttpClient nommé

La classe UserInfo.cs désigne les propriétés de profil utilisateur requises avec l’attribut JsonPropertyNameAttribute et le nom JSON utilisé par ME-ID. L’exemple suivant configure les propriétés du numéro de téléphone mobile et de l’emplacement du bureau de l’utilisateur.

UserInfo.cs :

using System.Text.Json.Serialization;

namespace BlazorSample;

public class UserInfo
{
    [JsonPropertyName("mobilePhone")]
    public string? MobilePhone { get; set; }

    [JsonPropertyName("officeLocation")]
    public string? OfficeLocation { get; set; }
}

Dans le composant UserData suivant, un HttpClient est créé pour API Graph pour émettre une requête de données de profil de l’utilisateur. La ressource me (me) est ajoutée à l’URL de base avec la version de la requête d’API Graph. Les données JSON renvoyées par Graph sont désérialisées dans les propriétés de la classe UserInfo. Dans l’exemple suivant, le numéro de téléphone mobile est obtenu. Vous pouvez ajouter du code similaire pour inclure l’emplacement du bureau du profil ME-ID de l’utilisateur si vous le souhaitez (userInfo.OfficeLocation). Si la requête de jeton d’accès échoue, l’utilisateur est redirigé pour se connecter à l’application pour un nouveau jeton d’accès.

UserData.razor :

@page "/user-data"
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@attribute [Authorize]
@inject IConfiguration Config
@inject IHttpClientFactory ClientFactory

<PageTitle>User Data</PageTitle>

<h1>Microsoft Graph User Data</h1>

@if (!string.IsNullOrEmpty(userInfo?.MobilePhone))
{
    <p>Mobile Phone: @userInfo.MobilePhone</p>
}

@code {
    private UserInfo? userInfo;

    protected override async Task OnInitializedAsync()
    {
        try
        {
            var client = ClientFactory.CreateClient("GraphAPI");

            userInfo = await client.GetFromJsonAsync<UserInfo>("me");
        }
        catch (AccessTokenNotAvailableException exception)
        {
            exception.Redirect();
        }
    }
}

Ajoutez un lien vers la page du composant dans le composant NavMenu (Layout/NavMenu.razor) :

<div class="nav-item px-3">
    <NavLink class="nav-link" href="user-data">
        <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> User Data
    </NavLink>
</div>

La séquence suivante décrit le nouveau flux utilisateur pour les étendues de l’API Graph :

1. Le nouvel utilisateur se connecte à l’application pour la première fois.
2. L’utilisateur consent à utiliser l’application dans l’interface utilisateur de consentement Azure.
3. L’utilisateur accède à une page du composant qui requiert des données de l’API Graph pour la première fois.
4. L’utilisateur est redirigé vers l’interface utilisateur de consentement Azure pour donner son consentement aux étendues de l’API Graph.
5. Les données utilisateur de l’API Graph sont retournées.

Si vous préférez que l’approvisionnement de l’étendue (consentement pour les étendues de l’API Graph) survienne lors de la connexion initiale, fournissez des étendues à l’authentification MSAL en tant qu’étendues de jeton d’accès par défaut dans le fichier Program :

+ var scopes = builder.Configuration.GetSection("MicrosoftGraph:Scopes")
+     .Get<List<string>>() ?? [ "user.read" ];

builder.Services.AddMsalAuthentication(options =>
{
    builder.Configuration.Bind("AzureAd", options.ProviderOptions.Authentication);

+   foreach (var scope in scopes)
+   {
+       options.ProviderOptions.DefaultAccessTokenScopes.Add(scope);
+   }
});

Lorsque les modifications précédentes sont apportées à l’application, le flux utilisateur adopte la séquence suivante :

1. Le nouvel utilisateur se connecte à l’application pour la première fois.
2. L’utilisateur consent à utiliser l’application et les étendues de l’API Graph dans l’interface utilisateur de consentement Azure.
3. L’utilisateur accède à une page du composant qui requiert des données de l’API Graph pour la première fois.
4. Les données utilisateur de l’API Graph sont retournées.

Lorsque vous effectuez des tests avec l’API Graph en local, nous vous recommandons d’utiliser une nouvelle session de navigateur privée/incognito pour chaque test afin d’empêcher les cookies persistants d’interférer avec les tests. Pour plus d’informations, consultez Sécuriser une application autonome ASP.NET Core Blazor WebAssembly avec Microsoft Entra ID.

Personnaliser les revendications utilisateur à l’aide d’un HttpClient nommé

Dans l’exemple suivant, l’application crée un numéro de téléphone mobile et des revendications d’emplacement de bureau pour l’utilisateur à partir des données de son profil utilisateur ME-ID. L’application doit avoir l’étendue de l’API Graph User.Read configurée dans ME-ID. Les comptes d’utilisateur de test dans ME-ID nécessitent une entrée pour le numéro de téléphone mobile et l’emplacement du bureau, qui peuvent être ajoutés via le portail Azure à leurs profils utilisateur.

Si vous n’avez pas encore ajouté la classe UserInfo à l’application en suivant les instructions décrites plus haut dans cet article, ajoutez la classe suivante et désignez les propriétés de profil utilisateur requises avec l’attribut JsonPropertyNameAttribute et le nom JSON utilisé par ME-ID. L’exemple suivant configure les propriétés du numéro de téléphone mobile et de l’emplacement du bureau de l’utilisateur.

UserInfo.cs :

using System.Text.Json.Serialization;

namespace BlazorSample;

public class UserInfo
{
    [JsonPropertyName("mobilePhone")]
    public string? MobilePhone { get; set; }

    [JsonPropertyName("officeLocation")]
    public string? OfficeLocation { get; set; }
}

Dans la fabrique de compte d’utilisateur personnalisée suivante :

• Un ILogger (logger) est inclus pour des raisons pratiques au cas où vous souhaitez consigner des informations ou des erreurs dans la méthode CreateUserAsync.
• Si une exception AccessTokenNotAvailableException est renvoyée, l’utilisateur est redirigé vers le fournisseur d’identity pour se connecter à son compte. Des actions supplémentaires ou différentes peuvent être effectuées lors de l’échec de la requête d’un jeton d’accès. Par exemple, l’application peut enregistrer le AccessTokenNotAvailableException et créer un ticket de support pour une investigation plus approfondie.
• Le framework RemoteUserAccount représente le compte de l’utilisateur. Si l’application nécessite une classe de compte d’utilisateur personnalisée qui étend RemoteUserAccount, changez la classe de compte d’utilisateur personnalisée pour RemoteUserAccount dans le code suivant.

CustomAccountFactory.cs :

using System.Net.Http.Json;
using System.Security.Claims;
using Microsoft.AspNetCore.Components.WebAssembly.Authentication;
using Microsoft.AspNetCore.Components.WebAssembly.Authentication.Internal;

public class CustomAccountFactory(IAccessTokenProviderAccessor accessor,
        IHttpClientFactory clientFactory,
        ILogger<CustomAccountFactory> logger)
    : AccountClaimsPrincipalFactory<RemoteUserAccount>(accessor)
{
    private readonly ILogger<CustomAccountFactory> logger = logger;
    private readonly IHttpClientFactory clientFactory = clientFactory;

    public override async ValueTask<ClaimsPrincipal> CreateUserAsync(
        RemoteUserAccount account,
        RemoteAuthenticationUserOptions options)
    {
        var initialUser = await base.CreateUserAsync(account, options);

        if (initialUser.Identity is not null && 
            initialUser.Identity.IsAuthenticated)
        {
            var userIdentity = initialUser.Identity as ClaimsIdentity;

            if (userIdentity is not null)
            {
                try
                {
                    var client = clientFactory.CreateClient("GraphAPI");

                    var userInfo = await client.GetFromJsonAsync<UserInfo>("me");

                    if (userInfo is not null)
                    {
                        userIdentity.AddClaim(new Claim("mobilephone",
                            userInfo.MobilePhone ?? "(000) 000-0000"));
                        userIdentity.AddClaim(new Claim("officelocation",
                            userInfo.OfficeLocation ?? "Not set"));
                    }
                }
                catch (AccessTokenNotAvailableException exception)
                {
                    exception.Redirect();
                }
            }
        }

        return initialUser;
    }
}

L’authentification MSAL est configurée pour utiliser la fabrique de compte d’utilisateur personnalisée. Commencez par confirmer que le Program fichier utilise l’espace Microsoft.AspNetCore.Components.WebAssembly.Authentication de noms :

using Microsoft.AspNetCore.Components.WebAssembly.Authentication;

Dans le fichier Program, recherchez l’appel à la méthode d’extension AddMsalAuthentication. Mettez à jour le code suivant, ce qui inclut un appel à AddAccountClaimsPrincipalFactory qui ajoute une fabrique de principal de revendications de compte avec le CustomAccountFactory.

Si l’application utilise une classe de compte d’utilisateur personnalisée qui étend RemoteUserAccount, changez la classe de compte d’utilisateur personnalisé de votre application pour RemoteUserAccount dans le code suivant.

builder.Services.AddMsalAuthentication<RemoteAuthenticationState, 
    RemoteUserAccount>(options =>
    {
        builder.Configuration.Bind("AzureAd", 
            options.ProviderOptions.Authentication);
    })
    .AddAccountClaimsPrincipalFactory<RemoteAuthenticationState, RemoteUserAccount, 
        CustomAccountFactory>();

L’exemple précédent concerne une application qui utilise l’authentification ME-ID avec MSAL. Des modèles similaires existent pour l’authentification OIDC et l’API. Pour plus d’informations, consultez les exemples de la section Personnaliser l’utilisateur avec une revendication de charge utile de l’article scénarios de sécurité supplémentaires d’ASP.NET CoreBlazor WebAssembly.

Vous pouvez utiliser le composant UserClaims suivant pour étudier les revendications de l’utilisateur après l’authentification de l’utilisateur avec ME-ID :

UserClaims.razor :

@page "/user-claims"
@using System.Security.Claims
@using Microsoft.AspNetCore.Authorization
@attribute [Authorize]
@inject AuthenticationStateProvider AuthenticationStateProvider

<h1>User Claims</h1>

@if (claims.Any())
{
    <ul>
        @foreach (var claim in claims)
        {
            <li>@claim.Type: @claim.Value</li>
        }
    </ul>
}
else
{
    <p>No claims found.</p>
}

@code {
    private IEnumerable<Claim> claims = Enumerable.Empty<Claim>();

    protected override async Task OnInitializedAsync()
    {
        var authState = await AuthenticationStateProvider
            .GetAuthenticationStateAsync();
        var user = authState.User;

        claims = user.Claims;
    }
}

Ajoutez un lien vers la page du composant dans le composant NavMenu (Layout/NavMenu.razor) :

<div class="nav-item px-3">
    <NavLink class="nav-link" href="user-claims">
        <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> User Claims
    </NavLink>
</div>

Lorsque vous effectuez des tests avec l’API Graph en local, nous vous recommandons d’utiliser une nouvelle session de navigateur privée/incognito pour chaque test afin d’empêcher les cookies persistants d’interférer avec les tests. Pour plus d’informations, consultez Sécuriser une application autonome ASP.NET Core Blazor WebAssembly avec Microsoft Entra ID.