Compartilhar via

Habilitar a autenticação em seu próprio aplicativo Web usando o Azure AD B2C

Importante

A partir de 1º de maio de 2025, o Azure AD B2C não estará mais disponível para compra para novos clientes. Saiba mais em nossas perguntas frequentes.

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 .

Use este artigo em conjunto com Configurar a autenticação em um aplicativo Web de exemplo, substituindo o aplicativo Web de exemplo por seu próprio aplicativo Web.

Pré-requisitos

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

Etapa 1: Criar um projeto de aplicativo Web

Você pode usar um projeto de aplicativo Web MVC (model-view-controller) ASP.NET existente ou criar um. Para criar um novo projeto, abra um shell de comando e insira o seguinte comando:

dotnet new mvc -o mywebapp

O comando anterior faz o seguinte:

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

Etapa 2: Adicionar as bibliotecas de autenticação

Adicione a biblioteca da Microsoft Identity Web, que é um conjunto de bibliotecas do ASP.NET Core que simplificam a adição do suporte de autenticação e autorização do Azure AD B2C ao seu aplicativo Web. A biblioteca da Web de identidade da Microsoft configura o pipeline de autenticação com autenticação baseada em cookie. Ele cuida do 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 web do Microsoft Identity, instale os pacotes executando os seguintes comandos:

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

Etapa 3: Iniciar as bibliotecas de autenticação

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

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

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

Como a Microsoft Identity Web usa a autenticação baseada em cookie 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 AzureAdB2C aplicativo e inicia o controlador de middleware com sua exibição.

Substitua a ConfigureServices(IServiceCollection services) função pelo seguinte snippet 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 Configure função pelo seguinte snippet 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 interface do usuário

Para adicionar elementos de interface do usuário, use uma exibição parcial que contenha lógica para verificar se os usuários estão conectados. Se os usuários não estiverem conectados, a exibição parcial renderizará o botão de entrada. Se eles estiverem conectados, ele mostrará o nome de exibição e o botão de saída do usuário.

Crie um novo arquivo, _LoginPartial.cshtml, dentro da pasta /Views/Shared com o seguinte snippet 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 adicionado. O arquivo _Layout.cshtml é um layout comum que oferece aos usuários uma experiência consistente conforme eles vão de página em página. O layout inclui elementos comuns da interface do usuário, como o cabeçalho e o rodapé do aplicativo.

Observação

Dependendo da versão do .NET Core que você está executando e se você está adicionando entrada a um aplicativo existente, os elementos da interface do usuário podem parecer diferentes. Nesse caso, certifique-se de incluir _LoginPartial no local adequado dentro do layout da página.

Abra o arquivo /Views/Shared/_Layout.cshtml e adicione o elemento a seguir 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 você criará na próxima etapa.

Etapa 5: Adicionar o modo de exibição de declarações

Para exibir as declarações de 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ê adicionará a ação Claims que vincula a exibição Claims.cshtml ao controlador Home . A Claims ação usa o Authorize atributo, que limita o acesso à ação a usuários autenticados.

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

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

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

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 appsettings.jsone adicione as seguintes configurações:

"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 autenticação em um exemplo de aplicativo Web . 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> pelo 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 de usuário que você criou na Etapa 1.

Etapa 7: Executar seu aplicativo

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

Depois de autenticado com êxito, você verá seu nome de exibição na barra de navegação. Para exibir as declarações que o token do Azure AD B2C retorna ao seu aplicativo, selecione Declarações.

Próximas etapas