Tutoriel : ajouter une connexion à une application

  • Article

Dans le tutoriel précédent, un projet ASP.NET Core a été créé et configuré pour l’authentification. Ce tutoriel installe les packages requis et ajoute du code qui implémente l’authentification à l’expérience de connexion et de déconnexion.

Dans ce tutoriel, vous allez :

  • Identifier et installer les packages NuGet nécessaires pour l’authentification
  • Implémenter l’authentification dans le code
  • Ajouter les expériences de connexion et de déconnexion

Prérequis

Installer des packages d’identité

Les packages NuGet liés à l’identité doivent être installés dans le projet pour que l’authentification des utilisateurs soit activée.

  1. Dans le menu supérieur de Visual Studio, sélectionnez Outils > Gestionnaire de package NuGet > Gérer les packages NuGet pour la solution.
  2. Avec l’onglet Parcourir sélectionné, recherchez et sélectionnez Microsoft.Identity.Web.UI. Cochez la case Projet, puis sélectionnez Installer.
  3. Répétez cette opération pour Microsoft.Identity.Web.Diagnostics et Microsoft.Identity.Web.DownstreamApi.

Implémenter l’authentification et acquérir des jetons

  1. Ouvrez Program.cs et remplacez l’intégralité du contenu du fichier par l’extrait de code suivant :

    // <ms_docref_import_types>
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc.Authorization;
using Microsoft.Identity.Web;
using Microsoft.Identity.Web.UI;
// </ms_docref_import_types>

// <ms_docref_add_msal>
WebApplicationBuilder builder = WebApplication.CreateBuilder(args);
IEnumerable<string>? initialScopes = builder.Configuration["DownstreamApi:Scopes"]?.Split(' ');


builder.Services.AddMicrosoftIdentityWebAppAuthentication(builder.Configuration, "AzureAd")
    .EnableTokenAcquisitionToCallDownstreamApi(initialScopes)
        .AddDownstreamApi("DownstreamApi", builder.Configuration.GetSection("DownstreamApi"))
        .AddInMemoryTokenCaches();
// </ms_docref_add_msal>

// <ms_docref_add_default_controller_for_sign-in-out>
builder.Services.AddRazorPages().AddMvcOptions(options =>
    {
        var policy = new AuthorizationPolicyBuilder()
                      .RequireAuthenticatedUser()
                      .Build();
        options.Filters.Add(new AuthorizeFilter(policy));
    }).AddMicrosoftIdentityUI();
// </ms_docref_add_default_controller_for_sign-in-out>

// <ms_docref_enable_authz_capabilities>
WebApplication app = builder.Build();

app.UseAuthentication();
app.UseAuthorization();
// </ms_docref_enable_authz_capabilities>

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.MapRazorPages();
app.MapControllers();

app.Run();

Ajouter l’expérience de connexion et de déconnexion

Après avoir installé les packages NuGet et ajouté le code nécessaire pour l’authentification, ajoutez les expériences de connexion et de déconnexion.

Créer le fichier _LoginPartial.cshtml

  1. Développez Pages, cliquez avec le bouton droit sur Partagé, puis sélectionnez Ajouter et page Razor.
  2. Sélectionnez Page Razor – Vide, puis Ajouter.
  3. Entrez le nom _LoginPartial.cshtml, puis sélectionnez Ajouter.

Modifier le fichier _LoginPartial.cshtml

  1. Ouvrez _LoginPartial.cshtml et ajoutez le code suivant pour ajouter l’expérience de connexion et de déconnexion :

    @using System.Security.Principal

<ul class="navbar-nav">
@if (User.Identity?.IsAuthenticated == true)
{
        <li class="nav-item">
            <span class="navbar-text text-dark">Hello @User.Identity?.Name!</span>
        </li>
        <li class="nav-item">
            <a class="nav-link text-dark" asp-area="MicrosoftIdentity" asp-controller="Account" asp-action="SignOut">Sign out</a>
        </li>
}
else
{
        <li class="nav-item">
            <a class="nav-link text-dark" asp-area="MicrosoftIdentity" asp-controller="Account" asp-action="SignIn">Sign in</a>
        </li>
}
</ul>

  2. Ouvrez _Layout.cshtml et ajoutez une référence à _LoginPartial que vous avez créé à l’étape précédente. Cette ligne unique doit être placée entre </ul> et </div> :

        </ul>
    <partial name="_LoginPartial" />
</div>

Étapes suivantes

Tutoriel : appeler une API et afficher les résultats