Événements
31 mars, 23 h - 2 avr., 23 h
L’événement de la communauté Microsoft Fabric, Power BI, SQL et AI ultime. 31 mars au 2 avril 2025.
Inscrivez-vous aujourd’huiCe navigateur n’est plus pris en charge.
Effectuez une mise à niveau vers Microsoft Edge pour tirer parti des dernières fonctionnalités, des mises à jour de sécurité et du support technique.
Notes
Ceci n’est pas la dernière version de cet article. Pour la version actuelle, consultez la version .NET 9 de cet article.
Avertissement
Cette version d’ASP.NET Core n’est plus prise en charge. Pour plus d’informations, consultez la stratégie de support .NET et .NET Core. Pour la version actuelle, consultez la version .NET 9 de cet article.
Important
Ces informations portent sur la préversion du produit, qui est susceptible d’être en grande partie modifié avant sa commercialisation. Microsoft n’offre aucune garantie, expresse ou implicite, concernant les informations fournies ici.
Pour la version actuelle, consultez la version .NET 9 de cet article.
Cet article explique comment créer une applicationBlazor WebAssembly autonome qui utilise Microsoft Entra ID (ME-ID) pour l’authentification.
Pour obtenir une couverture supplémentaire du scénario de sécurité après avoir lu cet article, consultez ASP.NET Core Blazor WebAssembly scénarios de sécurité supplémentaires.
Les sous-sections de la procédure pas à pas expliquent comment :
Suivez les conseils d’aide fournis dans Démarrage rapide : Configurer un locataire pour créer un locataire dans ME-ID.
Inscrivez une application ME-ID :
https://localhost/authentication/login-callback
. Si vous connaissez l’URI de redirection de production de l’hôte par défaut Azure (par exemple azurewebsites.net
) ou de l’hôte de domaine personnalisé (par exemple contoso.com
), vous pouvez également ajouter l’URI de redirection de production en même temps que vous en fournissant l’URI de redirection localhost
. Veillez à inclure le numéro de port des autres ports que le port :443
dans les URI de redirection de production que vous ajoutez.Notes
Il n’est pas nécessaire de fournir le numéro de port d’un URI de redirection localhost
ME-ID. Pour plus d’informations, consultez Restrictions et limitations de l’URI de redirection (URL de réponse) : exceptions localhost (documentation Entra).
Enregistrez les informations suivantes :
00001111-aaaa-2222-bbbb-3333cccc4444
)aaaabbbb-0000-cccc-1111-dddd2222eeee
)Dans Authentification>Configurations de la plateforme>Application monopage :
https://localhost/authentication/login-callback
est présent.Créez l’application dans un dossier vide. Remplacez les espaces réservés dans la commande suivante par les informations notées plus tôt, puis exécutez la commande dans un interpréteur de commandes :
dotnet new blazorwasm -au SingleOrg --client-id "{CLIENT ID}" -o {PROJECT NAME} --tenant-id "{TENANT ID}"
Espace réservé | Nom du portail Azure | Exemple |
---|---|---|
{PROJECT NAME} |
— | BlazorSample |
{CLIENT ID} |
ID d’application (client) | 00001111-aaaa-2222-bbbb-3333cccc4444 |
{TENANT ID} |
ID du répertoire (locataire) | aaaabbbb-0000-cccc-1111-dddd2222eeee |
L’emplacement de sortie spécifié avec l’option -o|--output
crée un dossier de projet s’il n’existe pas, et devient partie intégrante du nom du projet.
Ajoutez un MsalProviderOptions pour l’autorisation User.Read
avec DefaultAccessTokenScopes :
builder.Services.AddMsalAuthentication(options =>
{
...
options.ProviderOptions.DefaultAccessTokenScopes
.Add("https://graph.microsoft.com/User.Read");
});
Utilisez l’une des approches suivantes pour exécuter l’application :
dotnet watch
(ou dotnet run
) à partir du dossier de l’application.Cette section décrit les parties d’une application générées à partir du modèle de projet Blazor WebAssembly ainsi que la façon dont l’application est configurée. Il n’existe aucun conseil d’aide spécifique à suivre dans cette section pour une application de base, si vous avez créé l’application en suivant les conseils d’aide de la section Procédure pas à pas. Les conseils d’aide de cette section sont utiles pour mettre à jour une application afin d’authentifier et d’autoriser les utilisateurs. Toutefois, il existe une autre approche pour la mise à jour d’une application. Elle consiste à créer une application à partir des conseils d’aide de la section Procédure pas à pas, et à déplacer les composants, les classes et les ressources de l’application à mettre à jour vers la nouvelle application.
Quand une application est créée pour utiliser des comptes professionnels ou scolaires (SingleOrg
), l’application reçoit automatiquement une référence de package pour la bibliothèque d’authentification Microsoft (Microsoft.Authentication.WebAssembly.Msal
). Le package fournit un ensemble de primitives qui permettent à l’application d’authentifier les utilisateurs et d’obtenir des jetons pour appeler les API protégées.
Si vous ajoutez l’authentification à une application, ajoutez manuellement le package Microsoft.Authentication.WebAssembly.Msal
à l’application.
Notes
Pour obtenir des conseils sur l’ajout de packages à des applications .NET, consultez les articles figurant sous Installer et gérer des packages dans Flux de travail de la consommation des packages (documentation NuGet). Vérifiez les versions du package sur NuGet.org.
Le package Microsoft.Authentication.WebAssembly.Msal
ajoute de façon transitive le package Microsoft.AspNetCore.Components.WebAssembly.Authentication
à l’application.
La prise en charge de l’authentification des utilisateurs est inscrite dans le conteneur de service avec la AddMsalAuthentication méthode d’extension fournie par le package Microsoft.Authentication.WebAssembly.Msal
. Cette méthode configure les services nécessaires à l’application pour interagir avec le fournisseur d’identité (Identity Provider).
Dans le fichier Program
:
builder.Services.AddMsalAuthentication(options =>
{
builder.Configuration.Bind("AzureAd", options.ProviderOptions.Authentication);
});
La méthode AddMsalAuthentication accepte un rappel pour configurer les paramètres nécessaires à l’authentification d’une application. Les valeurs requises pour configurer l’application peuvent être obtenues à partir de la configuration ME-ID lorsque vous inscrivez l’application.
La configuration est fournie par le fichier wwwroot/appsettings.json
:
{
"AzureAd": {
"Authority": "https://login.microsoftonline.com/{TENANT ID}",
"ClientId": "{CLIENT ID}",
"ValidateAuthority": true
}
}
Exemple :
{
"AzureAd": {
"Authority": "https://login.microsoftonline.com/e86c78e2-...-918e0565a45e",
"ClientId": "00001111-aaaa-2222-bbbb-3333cccc4444",
"ValidateAuthority": true
}
}
Le modèle Blazor WebAssembly ne configure pas automatiquement l’application afin qu’elle demande un jeton d’accès pour une API sécurisée. Pour provisionner un jeton d’accès dans le cadre du flux de connexion, ajoutez l’étendue aux étendues de jeton d’accès par défaut de MsalProviderOptions :
builder.Services.AddMsalAuthentication(options =>
{
...
options.ProviderOptions.DefaultAccessTokenScopes.Add("{SCOPE URI}");
});
Spécifiez des étendues supplémentaires avec AdditionalScopesToConsent
:
options.ProviderOptions.AdditionalScopesToConsent.Add("{ADDITIONAL SCOPE URI}");
Notes
AdditionalScopesToConsent ne peut pas provisionner les autorisations des utilisateurs délégués pour Microsoft Graph par l’interface utilisateur de consentement de Microsoft Entra ID quand un utilisateur utilise d’abord une application inscrite dans Microsoft Azure. Pour plus d’informations, consultez Utiliser l’API Graph avec Blazor WebAssembly ASP.NET Core.
Pour plus d’informations, consultez les ressources suivantes :
Le framework utilise par défaut le mode de connexion par fenêtre indépendante, et revient au mode de connexion par redirection si une fenêtre indépendante ne peut pas être ouverte. Configurez MSAL pour utiliser le mode de connexion par redirection en affectant la valeur redirect
à la propriété LoginMode
de MsalProviderOptions :
builder.Services.AddMsalAuthentication(options =>
{
...
options.ProviderOptions.LoginMode = "redirect";
});
Le paramètre par défaut est popup
, et la valeur de chaîne ne respecte pas la casse.
L’espace de noms Microsoft.AspNetCore.Components.Authorization est rendu disponible dans l’ensemble de l’application via le fichier _Imports.razor
:
@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.AspNetCore.Components.WebAssembly.Http
@using Microsoft.JSInterop
@using {APPLICATION ASSEMBLY}
@using {APPLICATION ASSEMBLY}.Shared
La page d’index (wwwroot/index.html
) comprend un script qui définit AuthenticationService
en JavaScript. AuthenticationService
gère les détails de bas niveau du protocole OIDC. L’application appelle de manière interne les méthodes définies dans le script pour effectuer les opérations d’authentification.
<script src="_content/Microsoft.Authentication.WebAssembly.Msal/AuthenticationService.js"></script>
Le composant App
(App.razor
) est similaire au composant App
présent dans les applications Blazor Server :
RedirectToLogin
.RedirectToLogin
gère la redirection des utilisateurs non autorisés vers la page de connexion.RedirectToLogin
.RedirectToLogin
gère la redirection des utilisateurs non autorisés vers la page de connexion.En raison des changements apportés au framework dans les différentes versions d’ASP.NET Core, la syntaxe Razor du composant App
(App.razor
) n’est pas affichée dans cette section. Pour inspecter la syntaxe du composant d’une version donnée, utilisez l’une des approches suivantes :
Créez une application provisionnée pour l’authentification à partir du modèle de projet Blazor WebAssembly par défaut correspondant à la version d’ASP.NET Core que vous prévoyez d’utiliser. Inspectez le composant App
(App.razor
) dans l’application générée.
Inspectez le composant App
(App.razor
) dans source de référence. Sélectionnez la version dans le sélecteur de branche, puis recherchez le composant dans le dossier ProjectTemplates
du référentiel, car il a été déplacé au fil des années.
Notes
Les liens de documentation vers la source de référence .NET chargent généralement la branche par défaut du référentiel, qui représente le développement actuel pour la prochaine version de .NET. Pour sélectionner une balise pour une version spécifique, utilisez la liste déroulante Échanger les branches ou les balises. Pour plus d’informations, consultez Comment sélectionner une balise de version du code source ASP.NET Core (dotnet/AspNetCore.Docs #26205).
Le composant RedirectToLogin
(RedirectToLogin.razor
) :
Inspectez le composant RedirectToLogin
dans source de référence. L’emplacement du composant ayant changé au fil du temps, servez-vous des outils de recherche GitHub pour le retrouver.
Notes
Les liens de documentation vers la source de référence .NET chargent généralement la branche par défaut du référentiel, qui représente le développement actuel pour la prochaine version de .NET. Pour sélectionner une balise pour une version spécifique, utilisez la liste déroulante Échanger les branches ou les balises. Pour plus d’informations, consultez Comment sélectionner une balise de version du code source ASP.NET Core (dotnet/AspNetCore.Docs #26205).
Le composant LoginDisplay
(LoginDisplay.razor
) est affiché dans le composant MainLayout
(MainLayout.razor
) et gère les comportements suivants :
En raison des changements apportés au framework dans les différentes versions d’ASP.NET Core, la syntaxe Razor du composant LoginDisplay
n’est pas affichée dans cette section. Pour inspecter la syntaxe du composant d’une version donnée, utilisez l’une des approches suivantes :
Créez une application provisionnée pour l’authentification à partir du modèle de projet Blazor WebAssembly par défaut correspondant à la version d’ASP.NET Core que vous prévoyez d’utiliser. Inspectez le composant LoginDisplay
dans l’application générée.
Inspectez le composant LoginDisplay
dans la source de référence. L’emplacement du composant ayant changé au fil du temps, servez-vous des outils de recherche GitHub pour le retrouver. Le contenu mis en modèle pour Hosted
égal à true
est utilisé.
Notes
Les liens de documentation vers la source de référence .NET chargent généralement la branche par défaut du référentiel, qui représente le développement actuel pour la prochaine version de .NET. Pour sélectionner une balise pour une version spécifique, utilisez la liste déroulante Échanger les branches ou les balises. Pour plus d’informations, consultez Comment sélectionner une balise de version du code source ASP.NET Core (dotnet/AspNetCore.Docs #26205).
La page produite par le composant Authentication
(Pages/Authentication.razor
) définit les routes nécessaires à la gestion des différentes phases d’authentification.
Le composant RemoteAuthenticatorView :
Microsoft.AspNetCore.Components.WebAssembly.Authentication
.@page "/authentication/{action}"
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
<RemoteAuthenticatorView Action="@Action" />
@code {
[Parameter]
public string? Action { get; set; }
}
Notes
Les types références null (NRT, nullable reference types) et l’analyse statique de l’état nul du compilateur .NET sont pris en charge dans ASP.NET Core dans .NET 6 ou une version ultérieure. Avant la publication d’ASP.NET Core dans .NET 6, le type string
apparaît sans la désignation de type nul (?
).
Pour activer la journalisation de débogage ou de trace pour l’authentification Blazor WebAssembly, consultez la section Journalisation d’authentification côté client de la Journalisation Blazor ASP.NET Core avec le sélecteur de version d’article défini sur ASP.NET Core 7.0 ou une version ultérieure.
Mauvaise configuration de l’application ou du fournisseur d’identité (Identity Provider)
Les erreurs les plus courantes sont provoquées par une configuration incorrecte. Voici quelques exemples :
localhost
. Cependant, la configuration du port de l’application et le port où l’application s’exécute doivent correspondre pour les adresses non-localhost
.Les sections de configuration présentes dans les conseils d’aide de cet article montrent des exemples de configuration appropriée. Examinez attentivement chaque section de l’article à la recherche d’une mauvaise configuration de l’application et du fournisseur d’identité.
Si la configuration semble correcte :
Analysez les journaux des applications.
Examinez le trafic réseau entre l’application cliente et le fournisseur d’identité ou l’application serveur à l’aide des outils de développement du navigateur. Bien souvent, un message d’erreur exact ou un message indiquant la cause du problème est retourné au client par le fournisseur d’identité ou l’application serveur, une fois qu’une demande a été effectuée. Vous trouverez des conseils d’aide sur les outils de développement dans les articles suivants :
Pour les versions de Blazor dans lesquelles un jeton JSON Web Token (JWT) est utilisé, décodez le contenu du jeton utilisé pour authentifier un client ou pour accéder à une API web de serveur, en fonction de l’emplacement du problème. Pour plus d’informations, consultez Inspecter le contenu d’un jeton JWT (JSON Web Token).
L’équipe de documentation peut répondre aux commentaires et bogues relatifs aux articles (ouvrez un problème à partir de la section de commentaires de cette page). Toutefois, elle ne peut pas fournir de support produit. Plusieurs forums de support publics sont disponibles pour vous aider à résoudre les problèmes liés à une application. Nous recommandons ce qui suit :
Les forums précédents ne sont pas détenus ou contrôlés par Microsoft.
Pour les rapports de bogues de framework reproductibles, non liés à la sécurité, non sensibles et non confidentiels, ouvrez un problème auprès de l’unité de produit ASP.NET Core. N’ouvrez pas de problème auprès de l’unité de produit tant que vous n’avez pas investigué de manière approfondie la cause du problème, sans pouvoir le résoudre par vous-même ou avec l’aide de la communauté sur un forum de support public. L’unité de produit ne peut pas résoudre les problèmes d’applications individuelles qui sont défaillantes en raison d’une mauvaise configuration ou de cas d’usage impliquant des services tiers. Si un rapport est de nature sensible ou confidentielle, ou s’il décrit une faille de sécurité potentielle dans le produit que des attaquants peuvent exploiter, consultez Signaler des problèmes de sécurité et des bugs (référentiel GitHub dotnet/aspnetcore
).
Client non autorisé pour ME-ID
Info : Échec de l’autorisation Microsoft.AspNetCore.Authorization.DefaultAuthorizationService[2]. Ces conditions n’ont pas été remplies : DenyAnonymousAuthorizationRequirement : Nécessite un utilisateur authentifié.
Erreur de rappel de la connexion à partir de ME-ID :
unauthorized_client
AADB2C90058: The provided application is not configured to allow public clients.
Pour résoudre l’erreur :
allowPublicClient
la valeur null
ou true
.Les cookies et les données de site peuvent persister au fil des mises à jour des applications, et interférer avec les tests et la résolution des problèmes. Effacez ce qui suit quand vous apportez des changements au code d’application, au compte d’utilisateur du fournisseur ou à la configuration de l’application :
Il existe une approche qui permet d’empêcher les cookies et les données de site persistants d’interférer avec les tests et la résolution des problèmes. Elle consiste à :
C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe
C:\Program Files (x86)\Google\Chrome\Application\chrome.exe
C:\Program Files\Mozilla Firefox\firefox.exe
-inprivate
.--incognito --new-window {URL}
, où l’espace réservé {URL}
correspond à l’URL à ouvrir (par exemple, https://localhost:5001
).-private -url {URL}
, où l’espace réservé {URL}
correspond à l’URL à ouvrir (par exemple https://localhost:5001
).Firefox Auth Testing
Une application fonctionnelle peut échouer immédiatement après la mise à niveau du kit SDK .NET Core sur l’ordinateur de développement ou la modification des versions de package au sein de l’application. Dans certains cas, les packages incohérents peuvent bloquer une application quand vous effectuez des mises à niveau majeures. Vous pouvez résoudre la plupart de ces problèmes en suivant les instructions suivantes :
dotnet nuget locals all --clear
à partir d’un interpréteur de commandes.bin
et obj
du projet.Notes
L’utilisation de versions de package incompatibles avec le framework cible de l’application n’est pas prise en charge. Pour plus d’informations sur un package, utilisez la Galerie NuGet ou l’Explorateur de packages FuGet.
Quand vous testez et résolvez les problèmes liés à une solution Blazor WebAssembly hébergée, vérifiez que vous exécutez l’application à partir du projet Server
.
Le composant User
suivant peut être utilisé directement dans les applications, ou servir de base à une personnalisation supplémentaire.
User.razor
:
@page "/user"
@attribute [Authorize]
@using System.Text.Json
@using System.Security.Claims
@inject IAccessTokenProvider AuthorizationService
<h1>@AuthenticatedUser?.Identity?.Name</h1>
<h2>Claims</h2>
@foreach (var claim in AuthenticatedUser?.Claims ?? Array.Empty<Claim>())
{
<p class="claim">@(claim.Type): @claim.Value</p>
}
<h2>Access token</h2>
<p id="access-token">@AccessToken?.Value</p>
<h2>Access token claims</h2>
@foreach (var claim in GetAccessTokenClaims())
{
<p>@(claim.Key): @claim.Value.ToString()</p>
}
@if (AccessToken != null)
{
<h2>Access token expires</h2>
<p>Current time: <span id="current-time">@DateTimeOffset.Now</span></p>
<p id="access-token-expires">@AccessToken.Expires</p>
<h2>Access token granted scopes (as reported by the API)</h2>
@foreach (var scope in AccessToken.GrantedScopes)
{
<p>Scope: @scope</p>
}
}
@code {
[CascadingParameter]
private Task<AuthenticationState> AuthenticationState { get; set; }
public ClaimsPrincipal AuthenticatedUser { get; set; }
public AccessToken AccessToken { get; set; }
protected override async Task OnInitializedAsync()
{
await base.OnInitializedAsync();
var state = await AuthenticationState;
var accessTokenResult = await AuthorizationService.RequestAccessToken();
if (!accessTokenResult.TryGetToken(out var token))
{
throw new InvalidOperationException(
"Failed to provision the access token.");
}
AccessToken = token;
AuthenticatedUser = state.User;
}
protected IDictionary<string, object> GetAccessTokenClaims()
{
if (AccessToken == null)
{
return new Dictionary<string, object>();
}
// header.payload.signature
var payload = AccessToken.Value.Split(".")[1];
var base64Payload = payload.Replace('-', '+').Replace('_', '/')
.PadRight(payload.Length + (4 - payload.Length % 4) % 4, '=');
return JsonSerializer.Deserialize<IDictionary<string, object>>(
Convert.FromBase64String(base64Payload));
}
}
Pour décoder un jeton JWT (JSON Web Token), utilisez l’outil jwt.ms de Microsoft. Les valeurs de l’IU ne quittent jamais votre navigateur.
Exemple de jeton JWT codé (raccourci pour des raisons d’affichage) :
eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImtpZCI6Ilg1ZVhrNHh5b2pORnVtMWtsMll0djhkbE5QNC1j ... bQdHBHGcQQRbW7Wmo6SWYG4V_bU55Ug_PW4pLPr20tTS8Ct7_uwy9DWrzCMzpD-EiwT5IjXwlGX3IXVjHIlX50IVIydBoPQtadvT7saKo1G5Jmutgq41o-dmz6-yBMKV2_nXA25Q
Exemple JWT décodé par l’outil pour une application qui s’authentifie auprès d’Azure AAD B2C :
{
"typ": "JWT",
"alg": "RS256",
"kid": "X5eXk4xyojNFum1kl2Ytv8dlNP4-c57dO6QGTVBwaNk"
}.{
"exp": 1610059429,
"nbf": 1610055829,
"ver": "1.0",
"iss": "https://mysiteb2c.b2clogin.com/11112222-bbbb-3333-cccc-4444dddd5555/v2.0/",
"sub": "aaaaaaaa-0000-1111-2222-bbbbbbbbbbbb",
"aud": "00001111-aaaa-2222-bbbb-3333cccc4444",
"nonce": "bbbb0000-cccc-1111-dddd-2222eeee3333",
"iat": 1610055829,
"auth_time": 1610055822,
"idp": "idp.com",
"tfp": "B2C_1_signupsignin"
}.[Signature]
Commentaires sur ASP.NET Core
ASP.NET Core est un projet open source. Sélectionnez un lien pour fournir des commentaires :
Événements
31 mars, 23 h - 2 avr., 23 h
L’événement de la communauté Microsoft Fabric, Power BI, SQL et AI ultime. 31 mars au 2 avril 2025.
Inscrivez-vous aujourd’hui