Tutorial: Concesión de acceso a una API web de ASP.NET mediante Azure Active Directory B2CTutorial: Grant access to an ASP.NET web API using Azure Active Directory B2C

En este tutorial se muestra cómo llamar a un recurso de API web protegido de Azure Active Directory B2C (Azure AD B2C) desde una aplicación web para 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.

En este tutorial, aprenderá a:In this tutorial, you learn how to:

  • Incorporar una aplicación de API webAdd a web API application
  • Configurar los ámbitos para una API webConfigure scopes for a web API
  • Conceder permisos a la API webGrant permissions to the web API
  • Configurar el ejemplo para que use la aplicaciónConfigure the sample to use the application

Si no tiene una suscripción a Azure, cree una cuenta gratuita antes de empezar.If you don't have an Azure subscription, create a free account before you begin.

Requisitos previosPrerequisites

Complete los pasos y requisitos previos en Tutorial: Habilitación de la autenticación en una aplicación web mediante Azure Active Directory B2C.Complete the steps and prerequisites in Tutorial: Enable authenticate in a web application using Azure Active Directory B2C.

Incorporar una aplicación de API webAdd a web API application

Los recursos de API web tienen que registrarse en el inquilino antes de que puedan aceptar y responder a solicitudes de recursos protegidos por aplicaciones cliente que presenten un token de acceso.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 una aplicación en su inquilino de Azure AD B2C, puede usar la nueva experiencia unificada Registros de aplicaciones, o bien la experiencia anterior Aplicaciones (heredado) .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. Más información acerca de la nueva experiencia.Learn more about the new experience.

  1. Inicie sesión en Azure Portal.Sign in to the Azure portal.
  2. Seleccione el filtro Directorio y suscripción en el menú superior y, luego, elija el directorio que contiene el inquilino de 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. En el menú de la izquierda, seleccione Azure AD B2C.In the left menu, select Azure AD B2C. O bien, seleccione Todos los servicios y busque y seleccione Azure AD B2C.Or, select All services and search for and select Azure AD B2C.
  4. Seleccione Registros de aplicaciones y luego Nuevo registro.Select App registrations, and then select New registration.
  5. Escriba un Nombre para la aplicación.Enter a Name for the application. Por ejemplo, webapi1.For example, webapi1.
  6. En URI de redirección, seleccione Web y escriba el punto de conexión donde Azure AD B2C deberá devolver los tokens que solicite la aplicación.Under Redirect URI, select Web, and then enter an endpoint where Azure AD B2C should return any tokens that your application requests. En este tutorial, el ejemplo se ejecuta localmente y escucha en el puerto https://localhost:44332.In this tutorial, the sample runs locally and listens at https://localhost:44332.
  7. Seleccione Registrar.Select Register.
  8. Anote el Id. de aplicación (cliente) para usarlo en un paso posterior.Record the Application (client) ID for use in a later step.

Configuración de ámbitosConfigure scopes

Los ámbitos proporcionan una manera de controlar el acceso a los recursos protegidos.Scopes provide a way to govern access to protected resources. La API web utiliza los ámbitos para implementar el control de acceso basado en el ámbito.Scopes are used by the web API to implement scope-based access control. Por ejemplo, los usuarios de la API web pueden tener ambos accesos de lectura y de escritura, o pueden tener solo acceso de lectura.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. En este tutorial, utilizará ámbitos para definir los permisos de lectura y escritura para la API web.In this tutorial, you use scopes to define read and write permissions for the web API.

  1. Seleccione App registrations (Registros de aplicaciones).Select App registrations.
  2. Seleccione la aplicación webapi1 para abrir su página Información general.Select the webapi1 application to open its Overview page.
  3. En Administrar, seleccione Exponer una API.Under Manage, select Expose an API.
  4. Junto a URI de id. de aplicación, seleccione el vínculo Establecer.Next to Application ID URI, select the Set link.
  5. Reemplace el valor predeterminado (un GUID) por api y, a continuación, seleccione Guardar.Replace the default value (a GUID) with api, and then select Save. Se muestra el URI completo, que debe tener el 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. Cuando la aplicación web solicita un token de acceso para la API, debe agregar este URI como prefijo para cada ámbito que se defina para la 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. En Ámbitos definidos con esta API, seleccione Agregar un ámbito.Under Scopes defined by this API, select Add a scope.
  7. Escriba los valores siguientes para crear un ámbito que defina el acceso de lectura a la API y, a continuación, seleccione Agregar ámbito:Enter the following values to create a scope that defines read access to the API, then select Add scope:
    1. Nombre de ámbito: demo.readScope name: demo.read
    2. Nombre para mostrar del consentimiento del administrador: Read access to demo APIAdmin consent display name: Read access to demo API
    3. Descripción del consentimiento del administrador: Allows read access to the demo APIAdmin consent description: Allows read access to the demo API
  8. Seleccione Agregar un ámbito, escriba los valores siguientes para agregar un ámbito que defina el acceso de escritura a la API y, a continuación, seleccione Agregar ámbito: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. Nombre de ámbito: demo.writeScope name: demo.write
    2. Nombre para mostrar del consentimiento del administrador: Write access to demo APIAdmin consent display name: Write access to demo API
    3. Descripción del consentimiento del administrador: Allows write access to the demo APIAdmin consent description: Allows write access to the demo API

Concesión de permisosGrant permissions

Para llamar a una API web protegida desde una aplicación, deberá conceder permisos de aplicación a la API.To call a protected web API from an application, you need to grant your application permissions to the API. En el tutorial de requisitos previos, ha creado una aplicación web en Azure AD B2C denominada webapp1.In the prerequisite tutorial, you created a web application in Azure AD B2C named webapp1. Puede usar esta aplicación para llamar a la API web.You use this application to call the web API.

  1. Seleccione Registros de aplicaciones y, después, seleccione la aplicación web que debe tener acceso a la API.Select App registrations, and then select the web application that should have access to the API. Por ejemplo, webapp1.For example, webapp1.
  2. En Administrar, seleccione Permisos de API.Under Manage, select API permissions.
  3. En Permisos configurados, seleccione Agregar un permiso.Under Configured permissions, select Add a permission.
  4. Seleccione la pestaña Mis API.Select the My APIs tab.
  5. Seleccione la API a la que la aplicación web debe tener acceso.Select the API to which the web application should be granted access. Por ejemplo, webapi1.For example, webapi1.
  6. En Permiso, expanda demo y, a continuación, seleccione los ámbitos que definió anteriormente.Under Permission, expand demo, and then select the scopes that you defined earlier. Por ejemplo, demo.read y demo.write.For example, demo.read and demo.write.
  7. Seleccione Agregar permisos.Select Add permissions.
  8. Seleccione Conceder consentimiento de administrador para (el nombre de inquilino) .Select Grant admin consent for (your tenant name).
  9. Si se le pide que seleccione una cuenta, seleccione la cuenta de administrador que tiene iniciada actualmente la sesión o bien inicie sesión con una cuenta en el inquilino de Azure AD B2C que tenga asignado al menos el rol Administrador de aplicaciones en la nube.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. Seleccione .Select Yes.
  11. Seleccione Actualizar y, a continuación, compruebe que aparece "Concedido para..." en Estado para ambos ámbitos.Select Refresh, and then verify that "Granted for ..." appears under Status for both scopes.

La aplicación está registrada para llamar a la API web protegida.Your application is registered to call the protected web API. Un usuario se autentica con Azure AD B2C para utilizar la aplicación.A user authenticates with Azure AD B2C to use the application. La aplicación obtiene una concesión de autorización de Azure AD B2C para acceder a la API web protegida.The application obtains an authorization grant from Azure AD B2C to access the protected web API.

Configuración del ejemploConfigure the sample

Ahora que se ha registrado la API web y tiene ámbitos definidos, debe configurar la API web para usar el inquilino de 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. En este tutorial, configurará una API web de ejemplo.In this tutorial, you configure a sample web API. La API web de ejemplo se incluye en el proyecto que descargó en el tutorial indicado en los requisitos previos.The sample web API is included in the project you downloaded in the prerequisite tutorial.

Hay dos proyectos en la solución de ejemplo:There are two projects in the sample solution:

  • TaskWebApp: para crear y editar una lista de tareas.TaskWebApp - Create and edit a task list. El ejemplo utiliza el flujo de usuario de registro o de inicio de sesión para que los usuarios se registren o inicien sesión.The sample uses the sign-up or sign-in user flow to sign up or sign in users.
  • TaskService: admite la funcionalidad para crear, leer, actualizar y eliminar la lista de tareas.TaskService - Supports the create, read, update, and delete task list functionality. Azure AD B2C protege la API y TaskWebApp la llama.The API is protected by Azure AD B2C and called by TaskWebApp.

Configuración de la aplicación webConfigure the web application

  1. Abra la solución B2C-WebAPI-DotNet en Visual Studio.Open the B2C-WebAPI-DotNet solution in Visual Studio.

  2. En el proyecto TaskWebApp, abra Web.config.In the TaskWebApp project, open Web.config.

  3. Para ejecutar la API localmente, utilice la configuración de localhost para api:TaskServiceUrl.To run the API locally, use the localhost setting for api:TaskServiceUrl. Cambie el archivo Web.config de la manera siguiente:Change the Web.config as follows:

    <add key="api:TaskServiceUrl" value="https://localhost:44332/"/>
    
  4. Configure el identificador URI de la API.Configure the URI of the API. Es el URI que utiliza la aplicación web para realizar la solicitud de API.This is the URI the web application uses to make the API request. Configure además los permisos solicitados.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" />
    

Configuración de la API webConfigure the web API

  1. En el proyecto TaskService, abra Web.config.In the TaskService project, open Web.config.

  2. Configure la API para usar el inquilino.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. Establezca el identificador de cliente en el identificador de la aplicación de la API web registrada, webapi1.Set the client ID to the Application ID of your registered web API application, webapi1.

    <add key="ida:ClientId" value="<application-ID>"/>
    
  4. Actualice la configuración del flujo de usuario con el nombre de su flujo de usuario de registro y de inicio de sesión, 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 los ámbitos para que coincidan con lo que ha creado en el 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" />
    

Ejecución del ejemploRun the sample

Debe ejecutar tanto el proyecto TaskWebApp como el de TaskService.You need to run both the TaskWebApp and TaskService projects.

  1. En el Explorador de soluciones, haga clic con el botón derecho en la solución y seleccione Establecer proyectos de inicio.In Solution Explorer, right-click on the solution and select Set StartUp Projects....

  2. Seleccione Proyectos de inicio múltiples.Select Multiple startup projects.

  3. Cambie la Acción de ambos proyectos a Iniciar.Change the Action for both projects to Start.

  4. Haga clic en Aceptar para guardar la configuración.Click OK to save the configuration.

  5. Presione F5 para ejecutar las dos aplicaciones.Press F5 to run both applications. Cada aplicación se abre en su propia ventana del explorador.Each application opens in its own browser window.

    • https://localhost:44316/ es la aplicación web.https://localhost:44316/ is the web application.
    • https://localhost:44332/ es la API web.https://localhost:44332/ is the web API.
  6. En la aplicación web, haga clic en sign-up / sign-in (registrar o iniciar sesión) para iniciar sesión en la aplicación web.In the web application, select sign-up / sign-in to sign in to the web application. Use la cuenta que creó anteriormente.Use the account that you previously created.

  7. Después de iniciar sesión, seleccione Lista de tareas pendientes y cree un elemento de dicha lista.After you sign in, select To-do list and create a to-do list item.

Al crear un elemento de lista de tareas pendientes, la aplicación web realiza una solicitud a la API web para generar este elemento.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. Su aplicación web protegida llama a la API web protegida por Azure AD B2C.Your protected web application is calling the web API protected by Azure AD B2C.

Pasos siguientesNext steps

En este tutorial, ha aprendido a:In this tutorial, you learned how to:

  • Incorporar una aplicación de API webAdd a web API application
  • Configurar los ámbitos para una API webConfigure scopes for a web API
  • Conceder permisos a la API webGrant permissions to the web API
  • Configurar el ejemplo para que use la aplicaciónConfigure the sample to use the application