Autenticação de nuvem com o Azure Active Directory B2C no ASP.NET Core

Por Damien Bod

O Azure AD B2C (Azure Active Directory B2C) é uma solução de gerenciamento de identity na nuvem para aplicativos móveis e da Web. O serviço fornece autenticação para aplicativos hospedados na nuvem e no local. Os tipos de autenticação incluem contas individuais, contas de redes sociais e contas corporativas federadas. Além disso, o Azure AD B2C pode fornecer autenticação multifator com configuração mínima.

Dica

O Microsoft Entra ID, a ID externa do Microsoft Entra e o Azure AD B2C são ofertas de produtos separadas. Um locatário do Entra ID geralmente representa uma organização, enquanto um locatário do Azure AD B2C ou um locatário da ID externa do Microsoft Entra pode representar uma coleção de identidades a serem usadas com aplicativos de terceira parte confiável. Para saber mais, confira Azure AD B2C: perguntas frequentes.

Dica

A ID externa do Microsoft Entra para clientes é a nova solução de CIAM (gerenciamento de identidade e acesso de clientes) identity da Microsoft.

Neste tutorial, você aprenderá a configurar um aplicativo ASP.NET Core para autenticação com o Azure AD B2C.

Pré-requisitos

Preparação

  1. Crie um locatário do Azure Active Directory B2C.

  2. Crie um novo aplicativo Razor Pages do ASP.NET Core:

    dotnet new razor -o azure-ad-b2c
    

    O comando anterior cria um aplicativo Razor Pages em um diretório chamado azure-ad-b2c.

  3. Crie um registro de aplicativo Web no locatário. Para o URI de redirecionamento, use https://localhost:5001/signin-oidc. Substitua 5001 pela porta usada pelo aplicativo ao usar as portas geradas pelo Visual Studio.

Modificar o aplicativo

  1. Adicione os pacotes Microsoft.Identity.Web e Microsoft.Identity.Web.UI ao projeto. Se estiver usando Visual Studio, poderá usar o Gerenciador de Pacotes NuGet.

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

    No anterior:

    • Microsoft.Identity.Web inclui o conjunto básico de dependências para autenticação na plataforma Microsoft identity.
    • Microsoft.Identity.Web.UI inclui a funcionalidade de interface do usuário encapsulada em uma área chamada MicrosoftIdentity.
  2. Adicione um objeto AzureADB2C ao appsettings.json.

    Observação

    Ao usar os fluxos de usuário do Azure B2C, é necessário definir a Instância e o PolicyId do tipo de fluxo.

    {
      "AzureADB2C": {
        "Instance": "https://--your-domain--.b2clogin.com",
        "Domain": "[Enter the domain of your B2C tenant, e.g. contoso.onmicrosoft.com]",
        "TenantId": "[Enter 'common', or 'organizations' or the Tenant Id (Obtained from the Azure portal. Select 'Endpoints' from the 'App registrations' blade and use the GUID in any of the URLs), e.g. da41245a5-11b3-996c-00a8-4d99re19f292]",
        "ClientId": "[Enter the Client Id (Application ID obtained from the Azure portal), e.g. ba74781c2-53c2-442a-97c2-3d60re42f403]",
        // Use either a secret or a certificate. ClientCertificates are recommended.
        "ClientSecret": "[Copy the client secret added to the app from the Azure portal]",
        "ClientCertificates": [
        ],
        // the following is required to handle Continuous Access Evaluation challenges
        "ClientCapabilities": [ "cp1" ],
        "CallbackPath": "/signin-oidc",
        // Add your policy here
        "SignUpSignInPolicyId": "B2C_1_signup_signin",
        "SignedOutCallbackPath": "/signout-callback-oidc"
      },
      "Logging": {
        "LogLevel": {
          "Default": "Information",
          "Microsoft": "Warning",
          "Microsoft.Hosting.Lifetime": "Information"
        }
      },
      "AllowedHosts": "*"
    }
    
    • Para Domínio, use o domínio do locatário do Azure AD B2C.
    • Para ClientId, use a ID de Aplicativo (cliente) do registro do aplicativo criado no locatário.
    • Para Instância, use o domínio do locatário do Azure AD B2C.
    • Para SignUpSignInPolicyId, use a política de fluxo de usuário definida no locatário do Azure B2C
    • Use a configuração ClientSecret ou ClientCertificates. ClientCertificates são recomendados.
    • Deixe todos os outros valores como estão.
  3. Em Páginas/Compartilhado, crie um arquivo chamado _LoginPartial.cshtml. Inclua o seguinte código:

    @using System.Security.Principal
    
    <ul class="navbar-nav">
    @if (User.Identity?.IsAuthenticated == true)
    {
            <span class="navbar-text text-dark">Hello @User.Identity?.Name!</span>
            <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>
    

    O código anterior:

    • Verifica se o usuário está autenticado.
    • Renderiza um link para Sair ou Entrar, conforme apropriado.
      • O link aponta para um método de ação no controlador Account da área MicrosoftIdentity.
  4. Em Páginas/Compartilhado/_Layout.cshtml, adicione a linha realçada no elemento <header>:

    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container">
                <a class="navbar-brand" asp-area="" asp-page="/Index">azure_ad_b2c</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
                        </li>
                    </ul>
                    <partial name="_LoginPartial" />
                </div>
            </div>
        </nav>
    </header>
    

    A adição de <partial name="_LoginPartial" /> renderiza a exibição parcial de _LoginPartial.cshtml em todas as solicitações de página que usam esse layout.

  5. Em Program.cs, faça as seguintes alterações:

    1. Adicione as seguintes diretivas using:

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

      O código anterior resolve as referências usadas nas próximas etapas.

    2. Atualize as linhas builder.Services com o seguinte código:

      builder.Services.AddAuthentication(OpenIdConnectDefaults.AuthenticationScheme)
              .AddMicrosoftIdentityWebApp(builder.Configuration.GetSection("AzureADB2C"));
      
      builder.Services.AddAuthorization(options =>
      {
          // By default, all incoming requests will be authorized according to 
          // the default policy
          options.FallbackPolicy = options.DefaultPolicy;
      });
      builder.Services.AddRazorPages(options => {
          options.Conventions.AllowAnonymousToPage("/Index");
      })
      .AddMvcOptions(options => { })
      .AddMicrosoftIdentityUI();
      

      No código anterior:

      • As chamadas para os métodos AddAuthentication e AddMicrosoftIdentityWebApp configuram o aplicativo para usar o Open ID Connect, especificamente configurado para a plataforma Microsoft identity.
      • AddAuthorization inicializa a autorização do ASP.NET Core.
      • A chamada AddRazorPages configura o aplicativo para que navegadores anônimos possam exibir a página Índice. Todas as outras solicitações exigem autenticação.
      • AddMvcOptions e AddMicrosoftIdentityUI adicionam os componentes de interface do usuário necessários para redirecionar de/para o Azure AD B2C.
    3. Atualize a linha realçada para o método Configure:

      app.UseRouting();
      
      app.UseAuthentication();
      app.UseAuthorization();
      
      app.MapRazorPages();
      

      O código anterior habilita a autenticação no ASP.NET Core.

Executar o aplicativo

Observação

Use o perfil que corresponde aos URIs de Redirecionamento de registro do Aplicativo Azure

  1. Execute o aplicativo.

    dotnet run --launch-profile https
    
  2. Navegue até o ponto de extremidade seguro do aplicativo, por exemplo, https://localhost:5001/.

    • A página Índice é renderizada sem nenhum desafio de autenticação.
    • O cabeçalho inclui um link para Entrar porque você não está autenticado.
  3. Selecione o link Privacy.

    • O navegador é redirecionado para o método de autenticação configurado pelo locatário.
    • Após a entrada, o cabeçalho exibe uma mensagem de boas-vindas e um link para Sair.

Próximas etapas

Neste tutorial, você aprendeu a configurar um aplicativo ASP.NET Core para autenticação com o Azure AD B2C.

Agora que o aplicativo ASP.NET Core está configurado para usar o Azure AD B2C para autenticação, o atributo Authorize pode ser usado para proteger seu aplicativo. Continue desenvolvendo seu aplicativo aprendendo a: