Habilitar a autenticação no aplicativo Web usando o Azure AD B2C

Artigo
01/11/2024

Este artigo mostra como adicionar a autenticação do Azure AD B2C (Azure Active Directory B2C) ao seu próprio aplicativo Web ASP.NET. Saiba como criar um aplicativo Web ASP.NET Core com o middleware ASP.NET Core que usa o protocolo OpenID Connect.

Siga este artigo com o artigo Configurar a autenticação em um aplicativo Web de exemplo, trocando o aplicativo Web de exemplo pelo seu aplicativo Web.

Pré-requisitos

Para revisar os pré-requisitos e as instruções de integração, consulte Configurar autenticação em um exemplo de aplicativo Web.

Etapa 1: criar um projeto do aplicativo Web

Você pode usar um projeto de aplicativo Web do MVC (Model-View-Controller) ASP.NET existente ou criar um novo. Para criar um projeto, abra um shell de comando e digite o seguinte comando:

dotnet new mvc -o mywebapp

O comando anterior faz o seguinte:

Ele cria um novo aplicativo Web do MVC.
O parâmetro -o mywebapp cria um diretório chamado myWebApp com os arquivos de origem do aplicativo.

Etapa 2: adicionar as bibliotecas de autenticação

Adicionar a biblioteca do Microsoft Identity Web, que consiste em um conjunto de bibliotecas do ASP.NET Core que simplificam a adição da autenticação do Azure AD B2C e o suporte à autorização para seu aplicativo Web. A biblioteca da Web do Microsoft Identity configura o pipeline de autenticação com a autenticação baseada em cookies. Ela lida com o envio e recebimento de mensagens de autenticação HTTP, validação de token, extração de declarações e muito mais.

Para adicionar a biblioteca da Web do Microsoft Identity, instale os pacotes executando os seguintes comandos:

Visual Studio
Visual Studio Code

dotnet add package Microsoft.Identity.Web
dotnet add package Microsoft.Identity.Web.UI

Install-Package Microsoft.Identity.Web
Install-Package Microsoft.Identity.Web.UI

Etapa 3: iniciar as bibliotecas de autenticação

O middleware do Microsoft Identity Web usa uma classe de inicialização que é executada quando o processo de hospedagem é iniciado. Nesta etapa, você adiciona o código necessário para iniciar as bibliotecas de autenticação.

Abra o Startup.cs e no início da classe, adicione as seguintes declarações using:

using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Authentication.OpenIdConnect;
using Microsoft.Identity.Web;
using Microsoft.Identity.Web.UI;

Como o Microsoft Identity Web usa a autenticação baseada em cookies para proteger seu aplicativo Web, o código a seguir define as configurações de cookie SameSite. Em seguida, ele lê as configurações do aplicativo AzureAdB2C e inicia o controlador de middleware com sua exibição.

Substitua a função ConfigureServices(IServiceCollection services) pelo seguinte trecho de código:

public void ConfigureServices(IServiceCollection services)
{
    services.Configure<CookiePolicyOptions>(options =>
    {
        // This lambda determines whether user consent for non-essential cookies is needed for a given request.
        options.CheckConsentNeeded = context => true;
        options.MinimumSameSitePolicy = SameSiteMode.Unspecified;
        // Handling SameSite cookie according to https://learn.microsoft.com/aspnet/core/security/samesite?view=aspnetcore-3.1
        options.HandleSameSiteCookieCompatibility();
    });

    // Configuration to sign-in users with Azure AD B2C
    services.AddMicrosoftIdentityWebAppAuthentication(Configuration, "AzureAdB2C");

    services.AddControllersWithViews()
        .AddMicrosoftIdentityUI();

    services.AddRazorPages();

    //Configuring appsettings section AzureAdB2C, into IOptions
    services.AddOptions();
    services.Configure<OpenIdConnectOptions>(Configuration.GetSection("AzureAdB2C"));
}

O código a seguir adiciona a política de cookie e usa o modelo de autenticação. Substitua a função Configure pelo seguinte trecho de código:

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseExceptionHandler("/Home/Error");
        // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
        app.UseHsts();
    }

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

    // Add the Microsoft Identity Web cookie policy
    app.UseCookiePolicy();
    app.UseRouting();
    // Add the ASP.NET Core authentication service
    app.UseAuthentication();
    app.UseAuthorization();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllerRoute(
            name: "default",
            pattern: "{controller=Home}/{action=Index}/{id?}");
        
        // Add endpoints for Razor pages
        endpoints.MapRazorPages();
    });
};

Etapa 4: adicionar os elementos da IU

Para adicionar elementos da interface de usuário, use uma exibição parcial que contenha a lógica para verificação, para ver se um usuário está ou não conectado. Se usuários não estiverem conectados, a exibição parcial renderizará o botão de conexão. Se usuários estiverem conectados, ela mostrará o nome de exibição do usuário e o botão de saída.

Crie um novo arquivo, _LoginPartial.cshtml, dentro da pasta /Views/Shared com o seguinte trecho de código:

@using System.Security.Principal
@if (User.Identity.IsAuthenticated)
{
    <ul class="nav navbar-nav navbar-right">
        <li class="navbar-text">Hello @User.Identity.Name</li>
        <!-- The Account controller is not defined in this project. Instead, it is part of Microsoft.Identity.Web.UI nuget package and
            it defines some well known actions such as SignUp/In, SignOut and EditProfile-->
        <li class="navbar-btn">
            <form method="get" asp-area="MicrosoftIdentity" asp-controller="Account" asp-action="EditProfile">
                <button type="submit" class="btn btn-primary" style="margin-right:5px">Edit Profile</button>
            </form>
        </li>
        <li class="navbar-btn">
            <form method="get" asp-area="MicrosoftIdentity" asp-controller="Account" asp-action="SignOut">
                <button type="submit" class="btn btn-primary">Sign Out</button>
            </form>
        </li>
    </ul>
}
else
{
    <ul class="nav navbar-nav navbar-right">
        <li class="navbar-btn">
            <form method="get" asp-area="MicrosoftIdentity" asp-controller="Account" asp-action="SignIn">
                <button type="submit" class="btn btn-primary">Sign Up/In</button>
            </form>
        </li>
    </ul>
}

Modifique seu arquivo /Views/Shared_Layout.cshtml para incluir o arquivo _LoginPartial.cshtml que foi adicionado. O arquivo _Layout.cshtml é um layout comum que dá aos usuários uma experiência consistente ao ir de uma página a outra. O layout inclui elementos comuns da interface de usuário, como o cabeçalho do aplicativo e o rodapé.

Observação

Dependendo da versão do .NET Core em execução e da inclusão ou não de credenciais em um aplicativo existente, os elementos da IU podem variar. Nesse caso, você deve incluir _LoginPartial na localização apropriada dentro do layout da página.

Abra o arquivo /Views/Shared/_Layout.cshtml e adicione o seguinte elemento div.

<div class="navbar-collapse collapse">
...
</div>

Substitua esse elemento pelo seguinte código Razor:

<div class="navbar-collapse collapse">
  <ul class="nav navbar-nav">
    <li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
    <li><a asp-area="" asp-controller="Home" asp-action="Claims">Claims</a></li>
  </ul>
  <partial name="_LoginPartial" />
</div>

O código Razor anterior inclui um link para a ação Claims que será criada na próxima etapa.

Etapa 5: incluir a exibição das declarações

Para exibir as declarações do token de ID na pasta /Views/Home, adicione a exibição Claims.cshtml.

@using System.Security.Claims

@{
  ViewData["Title"] = "Claims";
}
<h2>@ViewData["Title"].</h2>

<table class="table-hover table-condensed table-striped">
  <tr>
    <th>Claim Type</th>
    <th>Claim Value</th>
  </tr>

  @foreach (Claim claim in User.Claims)
  {
    <tr>
      <td>@claim.Type</td>
      <td>@claim.Value</td>
    </tr>
  }
</table>

Nesta etapa, você adiciona a ação Claims que vincula a exibição Claims.cshtml ao controlador Residencial. A ação Claims usa o atributo Authorize, que limita o acesso à ação para usuários autenticados.

No controlador /Controllers/HomeController.cs, adicione a ação a seguir:

[Authorize]
public IActionResult Claims()
{
    return View();
}

No início da classe, adicione a seguinte declaração using:

using Microsoft.AspNetCore.Authorization;

Etapa 6: adicionar as configurações do aplicativo

As configurações do provedor de identidade do Azure AD B2C são armazenadas no arquivo appsettings.json. Abra o appsettings.json e adicione as configurações a seguir:

"AzureAdB2C": {
  "Instance": "https://<your-tenant-name>.b2clogin.com",
  "ClientId": "<web-app-application-id>",
  "Domain": "<your-b2c-domain>",
  "SignedOutCallbackPath": "/signout-oidc",
  "SignUpSignInPolicyId": "<your-sign-up-in-policy>"
}

As informações necessárias são descritas no artigo Configurar a autenticação em um aplicativo Web de amostra. Use as configurações a seguir:

Instância: substitua <your-tenant-name> pela primeira parte do nome do locatário do Azure AD B2C (por exemplo, https://contoso.b2clogin.com).
Domínio: substitua <your-b2c-domain> por seu nome de locatário completo do Azure AD B2C (por exemplo, contoso.onmicrosoft.com).
ID do cliente: substitua <web-app-application-id> pela ID do aplicativo da Etapa 2.
Nome da política: substitua <your-sign-up-in-policy> pelos fluxos do usuário criados na Etapa 1.

Etapa 7: executar seu aplicativo

Compile e execute o projeto.
Ir para https://localhost:5001.
Selecione Inscrever-se.
Conclua o processo de inscrição ou de entrada.

Depois de realizar a autenticação, seu nome será exibido na barra de navegação. Para exibir as declarações que o token do Azure AD B2C retorna para o aplicativo, selecione Declarações.

Próximas etapas

Saiba como Personalizar e aprimorar a experiência de autenticação do Azure AD B2C para o seu aplicativo Web.

Share via