Tutorial: Autenticación y autorización de usuarios de extremo a extremo en Azure App Service

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.

Estos son solo algunos de los posibles escenarios de autenticación y autorización de App Service.

Esta es una lista más completa de lo que aprenderá en el tutorial:

También puede seguir los pasos de este tutorial en macOS, Linux, Windows.

Si no tiene una suscripción a Azure, cree una cuenta gratuita antes de empezar.

Requisitos previos

Para completar este tutorial:

• Instalación de Git
• Instale el SDK de .NET Core 3.1 más reciente - Use el entorno de Bash en Azure Cloud Shell. - Si lo prefiere, instale la CLI de Azure para ejecutar sus comandos de referencia.- Si usa una instalación local, inicie sesión en la CLI de Azure mediante el comando az login. Siga los pasos que se muestran en el terminal para completar el proceso de autenticación. Para ver otras opciones de inicio de sesión, consulte Inicio de sesión con la CLI de Azure.- Cuando se le solicite, instale las extensiones de la CLI de Azure la primera vez que la use. Para más información sobre las extensiones, consulte Uso de extensiones con la CLI de Azure. - Ejecute az version para buscar cuál es la versión y las bibliotecas dependientes que están instaladas. Para realizar la actualización a la versión más reciente, ejecute az upgrade..

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

En este paso, configurará el proyecto .NET Core local. Usará el mismo proyecto para implementar una aplicación de API de back-end y una aplicación web de front-end.

Clonación y ejecución de la aplicación de ejemplo

1. Ejecute los comandos siguientes para clonar el repositorio de ejemplo y ejecutarlo.

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

2. Vaya a http://localhost:5000 e intente agregar, modificar y quitar elementos de lista de tareas.

   

3. Para detener ASP.NET Core, presione Ctrl+C en el terminal.

4. Asegúrese de que la rama predeterminada sea main.

   git branch -m main
   

   Sugerencia

   App Service no exige el cambio de nombre de rama. Sin embargo, dado que muchos repositorios cambian su rama predeterminada a main, en este tutorial también se muestra cómo implementar un repositorio desde main. Para más información, consulte Cambio de la rama de implementación.

Implementación de aplicaciones en Azure

En este paso, implementará el proyecto en dos aplicaciones de App Service. Una es la aplicación de front-end y la otra es la aplicación de back-end.

Configuración de un usuario de implementación

Se puede implementar FTP y Git local en una aplicación web de Azure mediante un usuario de implementación. Una vez configurado este usuario de implementación, podrá usarlo en todas las implementaciones de Azure. El nombre de usuario y la contraseña en el nivel de cuenta son diferentes de las credenciales de suscripción de Azure.

Para configurar el usuario de implementación, ejecute el comando az webapp deployment user set en Azure Cloud Shell. Reemplace <username> y <password> por un nombre de usuario y una contraseña de usuario de implementación.

• El nombre de usuario debe ser único dentro de Azure y no debe contener el símbolo "@" para las inserciones de Git local.
• La contraseña debe tener al menos ocho caracteres y dos de los tres elementos siguientes: letras, números y símbolos.

az webapp deployment user set --user-name <username> --password <password>

La salida JSON muestra la contraseña como null. Si se produce un error 'Conflict'. Details: 409, cambie el nombre de usuario. Si se produce un error 'Bad Request'. Details: 400, use una contraseña más segura.

Anote el nombre de usuario y la contraseña que se usarán para implementar las aplicaciones web.

Creación de recursos de Azure

az group create --name myAuthResourceGroup --location "West Europe"
az appservice plan create --name myAuthAppServicePlan --resource-group myAuthResourceGroup --sku FREE
az webapp create --resource-group myAuthResourceGroup --plan myAuthAppServicePlan --name <front-end-app-name> --deployment-local-git --query deploymentLocalGitUrl
az webapp create --resource-group myAuthResourceGroup --plan myAuthAppServicePlan --name <back-end-app-name> --deployment-local-git --query deploymentLocalGitUrl

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

Inserción en Azure desde Git

1. Puesto que va a implementar la rama main, debe establecer la rama de implementación predeterminada para las dos aplicaciones de App Service en main (consulte Cambio de la rama de implementación). En Cloud Shell, establezca el valor de la aplicación DEPLOYMENT_BRANCH con el comando az webapp config appsettings set.

   az webapp config appsettings set --name <front-end-app-name> --resource-group myAuthResourceGroup --settings DEPLOYMENT_BRANCH=main
   az webapp config appsettings set --name <back-end-app-name> --resource-group myAuthResourceGroup --settings DEPLOYMENT_BRANCH=main
   

2. De nuevo en la ventana de terminal local, ejecute los siguientes comandos de Git para implementar la aplicación de back-end. Reemplace <deploymentLocalGitUrl-of-back-end-app> por la dirección URL del repositorio de Git remoto que guardó en Creación de recursos de Azure. 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.

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

3. 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. Reemplace <deploymentLocalGitUrl-of-front-end-app> por la dirección URL del repositorio de Git remoto que guardó en Creación de recursos de Azure.

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

Navegación hasta las aplicaciones

Use un explorador para ir a las siguientes direcciones URL y ver las dos aplicaciones en funcionamiento.

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

Llamada a una API de back-end desde el 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. Más adelante, habilitará el acceso autenticado del front-end al back-end.

Modificación del código de front-end

1. En el repositorio local, abra Controllers/TodoController.cs. Al comienzo de la clase TodoController, agregue las siguientes líneas y reemplace <back-end-app-name> por el nombre de la aplicación de back-end:

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

2. Busque el método decorado con [HttpGet] y reemplace el código entre llaves por:

   var data = await _client.GetStringAsync($"{_remoteUrl}/api/Todo");
   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.

3. Después, busque el método decorado con [HttpGet("{id}")] y reemplace el código entre llaves por:

   var data = await _client.GetStringAsync($"{_remoteUrl}/api/Todo/{id}");
   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.

4. Después, busque el método decorado con [HttpPost] y reemplace el código entre llaves por:

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

   La primera línea realiza una llamada POST /api/Todo a la aplicación de API de back-end.

5. Después, busque el método decorado con [HttpPut("{id}")] y reemplace el código entre llaves por:

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

   La primera línea realiza una llamada PUT /api/Todo/{id} a la aplicación de API de back-end.

6. Después, busque el método decorado con [HttpDelete("{id}")] y reemplace el código entre llaves por:

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

   La primera línea realiza una llamada DELETE /api/Todo/{id} a la aplicación de API de back-end.

7. Guarde todos los cambios. En la ventana de terminal local, implemente los cambios en la aplicación de front-end con los siguientes comandos de Git:

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

Comprobación de los cambios

1. Vaya a http://<front-end-app-name>.azurewebsites.net y agregue algunos elementos, como from front end 1 y from front end 2.

2. Vaya a http://<back-end-app-name>.azurewebsites.net para ver los elementos agregados desde la aplicación de front-end. 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.

   

Configuración de la autenticación

En este paso, habilitará la autenticación y autorización para las dos aplicaciones. 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.

Usará Azure Active Directory como proveedor de identidades. Para más información, consulte Configuración de la autenticación de Azure Active Directory para una aplicación de App Services.

Habilitación de la autenticación y autorización en una aplicación de back-end

1. En el menú de Azure Portal, seleccione Grupos de recursos o busque y seleccione Grupos de recursos desde cualquier página.

2. En Grupos de recursos, busque y seleccione el grupo de recursos. En Información general, seleccione la página de administración de la aplicación de back-end.

   

3. En el menú de la izquierda de la aplicación de back-end, seleccione Autenticación y haga clic en Agregar proveedor de identidades.

4. En la página Agregar un proveedor de identidades, seleccione Microsoft en Proveedor de identidades para iniciar sesión en las identidades de Microsoft y Azure AD.

5. Acepte la configuración predeterminada y haga clic en Agregar.

   

6. Se abrirá la página de autenticación. Copie el valor de Identificador de cliente de la aplicación de Azure AD en un bloc de notas. Este valor lo necesitará más adelante.

   

Si se detiene aquí, tiene una aplicación independiente que ya está protegida por la autenticación y la autorización de App Service. En las secciones restantes se muestra cómo proteger una solución de varias aplicaciones al "fluir" el usuario autenticado desde el front-end hasta el back-end.

Habilitación de la autenticación y autorización en una aplicación de front-end

Siga los mismos pasos para la aplicación de front-end, pero omita el último paso. No es necesario el identificador de cliente para la aplicación de front-end. Aun así, permanezca en la página de Autenticación de la aplicación de front-end, ya que la usará en el paso siguiente.

Si quiere, vaya a http://<front-end-app-name>.azurewebsites.net. Debería dirigirle ahora a una página de inicio de sesión segura. Después de iniciar sesión, todavía no puede tener acceso a los datos desde la aplicación de back-end, porque la aplicación de back-end requiere ahora un inicio de sesión de Azure Active Directory desde la aplicación de front-end. Tiene que realizar tres acciones:

• Conceder al front-end acceso al back-end
• Configurar App Service para devolver un token que se pueda usar
• Usar el token en el código

Conceder a la aplicación de front-end acceso al 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. En este paso, concederá a la aplicación de front-end permisos para acceder al back-end en nombre del usuario. (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).

1. En la página de Autenticación de la aplicación de front-end, seleccione el nombre de la aplicación de front-end en Proveedor de identidades Este registro de aplicación se generó automáticamente. Seleccione Permisos de API en el menú izquierdo.

2. Seleccione Agregar un permiso y, a continuación, Mis API > <back-end-app-name> .

3. 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.

   

Configuración de App Service para devolver un token de acceso que se pueda usar

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. 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. 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.

En Cloud Shell, ejecute los siguientes comandos en la aplicación de front-end para agregar el parámetro scope a la configuración de autenticación identityProviders.azureActiveDirectory.login.loginParameters. Reemplace <front-end-app-name> y <back-end-client-id> .

authSettings=$(az webapp auth show -g myAuthResourceGroup -n <front-end-app-name>)
authSettings=$(echo "$authSettings” | jq '.properties' | jq '.identityProviders.azureActiveDirectory.login += {"loginParameters":["scope=openid profile email offline_access api://<back-end-client-id>/user_impersonation"]}')
az webapp auth set --resource-group myAuthResourceGroup --name <front-end-app-name> --body "$authSettings"

Los comandos agregan eficazmente una propiedad loginParameters con ámbitos personalizados adicionales. A continuación, se proporciona una explicación de los ámbitos solicitados:

• App Service ya solicita openid, profile y email de manera predeterminada. Para obtener información, consulte Ámbitos de OpenID Connect.
• api://<back-end-client-id>/user_impersonation es una API expuesta en el registro de la aplicación de back-end. Es el ámbito que proporciona un token JWT que incluye la aplicación de back-end como audiencia del token.
• offline_access se incluye aquí por comodidad (en caso de que quiera actualizar los tokens).

id=$(az ad app show --id <back-end-client-id> --query objectId --output tsv)
az rest --method PATCH --url https://graph.microsoft.com/v1.0/applications/$id --body "{'api':{'requestedAccessTokenVersion':2}}" 

Ahora las aplicaciones están configuradas. El front-end ahora está listo para acceder al back-end con un token de acceso apropiado.

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.

Llamada a la API de forma segura desde el código de servidor

En este paso, permitirá que el código de servidor modificado anteriormente realice llamadas autenticadas a la API de back-end.

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. Por lo tanto, puede obtener un token de acceso para la autenticación con la aplicación de back-end. 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]).

1. En el repositorio local, abra de nuevo Controllers/TodoController.cs. En la construcción TodoController(TodoContext context), agregue el siguiente código:

   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. En la canalización de ejecución de solicitudes de MVC de ASP.NET Core, OnActionExecuting se ejecuta justo antes de la acción correspondiente, de modo que cada una de las llamadas API salientes presenta ahora el token de acceso.

2. Guarde todos los cambios. En la ventana de terminal local, implemente los cambios en la aplicación de front-end con los siguientes comandos de Git:

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

3. Vuelva a iniciar sesión en https://<front-end-app-name>.azurewebsites.net. En la página de contrato de uso de datos del usuario, haga clic en Accept (Aceptar).

   Ahora deberá poder crear, leer, actualizar y eliminar datos de la aplicación de back-end como antes. 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.

Felicidades. El código de servidor puede acceder ahora a los datos de back-end en nombre del usuario autenticado.

Llamada a la API de forma segura desde el código de explorador

En este paso, vinculará la aplicación de front-end de Angular.js a la API de back-end. De esta manera, aprenderá a recuperar el token de acceso y a realizar llamadas API con él a la aplicación de back-end.

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]).

Configuración de CORS

En Cloud Shell, habilite CORS en la dirección URL del cliente mediante el comando az webapp cors add. De nuevo, reemplace los marcadores <back-end-app-name> y <front-end-app-name> .

az webapp cors add --resource-group myAuthResourceGroup --name <back-end-app-name> --allowed-origins 'https://<front-end-app-name>.azurewebsites.net'

Este paso no está relacionado con la autenticación y autorización. Sin embargo, son necesarios para que el explorador permita las llamadas API entre dominios desde la aplicación Angular.js. Para más información, consulte Adición de funcionalidad CORS.

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

1. En el repositorio local, abra wwwroot/index.html.

2. En la línea 51, establezca la variable apiEndpoint en la dirección URL HTTPS de la aplicación de back-end (https://<back-end-app-name>.azurewebsites.net). Reemplace <back-end-app-name> por el nombre de la aplicación de App Service.

3. En el repositorio local, abra wwwroot/app/scripts/todoListSvc.js y observe que apiEndpoint está anexado a todas las llamadas API. La aplicación Angular.js ahora está llamando a las API de back-end.

Adición del token de acceso a las llamadas API

1. 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:

   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. La invocará en el paso siguiente.

2. En el repositorio local, abra wwwroot/app/scripts/app.js y busque el código siguiente:

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

3. Reemplace el bloque de código completo por el siguiente código:

   $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 resolve que invoca a /.auth/me y establece el token de acceso. Esto garantiza que tiene el token de acceso antes de crear una instancia del controlador todoListCtrl. De este modo, todas las llamadas API por el controlador incluyen el token.

Implementación de actualizaciones y prueba

1. Guarde todos los cambios. En la ventana de terminal local, implemente los cambios en la aplicación de front-end con los siguientes comandos de Git:

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

2. Vaya de nuevo a https://<front-end-app-name>.azurewebsites.net. Ahora debería poder crear, leer, actualizar y eliminar datos de la aplicación back-end, directamente en la aplicación Angular.js.

Felicidades. El código de cliente puede acceder ahora a los datos de back-end en nombre del usuario autenticado.

Cuando expiren los tokens de acceso

El token de acceso expira después de un tiempo. 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).

Limpieza de recursos

En los pasos anteriores, creó recursos de Azure en un grupo de recursos. Si prevé que no necesitará estos recursos en el futuro, elimine el grupo de recursos ejecutando el siguiente comando en Cloud Shell:

az group delete --name myAuthResourceGroup

Este comando puede tardar varios segundos en ejecutarse.

Pasos siguientes

¿Qué ha aprendido?

Vaya al siguiente tutorial para aprender a asignar un nombre DNS personalizado a una aplicación web.