Tutorial: Autenticación y autorización de usuarios de un extremo a otro extremo en Azure App Service en LinuxTutorial: Authenticate and authorize users end-to-end in Azure App Service on Linux

App Service en Linux proporciona un servicio de hospedaje web muy escalable y con aplicación automática de revisiones utilizando el sistema operativo Linux.App Service on Linux provides a highly scalable, self-patching web hosting service using the Linux operating system. Además, App Service incluye compatibilidad integrada con la autenticación y autorización de usuarios.In addition, App Service has built-in support for user authentication and authorization. En este tutorial se muestra cómo proteger las aplicaciones con la autenticación y autorización de App Service.This tutorial shows how to secure your apps with App Service authentication and authorization. Se usa una aplicación de ASP.NET Core con un front-end Angular.js, pero solo como ejemplo.It uses an ASP.NET Core app with an Angular.js front end, but it is only for an example. La autenticación y autorización de App Service admiten entornos de ejecución de todos los lenguajes; en este tutorial, aprenderá a aplicarlas a su lenguaje preferido.App Service authentication and authorization support all language runtimes, and you can learn how to apply it to your preferred language by following the tutorial.

En este tutorial se usa la aplicación de ejemplo para mostrarle cómo proteger una aplicación independiente (en Habilitación de la autenticación y autorización en una aplicación de back-end).The tutorial uses the sample app to show you how to secure a self-contained app (in Enable authentication and authorization for back-end app).

Autenticación y autorización simples

También se muestra cómo proteger una aplicación de niveles múltiples accediendo a una API back-end protegida en nombre del usuario autenticado, tanto desde el código de servidor como desde el código de explorador.It also shows you how to secure a multi-tiered app, by accessing a secured back-end API on behalf of the authenticated user, both from server code and from browser code.

Autenticación y autorización avanzadas

Estos son solo algunos de los posibles escenarios de autenticación y autorización de App Service.These are only some of the possible authentication and authorization scenarios in App Service.

Esta es una lista más completa de lo que aprenderá en el tutorial:Here's a more comprehensive list of things you learn in the tutorial:

  • Habilitación de la autenticación y autorización integradasEnable built-in authentication and authorization
  • Protección de las aplicaciones frente a las solicitudes no autenticadasSecure apps against unauthenticated requests
  • Uso de Azure Active Directory como proveedor de identidadesUse Azure Active Directory as the identity provider
  • Acceso a una aplicación remota en nombre del usuario que inició sesiónAccess a remote app on behalf of the signed-in user
  • Protección de llamadas de servicio a servicio con autenticación de tokensSecure service-to-service calls with token authentication
  • Uso de tokens de acceso desde el código de servidorUse access tokens from server code
  • Uso de tokens de acceso desde el código de cliente (explorador)Use access tokens from client (browser) code

También puede seguir los pasos de este tutorial en macOS, Linux, Windows.You can follow the steps in this tutorial on macOS, Linux, Windows.

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

Para completar este tutorial:To complete this tutorial:

Creación de una aplicación .NET Core localCreate local .NET Core app

En este paso, configurará el proyecto .NET Core local.In this step, you set up the local .NET Core project. Usará el mismo proyecto para implementar una aplicación de API de back-end y una aplicación web de front-end.You use the same project to deploy a back-end API app and a front-end web app.

Clonación y ejecución de la aplicación de ejemploClone and run the sample application

Ejecute los comandos siguientes para clonar el repositorio de ejemplo y ejecutarlo.Run the following commands to clone the sample repository and run it.

git clone https://github.com/Azure-Samples/dotnet-core-api
cd dotnet-core-api
dotnet run

Vaya a http://localhost:5000 e intente agregar, modificar y quitar elementos de lista de tareas.Navigate to http://localhost:5000 and try adding, editing, and removing todo items.

API de ASP.NET Core en ejecución local

Para detener ASP.NET Core en cualquier momento, presione Ctrl+C en el terminal.To stop ASP.NET Core at any time, press Ctrl+C in the terminal.

Uso de Azure Cloud ShellUse Azure Cloud Shell

En Azure se hospeda Azure Cloud Shell, un entorno de shell interactivo que puede utilizar mediante el explorador.Azure hosts Azure Cloud Shell, an interactive shell environment that you can use through your browser. Cloud Shell le permite usar bash o PowerShell para trabajar con servicios de Azure.Cloud Shell lets you use either bash or PowerShell to work with Azure services. Puede usar los comandos preinstalados de Cloud Shell para ejecutar el código de este artículo sin tener que instalar nada en su entorno local.You can use the Cloud Shell pre-installed commands to run the code in this article without having to install anything on your local environment.

Para iniciar Azure Cloud Shell:To launch Azure Cloud Shell:

OpciónOption Ejemplo o vínculoExample/Link
Seleccione Probarlo en la esquina superior derecha de un bloque de código.Select Try It in the upper-right corner of a code block. Solo con seleccionar Probar no se copia automáticamente el código en Cloud Shell.Selecting Try It doesn't automatically copy the code to Cloud Shell. Ejemplo de Probarlo para Azure Cloud Shell
Vaya a https://shell.azure.com o seleccione el botón Iniciar Cloud Shell para abrir Cloud Shell en el explorador.Go to https://shell.azure.com or select the Launch Cloud Shell button to open Cloud Shell in your browser. Iniciar Cloud Shell en una nueva ventanaLaunch Cloud Shell in a new window
Seleccione el botón Cloud Shell en la barra de menús de la esquina superior derecha de Azure Portal.Select the Cloud Shell button on the top-right menu bar in the Azure portal. Botón Cloud Shell en Azure Portal

Para ejecutar el código de este artículo en Azure Cloud Shell:To run the code in this article in Azure Cloud Shell:

  1. Abra Cloud Shell.Open Cloud Shell.
  2. Seleccione el botón Copiar de un bloque de código para copiar el código.Select the Copy button on a code block to copy the code.
  3. Pegue el código en la sesión de Cloud Shell con Ctrl+Mayús+V en Windows y Linux, o Cmd+Mayús+V en macOS.Paste the code into the Cloud Shell session with Ctrl+Shift+V on Windows and Linux, or Cmd+Shift+V on macOS.
  4. Presione ENTRAR para ejecutar el código.Press Enter to run the code.

Implementación de aplicaciones en AzureDeploy apps to Azure

En este paso, implementará el proyecto en dos aplicaciones de App Service.In this step, you deploy the project to two App Service apps. Una es la aplicación de front-end y la otra es la aplicación de back-end.One is the front-end app and the other is the back-end app.

Creación de recursos de AzureCreate Azure resources

En Cloud Shell, ejecute los siguientes comandos para crear dos aplicaciones web.In the Cloud Shell, run the following commands to create two web apps. Reemplace <nombreDeAplicaciónDeFront-End> y <nombreDeAplicaciónDeBack-End> por dos nombres de aplicación globalmente únicos (los caracteres válidos son a-z, 0-9 y -).Replace <front-end-app-name> and <back-end-app-name> with two globally unique app names (valid characters are a-z, 0-9, and -). Para más información acerca de los distintos comandos, consulte Creación de una aplicación .NET Core en Azure App Service en Linux.For more information on each command, see Create a .NET Core app in Azure App Service on Linux.

az group create --name myAuthResourceGroup --location "West Europe"
az appservice plan create --name myAuthAppServicePlan --resource-group myAuthResourceGroup --sku B1 --is-linux
az webapp create --resource-group myAuthResourceGroup --plan myAuthAppServicePlan --name <front-end-app-name> --runtime "dotnetcore|2.0" --deployment-local-git --query deploymentLocalGitUrl
az webapp create --resource-group myAuthResourceGroup --plan myAuthAppServicePlan --name <back-end-app-name> --runtime "dotnetcore|2.0" --deployment-local-git --query deploymentLocalGitUrl

Nota

Guarde las direcciones URL de los repositorios Git remotos de su aplicación de front-end y de back-end, que se muestran en la salida de az webapp create.Save the URLs of the Git remotes for your front-end app and back-end app, which are shown in the output from az webapp create.

Inserción en Azure desde GitPush to Azure from Git

De nuevo en la ventana de terminal local, ejecute los siguientes comandos de Git para implementar la aplicación de back-end.Back in the local terminal window, run the following Git commands to deploy to the back-end app. Reemplace <deploymentLocalGitUrl-of-back-end-app> por la dirección URL del repositorio Git remoto que guardó en Creación de recursos de Azure.Replace <deploymentLocalGitUrl-of-back-end-app> with the URL of the Git remote that you saved from Create Azure resources. Cuando el administrador de credenciales de Git solicite las credenciales, asegúrese de especificar sus credenciales de implementación y no las usadas para iniciar sesión en Azure Portal.When prompted for credentials by Git Credential Manager, make sure that you enter your deployment credentials, not the credentials you use to sign in to the Azure portal.

git remote add backend <deploymentLocalGitUrl-of-back-end-app>
git push backend master

En la ventana de terminal local, ejecute los siguientes comandos de Git para implementar el mismo código en la aplicación de front-end.In the local terminal window, run the following Git commands to deploy the same code to the front-end app. Reemplace <deploymentLocalGitUrl-of-front-end-app> por la dirección URL del repositorio Git remoto que guardó en Creación de recursos de Azure.Replace <deploymentLocalGitUrl-of-front-end-app> with the URL of the Git remote that you saved from Create Azure resources.

git remote add frontend <deploymentLocalGitUrl-of-front-end-app>
git push frontend master

Navegación hasta las aplicacionesBrowse to the apps

Use un explorador para ir a las siguientes direcciones URL y ver las dos aplicaciones en funcionamiento.Navigate to the following URLs in a browser and see the two apps working.

http://<back-end-app-name>.azurewebsites.net
http://<front-end-app-name>.azurewebsites.net

API de ASP.NET Core que se ejecuta en Azure App Service

Nota

Si se reinicia la aplicación, quizás haya observado que se han borrado los nuevos datos.If your app restarts, you may have noticed that new data has been erased. Este comportamiento se debe a que la aplicación de ASP.NET Core de ejemplo usa una base de datos en memoria.This behavior by design because the sample ASP.NET Core app uses an in-memory database.

Llamada a una API de back-end desde el front-endCall back-end API from front end

En este paso, vinculará el código de servidor de la aplicación de front-end para acceder a la API de back-end.In this step, you point the front-end app's server code to access the back-end API. Más adelante, habilitará el acceso autenticado del front-end al back-end.Later, you enable authenticated access from the front end to the back end.

Modificación del código de front-endModify front-end code

En el repositorio local, abra Controllers/TodoController.cs.In the local repository, open Controllers/TodoController.cs. Al comienzo de la clase TodoController, agregue las siguientes líneas y reemplace <nombreDeAplicaciónDeBack-End> por el nombre de la aplicación de back-end:At the beginning of the TodoController class, add the following lines and replace <back-end-app-name> with the name of your back-end app:

private static readonly HttpClient _client = new HttpClient();
private static readonly string _remoteUrl = "https://<back-end-app-name>.azurewebsites.net";

Busque el método GetAll() y reemplace el código entre llaves por:Find the GetAll() method and replace the code inside the curly braces with:

var data = _client.GetStringAsync($"{_remoteUrl}/api/Todo").Result;
return JsonConvert.DeserializeObject<List<TodoItem>>(data);

La primera línea realiza una llamada GET /api/Todo a la aplicación de API de back-end.The first line makes a GET /api/Todo call to the back-end API app.

A continuación, busque el método GetById(long id) y reemplace el código entre llaves por:Next, find the GetById(long id) method and replace the code inside the curly braces with:

var data = _client.GetStringAsync($"{_remoteUrl}/api/Todo/{id}").Result;
return Content(data, "application/json");

La primera línea realiza una llamada GET /api/Todo/{id} a la aplicación de API de back-end.The first line makes a GET /api/Todo/{id} call to the back-end API app.

A continuación, busque el método Create([FromBody] TodoItem item) y reemplace el código entre llaves por:Next, find the Create([FromBody] TodoItem item) method and replace the code inside the curly braces with:

var response = _client.PostAsJsonAsync($"{_remoteUrl}/api/Todo", item).Result;
var data = response.Content.ReadAsStringAsync().Result;
return Content(data, "application/json");

La primera línea realiza una llamada POST /api/Todo a la aplicación de API de back-end.The first line makes a POST /api/Todo call to the back-end API app.

A continuación, busque el método Update(long id, [FromBody] TodoItem item) y reemplace el código entre llaves por:Next, find the Update(long id, [FromBody] TodoItem item) method and replace the code inside the curly braces with:

var res = _client.PutAsJsonAsync($"{_remoteUrl}/api/Todo/{id}", item).Result;
return new NoContentResult();

La primera línea realiza una llamada PUT /api/Todo/{id} a la aplicación de API de back-end.The first line makes a PUT /api/Todo/{id} call to the back-end API app.

A continuación, busque el método Delete(long id) y reemplace el código entre llaves por:Next, find the Delete(long id) method and replace the code inside the curly braces with:

var res = _client.DeleteAsync($"{_remoteUrl}/api/Todo/{id}").Result;
return new NoContentResult();

La primera línea realiza una llamada DELETE /api/Todo/{id} a la aplicación de API de back-end.The first line makes a DELETE /api/Todo/{id} call to the back-end API app.

Guarde todos los cambios.Save your all your changes. En la ventana de terminal local, implemente los cambios en la aplicación de front-end con los siguientes comandos de Git:In the local terminal window, deploy your changes to the front-end app with the following Git commands:

git add .
git commit -m "call back-end API"
git push frontend master

Comprobación de los cambiosCheck your changes

Vaya a http://<front-end-app-name>.azurewebsites.net y agregue algunos elementos, como from front end 1 y from front end 2.Navigate to http://<front-end-app-name>.azurewebsites.net and add a few items, such as from front end 1 and from front end 2.

Vaya a http://<back-end-app-name>.azurewebsites.net para ver los elementos agregados desde la aplicación de front-end.Navigate to http://<back-end-app-name>.azurewebsites.net to see the items added from the front-end app. Además, agregue algunos elementos, como from back end 1 y from back end 2, y luego actualice la aplicación de front-end para ver si refleja los cambios.Also, add a few items, such as from back end 1 and from back end 2, then refresh the front-end app to see if it reflects the changes.

API de ASP.NET Core que se ejecuta en Azure App Service

Configuración de la autenticaciónConfigure auth

En este paso, habilitará la autenticación y autorización para las dos aplicaciones.In this step, you enable authentication and authorization for the two apps. También configurará la aplicación de front-end para generar un token de acceso que puede usar para realizar llamadas autenticadas a la aplicación de back-end.You also configure the front-end app to generate an access token that you can use to make authenticated calls to the back-end app.

Usará Azure Active Directory como proveedor de identidades.You use Azure Active Directory as the identity provider. Para más información, consulte Configuración de la autenticación de Azure Active Directory para una aplicación de App Services.For more information, see Configure Azure Active Directory authentication for your App Services application.

Habilitación de la autenticación y autorización en una aplicación de back-endEnable authentication and authorization for back-end app

En Azure Portal, haga clic en el menú de la izquierda para abrir la página de administración de la aplicación de back-end: Grupos de recursos > myAuthResourceGroup > <nombreDeAplicaciónDeBack-End> .In the Azure portal, open your back-end app's management page by clicking from the left menu: Resource groups > myAuthResourceGroup > <back-end-app-name>.

API de ASP.NET Core que se ejecuta en Azure App Service

En el menú de la izquierda de su aplicación de back-end, haga clic en Autenticación/autorización y luego haga clic en Activado para habilitar la autenticación de App Service.In your back-end app's left menu, click Authentication / Authorization, then enable App Service Authentication by clicking On.

En Action to take when request is not authenticated (Acción necesaria cuando la solicitud no está autenticada), seleccione Log in with Azure Active Directory (Iniciar sesión con Azure Active Directory).In Action to take when request is not authenticated, select Log in with Azure Active Directory.

En Proveedores de autenticación, haga clic en Azure Active Directory.Under Authentication Providers, click Azure Active Directory

API de ASP.NET Core que se ejecuta en Azure App Service

Haga clic en Rápido, acepte la configuración predeterminada para crear una nueva aplicación de AD y haga clic en Aceptar.Click Express, then accept the default settings to create a new AD app and click OK.

En la página Autenticación/autorización, haga clic en Guardar.In the Authentication / Authorization page, click Save.

Cuando vea la notificación con el mensaje Successfully saved the Auth Settings for <back-end-app-name> App, actualice la página.Once you see the notification with the message Successfully saved the Auth Settings for <back-end-app-name> App, refresh the page.

Vuelva a hacer clic en Azure Active Directory y, después, haga clic en la aplicación de Azure AD.Click Azure Active Directory again, and then click the Azure AD App.

Copie el valor de Identificador de cliente de la aplicación de Azure AD en un bloc de notas.Copy the Client ID of the Azure AD application to a notepad. Este valor lo necesitará más adelante.You need this value later.

API de ASP.NET Core que se ejecuta en Azure App Service

Habilitación de la autenticación y autorización en una aplicación de front-endEnable authentication and authorization for front-end app

Siga los mismos pasos para la aplicación de front-end, pero omita el último paso.Follow the same steps for the front-end app, but skip the last step. No es necesario el identificador de cliente para la aplicación de front-end.You don't need the client ID for the front-end app.

Si quiere, vaya a http://<front-end-app-name>.azurewebsites.net.If you like, navigate to http://<front-end-app-name>.azurewebsites.net. Debería dirigirle ahora a una página de inicio de sesión segura.It should now direct you to a secured sign-in page. Después de iniciar la sesión, seguirá sin poder acceder a los datos desde la aplicación de back-end. El motivo es que aún es necesario hacer tres cosas:After you sign in, you still can't access the data from the back-end app, because you still need to do three things:

  • Conceder al front-end acceso al back-endGrant the front end access to the back end
  • Configurar App Service para devolver un token que se pueda usarConfigure App Service to return a usable token
  • Usar el token en el códigoUse the token in your code

Sugerencia

Si se producen errores y vuelve a configurar la autenticación/autorización de la aplicación, es posible que no se regeneren los tokens del almacén de tokens con esta nueva configuración.If you run into errors and reconfigure your app's authentication/authorization settings, the tokens in the token store may not be regenerated from the new settings. Para asegurarse de que se regeneran, debe cerrar sesión en la aplicación e iniciarla de nuevo.To make sure your tokens are regenerated, you need to sign out and sign back in to your app. Una manera sencilla de hacerlo es usar el explorador en modo privado y cerrarlo y abrirlo de nuevo en este modo después de cambiar la configuración en las aplicaciones.An easy way to do it is to use your browser in private mode, and close and reopen the browser in private mode after changing the settings in your apps.

Conceder a la aplicación de front-end acceso al back-endGrant front-end app access to back end

Ahora que ha habilitado la autenticación y autorización en las dos aplicaciones, cada una de ellas está respaldada por una aplicación de AD.Now that you've enabled authentication and authorization to both of your apps, each of them is backed by an AD application. En este paso, concederá a la aplicación de front-end permisos para acceder al back-end en nombre del usuario.In this step, you give the front-end app permissions to access the back end on the user's behalf. (Técnicamente, asignará a la aplicación de AD del front-end permisos para acceder a la aplicación de AD del back-end en nombre del usuario).(Technically, you give the front end's AD application the permissions to access the back end's AD application on the user's behalf.)

En el menú de la izquierda del portal, seleccione Azure Active Directory > Registros de aplicaciones > Aplicaciones propias > <nombreDeAplicaciónDeFront-End> > Permisos de la API.From the left menu in the portal, select Azure Active Directory > App registrations > Owned applications > <front-end-app-name> > API permissions.

API de ASP.NET Core que se ejecuta en Azure App Service

Seleccione Agregar un permiso y, después, seleccione Mis API > <nombreDeAplicaciónDeBack-end> .Select Add a permission, then select My APIs > <back-end-app-name>.

En la página Solicitud de permisos de API de la aplicación de back-end, seleccione Permisos delegados y user_impersonation y, después, seleccione Agregar permisos.In the Request API permissions page for the back-end app, select Delegated permissions and user_impersonation, then select Add permissions.

API de ASP.NET Core que se ejecuta en Azure App Service

Configuración de App Service para devolver un token de acceso que se pueda usarConfigure App Service to return a usable access token

La aplicación de front-end ya tiene los permisos necesarios para acceder a la aplicación de back-end como usuario con sesión iniciada.The front-end app now has the required permissions to access the back-end app as the signed-in user. En este paso, configurará la autenticación y autorización de App Service para proporcionarle un token de acceso que se pueda usar para acceder al back end.In this step, you configure App Service authentication and authorization to give you a usable access token for accessing the back end. Para este paso necesitará el identificador de cliente del back-end, que copió en Habilitación de la autenticación y autorización en una aplicación de back-end.For this step, you need the back end's client ID, which you copied from Enable authentication and authorization for back-end app.

Inicie sesión en Azure Resource Explorer.Sign in to Azure Resource Explorer. En la parte superior de la página, haga clic en Read/Write (Lectura/escritura) para permitir la edición de los recursos de Azure.At the top of the page, click Read/Write to enable editing of your Azure resources.

API de ASP.NET Core que se ejecuta en Azure App Service

En el explorador de la izquierda, haga clic en subscriptions (suscripciones) > <suSuscripción> > resourceGroups (Grupos de recursos) > myAuthResourceGroup > providers (proveedores) > Microsoft.Web > sites (sitios) > <front-end-app-name> (nombreDeAplicaciónDeFront-End) > config > authsettings.In the left browser, click subscriptions > <your-subscription> > resourceGroups > myAuthResourceGroup > providers > Microsoft.Web > sites > <front-end-app-name> > config > authsettings.

En la vista authsettings, haga clic en Edit (Editar).In the authsettings view, click Edit. Establezca additionalLoginParams en la siguiente cadena JSON, utilizando el identificador de cliente que copió.Set additionalLoginParams to the following JSON string, using the client ID you copied.

"additionalLoginParams": ["response_type=code id_token","resource=<back-end-client-id>"],

API de ASP.NET Core que se ejecuta en Azure App Service

Haga clic en PUT para guardar la configuración.Save your settings by clicking PUT.

Ahora las aplicaciones están configuradas.Your apps are now configured. El front-end ahora está listo para acceder al back-end con un token de acceso apropiado.The front end is now ready to access the back end with a proper access token.

Para más información acerca de cómo configurar el token de acceso para otros proveedores, consulte Actualización de tokens del proveedor de identidades.For information on how to configure the access token for other providers, see Refresh identity provider tokens.

Llamada a la API de forma segura desde el código de servidorCall API securely from server code

En este paso, permitirá que el código de servidor modificado anteriormente realice llamadas autenticadas a la API de back-end.In this step, you enable your previously modified server code to make authenticated calls to the back-end API.

La aplicación de front-end dispone ahora del permiso necesario y también agrega el identificador de cliente del back-end a los parámetros de inicio de sesión.Your front-end app now has the required permission and also adds the back end's client ID to the login parameters. Por lo tanto, puede obtener un token de acceso para la autenticación con la aplicación de back-end.Therefore, it can obtain an access token for authentication with the back-end app. App Service suministra este token al código de servicio mediante la inserción de un encabezado X-MS-TOKEN-AAD-ACCESS-TOKEN en cada solicitud autenticada (consulte Retrieve tokens in app code ([Recuperación de tokens en el código de aplicación]).App Service supplies this token to your server code by injecting a X-MS-TOKEN-AAD-ACCESS-TOKEN header to each authenticated request (see Retrieve tokens in app code).

Nota

Estos encabezados se insertan con todos los lenguajes admitidos.These headers are injected for all supported languages. Se accede a ellos mediante el patrón estándar de cada lenguaje respectivo.You access them using the standard pattern for each respective language.

En el repositorio local, abra de nuevo Controllers/TodoController.cs.In the local repository, open Controllers/TodoController.cs again. En la construcción TodoController(TodoContext context), agregue el siguiente código:Under the TodoController(TodoContext context) constructor, add the following code:

public override void OnActionExecuting(ActionExecutingContext context)
{
    base.OnActionExecuting(context);

    _client.DefaultRequestHeaders.Accept.Clear();
    _client.DefaultRequestHeaders.Authorization =
        new AuthenticationHeaderValue("Bearer", Request.Headers["X-MS-TOKEN-AAD-ACCESS-TOKEN"]);
}

Este código agrega el encabezado HTTP estándar Authorization: Bearer <access-token> a todas las llamadas de API remotas.This code adds the standard HTTP header Authorization: Bearer <access-token> to all remote API calls. En la canalización de ejecución de solicitudes de MVC de ASP.NET Core, OnActionExecuting se ejecuta justo antes del método de acción correspondiente (como GetAll()), de modo que cada una de las llamadas API salientes presenta ahora el token de acceso.In the ASP.NET Core MVC request execution pipeline, OnActionExecuting executes just before the respective action method (such as GetAll()) does, so each of your outgoing API call now presents the access token.

Guarde todos los cambios.Save your all your changes. En la ventana de terminal local, implemente los cambios en la aplicación de front-end con los siguientes comandos de Git:In the local terminal window, deploy your changes to the front-end app with the following Git commands:

git add .
git commit -m "add authorization header for server code"
git push frontend master

Vuelva a iniciar sesión en https://<front-end-app-name>.azurewebsites.net.Sign in to https://<front-end-app-name>.azurewebsites.net again. En la página de contrato de uso de datos del usuario, haga clic en Accept (Aceptar).At the user data usage agreement page, click Accept.

Ahora deberá poder crear, leer, actualizar y eliminar datos de la aplicación de back-end como antes.You should now be able to create, read, update, and delete data from the back-end app as before. La única diferencia ahora es que ambas aplicaciones están protegidas mediante la autenticación y autorización de App Service, incluidas las llamadas de servicio a servicio.The only difference now is that both apps are now secured by App Service authentication and authorization, including the service-to-service calls.

Felicidades.Congratulations! El código de servidor puede acceder ahora a los datos de back-end en nombre del usuario autenticado.Your server code is now accessing the back-end data on behalf of the authenticated user.

Llamada a la API de forma segura desde el código de exploradorCall API securely from browser code

En este paso, vinculará la aplicación de front-end de Angular.js a la API de back-end.In this step, you point the front-end Angular.js app to the back-end API. De esta manera, aprenderá a recuperar el token de acceso y a realizar llamadas API con él a la aplicación de back-end.This way, you learn how to retrieve the access token and make API calls to the back-end app with it.

Mientras que el código de servidor tiene acceso a los encabezados de solicitud, el código de cliente puede acceder a GET /.auth/me para obtener los mismos tokens de acceso (consulte Retrieve tokens in app code [Recuperación de tokens en el código de aplicación]).While the server code has access to request headers, client code can access GET /.auth/me to get the same access tokens (see Retrieve tokens in app code).

Sugerencia

En esta sección se usan los métodos HTTP estándar para mostrar las llamadas HTTP seguras.This section uses the standard HTTP methods to demonstrate the secure HTTP calls. Sin embargo, puede usar Active Directory Authentication Library (ADAL) para JavaScript para ayudar a simplificar el patrón de aplicación de Angular.js.However, you can use Active Directory Authentication Library (ADAL) for JavaScript to help simplify the Angular.js application pattern.

Configuración de CORSConfigure CORS

En Cloud Shell, habilite CORS en la dirección URL del cliente mediante el comando az resource update.In the Cloud Shell, enable CORS to your client's URL by using the az resource update command. Reemplace los marcadores de posición <nombreDeAplicaciónDeBack-End> y <nombreDeAplicaciónDeBack-End> .Replace the <back-end-app-name> and <front-end-app-name> placeholders.

az resource update --name web --resource-group myAuthResourceGroup --namespace Microsoft.Web --resource-type config --parent sites/<back-end-app-name> --set properties.cors.allowedOrigins="['https://<front-end-app-name>.azurewebsites.net']" --api-version 2015-06-01

Este paso no está relacionado con la autenticación y autorización.This step is not related to authentication and authorization. Sin embargo, son necesarios para que el explorador permita las llamadas API entre dominios desde la aplicación Angular.js.However, you need it so that your browser allows the cross-domain API calls from your Angular.js app. Para más información, consulte Adición de funcionalidad CORS.For more information, see Add CORS functionality.

Vinculación de la aplicación Angular.js a la API de back-endPoint Angular.js app to back-end API

En el repositorio local, abra wwwroot/index.html.In the local repository, open wwwroot/index.html.

En la línea 51, establezca la variable apiEndpoint en la dirección URL de la aplicación de back-end (https://<back-end-app-name>.azurewebsites.net).In Line 51, set the apiEndpoint variable to the URL of your back-end app (https://<back-end-app-name>.azurewebsites.net). Reemplace <nombreDeAplicaciónDeBack-End> por el nombre de su aplicación en App Service.Replace <back-end-app-name> with your app name in App Service.

En el repositorio local, abra wwwroot/app/scripts/todoListSvc.js y observe que apiEndpoint está anexado a todas las llamadas API.In the local repository, open wwwroot/app/scripts/todoListSvc.js and see that apiEndpoint is prepended to all the API calls. La aplicación Angular.js ahora está llamando a las API de back-end.Your Angular.js app is now calling the back-end APIs.

Adición del token de acceso a las llamadas APIAdd access token to API calls

En wwwroot/app/scripts/todoListSvc.js, encima de la lista de llamadas API (encima de la línea getItems : function(){), agregue la siguiente función a la lista:In wwwroot/app/scripts/todoListSvc.js, above the list of API calls (above the line getItems : function(){), add the following function to the list:

setAuth: function (token) {
    $http.defaults.headers.common['Authorization'] = 'Bearer ' + token;
},

Esta función se invoca para establecer el encabezado Authorization predeterminado con el token de acceso.This function is called to set the default Authorization header with the access token. La invocará en el paso siguiente.You call it in the next step.

En el repositorio local, abra wwwroot/app/scripts/app.js y busque el código siguiente:In the local repository, open wwwroot/app/scripts/app.js and find the following code:

$routeProvider.when("/Home", {
    controller: "todoListCtrl",
    templateUrl: "/App/Views/TodoList.html",
}).otherwise({ redirectTo: "/Home" });

Reemplace el bloque de código completo por el siguiente código:Replace the entire code block with the following code:

$routeProvider.when("/Home", {
    controller: "todoListCtrl",
    templateUrl: "/App/Views/TodoList.html",
    resolve: {
        token: ['$http', 'todoListSvc', function ($http, todoListSvc) {
            return $http.get('/.auth/me').then(function (response) {
                todoListSvc.setAuth(response.data[0].access_token);
                return response.data[0].access_token;
            });
        }]
    },
}).otherwise({ redirectTo: "/Home" });

El nuevo cambio se agrega a la asignación revolve que invoca a /.auth/me y establece el token de acceso.The new change adds the revolve mapping that calls /.auth/me and sets the access token. Esto garantiza que tiene el token de acceso antes de crear una instancia del controlador todoListCtrl.It makes sure you have the access token before instantiating the todoListCtrl controller. De este modo, todas las llamadas API por el controlador incluyen el token.That way all API calls by the controller includes the token.

Implementación de actualizaciones y pruebaDeploy updates and test

Guarde todos los cambios.Save your all your changes. En la ventana de terminal local, implemente los cambios en la aplicación de front-end con los siguientes comandos de Git:In the local terminal window, deploy your changes to the front-end app with the following Git commands:

git add .
git commit -m "add authorization header for Angular"
git push frontend master

Vaya de nuevo a https://<front-end-app-name>.azurewebsites.net.Navigate to https://<front-end-app-name>.azurewebsites.net again. Ahora debería poder crear, leer, actualizar y eliminar datos de la aplicación back-end, directamente en la aplicación Angular.js.You should now be able to create, read, update, and delete data from the back-end app, directly in the Angular.js app.

Felicidades.Congratulations! El código de cliente puede acceder ahora a los datos de back-end en nombre del usuario autenticado.Your client code is now accessing the back-end data on behalf of the authenticated user.

Cuando expiren los tokens de accesoWhen access tokens expire

El token de acceso expira después de un tiempo.Your access token expires after some time. Para obtener información sobre cómo actualizar los tokens de acceso sin requerir que los usuarios vuelvan a autenticarse con la aplicación, consulte Refresh identity provider tokens (Actualización de tokens del proveedor de identidades).For information on how to refresh your access tokens without requiring users to reauthenticate with your app, see Refresh identity provider tokens.

Limpieza de recursosClean up resources

En los pasos anteriores, creó recursos de Azure en un grupo de recursos.In the preceding steps, you created Azure resources in a resource group. Si prevé que no necesitará estos recursos en el futuro, elimine el grupo de recursos ejecutando el siguiente comando en Cloud Shell:If you don't expect to need these resources in the future, delete the resource group by running the following command in the Cloud Shell:

az group delete --name myAuthResourceGroup

Este comando puede tardar varios segundos en ejecutarse.This command may take a minute to run.

Pasos siguientesNext steps

¿Qué ha aprendido?What you learned:

  • Habilitación de la autenticación y autorización integradasEnable built-in authentication and authorization
  • Protección de las aplicaciones frente a las solicitudes no autenticadasSecure apps against unauthenticated requests
  • Uso de Azure Active Directory como proveedor de identidadesUse Azure Active Directory as the identity provider
  • Acceso a una aplicación remota en nombre del usuario que inició sesiónAccess a remote app on behalf of the signed-in user
  • Protección de llamadas de servicio a servicio con autenticación de tokensSecure service-to-service calls with token authentication
  • Uso de tokens de acceso desde el código de servidorUse access tokens from server code
  • Uso de tokens de acceso desde el código de cliente (explorador)Use access tokens from client (browser) code

Vaya al siguiente tutorial para aprender a asignar un nombre DNS personalizado a una aplicación.Advance to the next tutorial to learn how to map a custom DNS name to your app.