Eventos
Compilación de Intelligent Apps
17 mar, 21 - 21 mar, 10
Únase a la serie de reuniones para crear soluciones de inteligencia artificial escalables basadas en casos de uso reales con compañeros desarrolladores y expertos.
Regístrese ahoraEste explorador ya no se admite.
Actualice a Microsoft Edge para aprovechar las características y actualizaciones de seguridad más recientes, y disponer de soporte técnico.
Azure App Service proporciona un servicio de hospedaje web muy escalable y con aplicación de revisiones de un modo automático. Además, App Service incluye compatibilidad integrada con la autenticación y autorización de usuarios. En este tutorial se muestra cómo proteger las aplicaciones con la autenticación y autorización de App Service. Usa Express.js con vistas de front-end como ejemplo. 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.
Azure App Service proporciona un servicio de hospedaje web muy escalable y con aplicación automática de revisiones con el sistema operativo Linux. Además, App Service incluye compatibilidad integrada con la autenticación y autorización de usuarios. En este tutorial se muestra cómo proteger las aplicaciones con la autenticación y autorización de App Service. Usa Express.js con vistas. 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.
En el tutorial, aprenderá lo siguiente:
Sugerencia
Después de completar este escenario, continúe con el procedimiento siguiente para aprender a conectarse a los servicios de Azure como un usuario autenticado. Entre los escenarios comunes se incluyen el acceso a Azure Storage o una base de datos como usuario que tiene capacidades específicas o acceso a tablas o archivos específicos.
La autenticación de este procedimiento se proporciona en la capa de plataforma de hospedaje mediante Azure App Service. Debe implementar la aplicación de front-end y back-end y configurar la autenticación para que esta aplicación web se utilice correctamente.
La aplicación de front-end está configurada para usar de forma segura la API de back-end. La aplicación de front-end proporciona un inicio de sesión de Microsoft para el usuario y, después, le permite obtener su perfil falso del back-end. En este tutorial se usa un perfil falso a fin de simplificar los pasos para completar el escenario.
Antes de ejecutar el código fuente en el front-end, App Service inserta el accessToken
autenticado desde el encabezado x-ms-token-aad-access-token
de App Service. A continuación, el código fuente de front-end accede y envía accessToken al servidor back-end como bearerToken
para acceder de forma segura a la API de back-end. El servidor back-end valida bearerToken antes de pasarlo al código fuente de back-end. Una vez que el código fuente de back-end reciba bearerToken, es posible utilizarlo.
En el siguiente artículo de esta serie, bearerToken se intercambia por un token con un ámbito para acceder a Microsoft Graph API. Microsoft Graph API devuelve la información del perfil del usuario.
Si no tiene una suscripción a Azure, cree una cuenta gratuita de Azure antes de empezar.
Use el entorno de Bash en Azure Cloud Shell. Para más información, consulte Inicio rápido para Bash en Azure Cloud Shell.
Si prefiere ejecutar comandos de referencia de la CLI localmente, instale la CLI de Azure. Si utiliza Windows o macOS, considere la posibilidad de ejecutar la CLI de Azure en un contenedor Docker. Para más información, vea Ejecución de la CLI de Azure en un contenedor de Docker.
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.
En caso de que 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.
En Azure Cloud Shell, ejecute el comando siguiente para clonar el repositorio de ejemplo.
git clone https://github.com/Azure-Samples/js-e2e-web-app-easy-auth-app-to-app
Cree el grupo de recursos, el plan de aplicación web, la aplicación web e impleméntelos en un solo paso.
Cambie al directorio de la aplicación web de front-end.
cd js-e2e-web-app-easy-auth-app-to-app/frontend
Cree e implemente la aplicación web de front-end con az webapp up. Dado que el nombre de la aplicación web debe ser único de forma global, reemplace <front-end-app-name>
por un nombre único.
az webapp up --resource-group myAuthResourceGroup --name <front-end-app-name> --plan myPlan --sku FREE --os-type Windows --location "West Europe" --runtime "NODE:16LTS"
Cambie al directorio de la aplicación web de back-end.
cd ../backend
Implemente la aplicación web de back-end en el mismo grupo de recursos y plan de aplicación. Dado que el nombre de la aplicación web debe ser único de forma global, reemplace <back-end-app-name>
por un conjunto único de iniciales o números.
az webapp up --resource-group myAuthResourceGroup --name <back-end-app-name> --plan myPlan --os-type Windows --location "West Europe" --runtime "NODE:16LTS"
Cambie al directorio de la aplicación web de front-end.
cd frontend
Cree e implemente la aplicación web de front-end con az webapp up. Dado que el nombre de la aplicación web debe ser único de forma global, reemplace <front-end-app-name>
por un conjunto único de iniciales o números.
az webapp up --resource-group myAuthResourceGroup --name <front-end-app-name> --plan myPlan --sku FREE --location "West Europe" --os-type Linux --runtime "NODE:16-lts"
Cambie al directorio de la aplicación web de back-end.
cd ../backend
Implemente la aplicación web de back-end en el mismo grupo de recursos y plan de aplicación. Dado que el nombre de la aplicación web debe ser único de forma global, reemplace <back-end-app-name>
por un conjunto único de iniciales o números.
az webapp up --resource-group myAuthResourceGroup --name <back-end-app-name> --plan myPlan --sku FREE --location "West Europe" --runtime "NODE:16-lts"
La aplicación de front-end debe conocer la dirección URL de la aplicación de back-end para las solicitudes de API. Use el siguiente comando de la CLI de Azure para establecer la configuración de la aplicación. La dirección URL debe tener el formato https://<back-end-app-name>.azurewebsites.net
.
az webapp config appsettings set --resource-group myAuthResourceGroup --name <front-end-app-name> --settings BACKEND_URL="https://<back-end-app-name>.azurewebsites.net"
Vaya a la aplicación de front-end y devuelva el perfil falso desde el back-end. Esta acción se asegura de que el front-end solicite correctamente el perfil desde el back-end, y que el back-end devuelva el perfil.
Abra la aplicación web de front-end en un explorador, https://<front-end-app-name>.azurewebsites.net
.
Seleccione el vínculo Get user's profile
.
Vea el perfil falso devuelto desde la aplicación web de back-end.
El valor withAuthentication
de falso indica que la autenticación aún no está configurada.
En este paso, habilitará la autenticación y autorización para las dos aplicaciones web. En este tutorial se usa Microsoft Entra ID como proveedor de identidades.
También configura la aplicación de front-end para:
Para más información, consulte Configuración de la autenticación de Microsoft Entra para la aplicación de App Services.
En el menú de Azure Portal, seleccione Grupos de recursos o busque y seleccione Grupos de recursos desde cualquier página.
En Grupos de recursos, busque y seleccione el grupo de recursos. En Información general, seleccione la aplicación de back-end.
En el menú de la izquierda de la aplicación de back-end, seleccione Autenticación y, luego, Agregar proveedor de identidades.
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 Microsoft Entra.
Acepte la configuración predeterminada y seleccione Agregar.
Se abrirá la página de autenticación. Copie el id. de cliente de la aplicación Microsoft Entra 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.
En el menú de Azure Portal, seleccione Grupos de recursos o busque y seleccione Grupos de recursos desde cualquier página.
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 frontend.
En el menú izquierdo de la aplicación de frontend, seleccione Autenticación, y después, seleccione Agregar proveedor de identidades.
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 Microsoft Entra.
Acepte la configuración predeterminada y seleccione Agregar.
Se abrirá la página de autenticación. Copie el id. de cliente de la aplicación Microsoft Entra en un Bloc de notas. Este valor lo necesitará más adelante.
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. Para completar la autenticación, tiene que realizar tres acciones:
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. Para asegurarse de que se regeneran, debe cerrar sesión en la aplicación e iniciarla de nuevo. 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.
En este paso, concederá a la aplicación de front-end acceso a la aplicación de 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).
En la página 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.
Seleccione Agregar un permiso y, después, seleccione Mis API><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, Agregar permisos.
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>.
az extension add --name authV2
authSettings=$(az webapp auth show -g myAuthResourceGroup -n <front-end-app-name>)
authSettings=$(echo "$authSettings" | jq '.properties' | jq '.identityProviders.azureActiveDirectory.login += {"loginParameters":["scope=openid 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:
openid
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.Sugerencia
api://<back-end-client-id>/user_impersonation
en Azure Portal, vaya a la página Autenticación de la aplicación de back-end, haga clic en el vínculo en Proveedor de identidades y, a continuación, en Exponer una API en el menú izquierdo.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.
También debe configurar App Service de back-end para que solo acepte un token del front-end App Service. Si no lo hace, se producirá un "error 403: Prohibido" al pasar el token desde el front-end al back-end.
Puede establecerlo a través del mismo proceso de la CLI de Azure que usó en el paso anterior.
Obtenga el appId
App Service de front-end (puede obtenerlo en la hoja "Autenticación" de App Service de front-end).
Ejecute la siguiente CLI de Azure, sustituyendo los <back-end-app-name>
y <front-end-app-id>
.
authSettings=$(az webapp auth show -g myAuthResourceGroup -n <back-end-app-name>)
authSettings=$(echo "$authSettings" | jq '.properties' | jq '.identityProviders.azureActiveDirectory.validation.defaultAuthorizationPolicy.allowedApplications += ["<front-end-app-id>"]')
az webapp auth set --resource-group myAuthResourceGroup --name <back-end-app-name> --body "$authSettings"
authSettings=$(az webapp auth show -g myAuthResourceGroup -n <back-end-app-name>)
authSettings=$(echo "$authSettings" | jq '.properties' | jq '.identityProviders.azureActiveDirectory.validation.jwtClaimChecks += { "allowedClientApplications": ["<front-end-app-id>"]}')
az webapp auth set --resource-group myAuthResourceGroup --name <back-end-app-name> --body "$authSettings"
La aplicación de front-end debe pasar la autenticación del usuario con el ámbito correcto user_impersonation
al back-end. En los pasos siguientes revise el código proporcionado en el ejemplo para esta funcionalidad.
Vea el código fuente de la aplicación de front-end:
Use el encabezado x-ms-token-aad-access-token
inyectado de App Service de front-end para obtener mediante programación el accessToken del usuario.
// ./src/server.js
const accessToken = req.headers['x-ms-token-aad-access-token'];
Use el accessToken en el encabezado Authentication
como valor bearerToken
.
// ./src/remoteProfile.js
// Get profile from backend
const response = await fetch(remoteUrl, {
cache: "no-store", // no caching -- for demo purposes only
method: 'GET',
headers: {
'Authorization': `Bearer ${accessToken}`
}
});
if (response.ok) {
const { profile } = await response.json();
console.log(`profile: ${profile}`);
} else {
// error handling
}
En este tutorial se devuelve un perfil falso para simplificar el escenario. En el siguiente tutorial de esta serie se muestra cómo intercambiar el bearerToken de back-end para un nuevo token con el ámbito de un servicio de Azure descendente, como Microsoft Graph.
Si la solicitud del front-end no está autorizada, el servicio de aplicaciones de back-end rechaza la solicitud con un código de error HTTP 401 antes de que la solicitud llegue al código de la aplicación. Cuando se alcanza el código back-end (porque incluye un token autorizado), extraiga bearerToken para obtener el accessToken.
Vea el código fuente de la aplicación de back-end:
// ./src/server.js
const bearerToken = req.headers['Authorization'] || req.headers['authorization'];
if (bearerToken) {
const accessToken = bearerToken.split(' ')[1];
console.log(`backend server.js accessToken: ${!!accessToken ? 'found' : 'not found'}`);
// TODO: get profile from Graph API
// provided in next article in this series
// return await getProfileFromMicrosoftGraph(accessToken)
// return fake profile for this tutorial
return {
"displayName": "John Doe",
"withAuthentication": !!accessToken ? true : false
}
}
Use el sitio web de front-end en un explorador. La dirección URL está en el formato de https://<front-end-app-name>.azurewebsites.net/
.
El explorador solicita la autenticación a la aplicación web. Complete la autenticación.
Una vez completada la autenticación, la aplicación de front-end devuelve la página principal de la aplicación.
Seleccione Get user's profile
. Esto pasa la autenticación en el token de portador al back-end.
El back-end responde con el nombre de perfil codificado de forma rígida falso: John Doe
.
El valor withAuthentication
de true indica que la autenticación aún está configurada.
En los pasos anteriores, creó recursos de Azure en un grupo de recursos.
Elimine el grupo de recursos mediante la ejecución del siguiente comando en Cloud Shell. Este comando puede tardar varios segundos en ejecutarse.
az group delete --name myAuthResourceGroup
Use el identificador de cliente de las aplicaciones de autenticación, que encontró anteriormente y anotó en las secciones de las Enable authentication and authorization
aplicaciones de back-end y front-end.
Elimine los registros de aplicaciones para las aplicaciones de front-end y back-end.
# delete app - do this for both frontend and backend client ids
az ad app delete <client-id>
La autenticación de este procedimiento se proporciona en la capa de plataforma de hospedaje mediante Azure App Service. No hay ningún emulador equivalente. Debe implementar la aplicación de front-end y de back-end y la autenticación de configuración para que cada uno pueda usar la autenticación.
Las aplicaciones de front-end y back-end tienen rutas /debug
para ayudar a depurar la autenticación cuando esta aplicación no devuelve el perfil falso. La ruta de depuración de front-end proporciona las partes críticas para validar:
BACKEND_URL
se configura correctamente como https://<back-end-app-name>.azurewebsites.net
. No incluya esa barra diagonal final ni la ruta.x-ms-token-*
se inyectan.user_impersonation
. Si el ámbito no lo incluye, podría ser un problema de tiempo. Compruebe los parámetros de la aplicación de front-end login
en los recursos de Azure. Espere unos minutos para la replicación de la autenticación.En Azure Portal de la aplicación web, seleccione Herramientas de desarrollo -> Herramientas avanzadas y, después, Ir ->. Se abre una nueva ventana o pestaña del explorador.
En la nueva pestaña del explorador, seleccione Examinar directorio -> Sitio wwwroot.
Compruebe que lo siguiente está en el directorio:
Compruebe que la propiedad name
de package.json es la misma que el nombre web, ya sea frontend
o backend
.
Si ha cambiado el código fuente y tiene que volver a implementarlo, utilice az webapp up desde el directorio que tiene el archivo package.json para esa aplicación.
Ambas aplicaciones web deben devolver algo cuando se solicite la página principal. Si no puede acceder a /debug
en una aplicación web, la aplicación no se ha iniciado correctamente. Revise los registros de errores de esa aplicación web.
Como la aplicación de front-end llama a la aplicación de back-end desde el código fuente del servidor, esto no es algo que pueda ver en el tráfico de red del explorador. Utilice la lista siguiente para determinar que la solicitud del perfil de back-end se haya realizado correctamente:
console.log
, que ayuda a determinar dónde se ha producido el error.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).
Este enfoque requiere que el código del servidor pase el token de acceso al código de JavaScript que se ejecuta en el explorador del cliente. Dado que no hay forma de proteger el token de acceso en el explorador, no es un método recomendable. Actualmente, se recomienda el patrón Backend-for-Frontend. Si se aplica al ejemplo de este tutorial, el código del explorador de la aplicación de front-end realizaría llamadas a la API en una sesión autenticada a su código de servidor como intermediario, y el código del servidor de la aplicación de front-end realizaría a su vez las llamadas a la API de la aplicación de back-end usando el valor del encabezado x-ms-token-aad-access-token
como token portador. Todas las llamadas del código de su explorador al código del servidor estarían ya protegidas por la sesión autentificada.
¿Qué ha aprendido?
Pase al siguiente tutorial para aprender a utilizar la identidad de este usuario y acceder a un servicio de Azure.
Eventos
Compilación de Intelligent Apps
17 mar, 21 - 21 mar, 10
Únase a la serie de reuniones para crear soluciones de inteligencia artificial escalables basadas en casos de uso reales con compañeros desarrolladores y expertos.
Regístrese ahoraCursos
Módulo
Autenticación de usuarios con Azure Static Web Apps - Training
Publique una aplicación de JavaScript de Angular, React, Svelte o Vue con API y autenticación mediante Azure Static Web Apps y Azure Functions. Implemente el código de GitHub en un sitio de ensayo mediante las direcciones URL de vista previa.
Certificación
Microsoft Certified: Identity and Access Administrator Associate - Certifications
Muestre las características de Microsoft Entra ID para modernizar las soluciones de identidad, implementar soluciones híbridas e implementar la gobernanza de identidades.