Tutorial: Permitir acesso a uma ASP.NET Web API usando o Azure Active Directory B2CTutorial: Grant access to an ASP.NET web API using Azure Active Directory B2C

Este tutorial mostra como chamar um recurso de API Web protegida no Azure AD B2C (Azure Active Directory B2C) de um aplicativo Web ASP .NET.This tutorial shows you how to call a protected web API resource in Azure Active Directory B2C (Azure AD B2C) from an ASP.NET web application.

Neste tutorial, você aprenderá como:In this tutorial, you learn how to:

  • Adicionar um aplicativo API WebAdd a web API application
  • Configurar escopos para uma API WebConfigure scopes for a web API
  • Conceder permissões à API WebGrant permissions to the web API
  • Configurar o exemplo para usar o aplicativoConfigure the sample to use the application

Se você não tiver uma assinatura do Azure, crie uma conta gratuita antes de começar.If you don't have an Azure subscription, create a free account before you begin.

Pré-requisitosPrerequisites

Conclua as etapas e os pré-requisitos no Tutorial: Habilitar autenticação em um aplicativo Web usando o Azure Active Directory B2C.Complete the steps and prerequisites in Tutorial: Enable authenticate in a web application using Azure Active Directory B2C.

Adicionar um aplicativo API WebAdd a web API application

Os recursos da API Web precisam ser registrados no seu locatário antes de poderem aceitar e responder a solicitações de recurso protegido de aplicativos clientes que apresentem um token de acesso.Web API resources need to be registered in your tenant before they can accept and respond to protected resource requests by client applications that present an access token.

Para registrar um aplicativo no locatário do Azure AD B2C, você pode usar a nossa nova experiência unificada de Registros de aplicativos ou a nossa experiência herdada Aplicativos (Herdado) .To register an application in your Azure AD B2C tenant, you can use our new unified App registrations experience or our legacy Applications (Legacy) experience. Saiba mais sobre a nova experiência.Learn more about the new experience.

  1. Entre no portal do Azure.Sign in to the Azure portal.
  2. Selecione o filtro Diretório + assinatura no menu superior e, em seguida, selecione o diretório que contém o locatário do Azure AD B2C.Select the Directory + subscription filter in the top menu, and then select the directory that contains your Azure AD B2C tenant.
  3. No menu à esquerda, selecione Azure AD B2C.In the left menu, select Azure AD B2C. Ou selecione Todos os serviços e pesquise e selecione Azure AD B2C.Or, select All services and search for and select Azure AD B2C.
  4. Escolha Registros de aplicativo e Novo registro.Select App registrations, and then select New registration.
  5. Insira um Nome para o aplicativo.Enter a Name for the application. Por exemplo, webapi1.For example, webapi1.
  6. Em URI de Redirecionamento, selecione Web e depois insira um ponto de extremidade em que o Azure AD B2C deve retornar os tokens solicitados pelo seu aplicativo.Under Redirect URI, select Web, and then enter an endpoint where Azure AD B2C should return any tokens that your application requests. Neste tutorial, o exemplo é executado localmente e escuta em https://localhost:44332.In this tutorial, the sample runs locally and listens at https://localhost:44332.
  7. Selecione Registrar.Select Register.
  8. Registre a ID do aplicativo (cliente) para uso em uma etapa posterior.Record the Application (client) ID for use in a later step.

Configurar escoposConfigure scopes

Os escopos fornecem uma maneira de controlar o acesso a recursos protegidos.Scopes provide a way to govern access to protected resources. Escopos são usados pela API Web para implementar o controle de acesso com base em escopo.Scopes are used by the web API to implement scope-based access control. Por exemplo, os usuários da API Web podem ter tanto acesso de leitura quanto de gravação ou somente acesso de leitura.For example, users of the web API could have both read and write access, or users of the web API might have only read access. Neste tutorial, você usa escopos para definir as permissões de leitura e gravação da API Web.In this tutorial, you use scopes to define read and write permissions for the web API.

  1. Selecione Registros do Aplicativo.Select App registrations.
  2. Selecione o aplicativo webapi1 para abrir a página de Visão Geral.Select the webapi1 application to open its Overview page.
  3. Em Gerenciar, selecione Expor uma API.Under Manage, select Expose an API.
  4. Ao lado de URI do ID do Aplicativo, selecione o link Definir.Next to Application ID URI, select the Set link.
  5. Substitua o valor padrão (uma GUID) por api e selecione Salvar.Replace the default value (a GUID) with api, and then select Save. O URI completo é mostrado e deve estar no formato https://your-tenant-name.onmicrosoft.com/api.The full URI is shown, and should be in the format https://your-tenant-name.onmicrosoft.com/api. Quando o aplicativo Web solicita um token de acesso à API, ele deve adicionar esse URI como prefixo para cada escopo que você definir para a API.When your web application requests an access token for the API, it should add this URI as the prefix for each scope that you define for the API.
  6. Em Escopos definidos por esta API, selecione Adicionar um escopo.Under Scopes defined by this API, select Add a scope.
  7. Insira os valores a seguir para criar um escopo que define o acesso de leitura à API e selecione Adicionar escopo:Enter the following values to create a scope that defines read access to the API, then select Add scope:
    1. Nome do escopo: demo.readScope name: demo.read
    2. Nome de exibição de consentimento do administrador: Read access to demo APIAdmin consent display name: Read access to demo API
    3. Descrição do consentimento do administrador: Allows read access to the demo APIAdmin consent description: Allows read access to the demo API
  8. Selecione Adicionar escopo, insira os seguintes valores para criar um escopo que define o acesso de leitura à API e selecione Adicionar escopo:Select Add a scope, enter the following values to add a scope that defines write access to the API, and then select Add scope:
    1. Nome do escopo: demo.writeScope name: demo.write
    2. Nome de exibição de consentimento do administrador: Write access to demo APIAdmin consent display name: Write access to demo API
    3. Descrição do consentimento do administrador: Allows write access to the demo APIAdmin consent description: Allows write access to the demo API

Conceder permissõesGrant permissions

Para chamar uma API Web protegida de um aplicativo, é necessário conceder permissões de aplicativo à API.To call a protected web API from an application, you need to grant your application permissions to the API. No tutorial de pré-requisito, você criou um aplicativo Web no Azure AD B2C chamado webapp1.In the prerequisite tutorial, you created a web application in Azure AD B2C named webapp1. Use este aplicativo para chamar a API Web.You use this application to call the web API.

  1. Selecione Registros de aplicativo e, em seguida, selecione o aplicativo Web que deve ter acesso à API.Select App registrations, and then select the web application that should have access to the API. Por exemplo, webapp1.For example, webapp1.
  2. Em Gerenciar, selecione Permissões de API.Under Manage, select API permissions.
  3. Em Permissões Configuradas, selecione Adicionar uma permissão.Under Configured permissions, select Add a permission.
  4. Selecione a guia Minhas APIs.Select the My APIs tab.
  5. Selecione a API à qual o aplicativo Web deve receber acesso.Select the API to which the web application should be granted access. Por exemplo, webapi1.For example, webapi1.
  6. Em Permissão, expanda demonstração e, em seguida, selecione os escopos definidos anteriormente.Under Permission, expand demo, and then select the scopes that you defined earlier. Por exemplo, demo.read e demo.write.For example, demo.read and demo.write.
  7. Selecione Adicionar Permissões.Select Add permissions.
  8. Selecione Fornecer o consentimento do administrador para (nome do seu locatário) .Select Grant admin consent for (your tenant name).
  9. Se for solicitado a selecionar uma conta, selecione a conta de administrador conectada no momento ou entre com uma conta no seu locatário do Azure AD B2C que tenha recebido, pelo menos, a função Administrador de aplicativos de nuvem.If you're prompted to select an account, select your currently signed-in administrator account, or sign in with an account in your Azure AD B2C tenant that's been assigned at least the Cloud application administrator role.
  10. Selecione Sim.Select Yes.
  11. Selecione Atualizar e, em seguida, verifique se "Concedido para..." aparece em Status para ambos os escopos.Select Refresh, and then verify that "Granted for ..." appears under Status for both scopes.

Seu aplicativo é registrado para chamar a API Web protegida.Your application is registered to call the protected web API. Um usuário autentica-se com o Azure AD B2C para usar o aplicativo.A user authenticates with Azure AD B2C to use the application. O aplicativo obtém uma concessão de autorização do Azure AD B2C para acessar a API Web protegida.The application obtains an authorization grant from Azure AD B2C to access the protected web API.

Configurar o exemploConfigure the sample

Agora que a API Web está registrada e você tem escopos definidos, configure a API Web para usar o locatário do Azure AD B2C.Now that the web API is registered and you have scopes defined, you configure the web API to use your Azure AD B2C tenant. Neste tutorial, você configura uma API Web de exemplo.In this tutorial, you configure a sample web API. A API Web de exemplo está inclusa no projeto que você baixou no tutorial de pré-requisito.The sample web API is included in the project you downloaded in the prerequisite tutorial.

Há dois projetos na solução de exemplo:There are two projects in the sample solution:

  • TaskWebApp – Crie e edite uma lista de tarefas.TaskWebApp - Create and edit a task list. O exemplo usa o fluxo de usuário de inscrição ou conexão para inscrever ou conectar usuários.The sample uses the sign-up or sign-in user flow to sign up or sign in users.
  • TaskService – Dá suporte à funcionalidade de criar, ler, atualizar e excluir a lista de tarefas.TaskService - Supports the create, read, update, and delete task list functionality. A API é protegida pelo Azure AD B2C e chamada pelo TaskWebApp.The API is protected by Azure AD B2C and called by TaskWebApp.

Configurar o aplicativo WebConfigure the web application

  1. Abra a solução B2C-WebAPI-DotNet no Visual Studio.Open the B2C-WebAPI-DotNet solution in Visual Studio.

  2. No projeto TaskWebApp, abra Web.config.In the TaskWebApp project, open Web.config.

  3. Para executar a API localmente, use a configuração de localhost para api:TaskServiceUrl.To run the API locally, use the localhost setting for api:TaskServiceUrl. Altere o Web.config da seguinte maneira:Change the Web.config as follows:

    <add key="api:TaskServiceUrl" value="https://localhost:44332/"/>
    
  4. Configure o URI da API.Configure the URI of the API. Este é o URI usado pelo aplicativo Web para fazer a solicitação à API.This is the URI the web application uses to make the API request. Além disso, configure as permissões solicitadas.Also, configure the requested permissions.

    <add key="api:ApiIdentifier" value="https://<Your tenant name>.onmicrosoft.com/api/" />
    <add key="api:ReadScope" value="demo.read" />
    <add key="api:WriteScope" value="demo.write" />
    

Configurar a API WebConfigure the web API

  1. No projeto TaskService, abra Web.config.In the TaskService project, open Web.config.

  2. Configure a API para usar seu locatário.Configure the API to use your tenant.

    <add key="ida:AadInstance" value="https://<Your tenant name>.b2clogin.com/{0}/{1}/v2.0/.well-known/openid-configuration" />
    <add key="ida:Tenant" value="<Your tenant name>.onmicrosoft.com" />
    
  3. Defina a ID do cliente para a ID do Aplicativo do seu aplicativo de API Web registrado, webapi1.Set the client ID to the Application ID of your registered web API application, webapi1.

    <add key="ida:ClientId" value="<application-ID>"/>
    
  4. Atualize a configuração de fluxo de usuário com o nome do fluxo de usuário de inscrição e conexão, B2C_1_signupsignin1.Update the user flow setting with the name of your sign-up and sign-in user flow, B2C_1_signupsignin1.

    <add key="ida:SignUpSignInPolicyId" value="B2C_1_signupsignin1" />
    
  5. Configure os escopos de configuração para corresponder aos criados no portal.Configure the scopes setting to match those you created in the portal.

    <add key="api:ReadScope" value="demo.read" />
    <add key="api:WriteScope" value="demo.write" />
    

Execute o exemploRun the sample

Você precisa executar os projetos TaskWebApp e TaskService.You need to run both the TaskWebApp and TaskService projects.

  1. No Gerenciador de Soluções, clique com o botão direito do mouse na solução e selecione Definir projetos de inicialização... .In Solution Explorer, right-click on the solution and select Set StartUp Projects....

  2. Selecione Vários projetos de inicialização.Select Multiple startup projects.

  3. Altere a Ação para ambos os projetos para Iniciar.Change the Action for both projects to Start.

  4. Clique em OK para salvar a configuração.Click OK to save the configuration.

  5. Pressione F5 para executar os dois aplicativos.Press F5 to run both applications. Cada aplicativo é aberto em sua própria janela do navegador.Each application opens in its own browser window.

    • https://localhost:44316/ é o aplicativo Web.https://localhost:44316/ is the web application.
    • https://localhost:44332/ é a API Web.https://localhost:44332/ is the web API.
  6. No aplicativo Web, selecione inscrição/conexão para entrar no aplicativo Web.In the web application, select sign-up / sign-in to sign in to the web application. Use a conta que você criou anteriormente.Use the account that you previously created.

  7. Depois de entrar, selecione Lista de Tarefas Pendentes e crie um item de lista de tarefas pendentes.After you sign in, select To-do list and create a to-do list item.

Quando você cria um item de lista de tarefas pendentes, o aplicativo Web faz uma solicitação à API Web para gerar o item de lista de tarefas pendentes da Web.When you create a to-do list item, the web application makes a request to the web API to generate the to-do list item. Seu aplicativo Web protegido está chamando a API Web protegida no seu locatário do Azure AD B2C.Your protected web application is calling the web API protected by Azure AD B2C.

Próximas etapasNext steps

Neste tutorial, você aprendeu a:In this tutorial, you learned how to:

  • Adicionar um aplicativo API WebAdd a web API application
  • Configurar escopos para uma API WebConfigure scopes for a web API
  • Conceder permissões à API WebGrant permissions to the web API
  • Configurar o exemplo para usar o aplicativoConfigure the sample to use the application