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

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

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

Pré-requisitos

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

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 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 o Microsoft Identity Web usa autenticação baseada em cookies para proteger seu aplicativo Web, o código a seguir define as configurações de cookie do 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 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 cookies e usa o modelo de autenticação. Substitua a Configure função 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 interface do usuário

Para adicionar elementos da 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 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 o 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 à medida que 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.

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

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

Substitua este 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 Claims ação 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ê adiciona a ação que vincula Claims o modo de exibição Claims.cshtml ao controlador Home . A Claims ação usa o Authorize atributo, que limita o acesso à ação para 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, em seguida, adicione as seguintes definiçõ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 aplicativo Web de exemplo . Utilize as seguintes definições:

• 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 completo do locatário do Azure AD B2C (por exemplo, contoso.onmicrosoft.com).
• ID do cliente: substitua <web-app-application-id> pelo ID do aplicativo da etapa 2.
• Nome da política: substitua <your-sign-up-in-policy> pelos fluxos de usuário criados na Etapa 1.

Etapa 7: Executar seu aplicativo

1. Crie e execute o projeto.
2. Aceda a https://localhost:5001.
3. Selecione Inscrever-se/Entrar.
4. Conclua o processo de inscrição ou login.

Depois de autenticado com êxito, você verá seu nome para 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óximos passos

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