Administración de la autenticación en Static Web Apps
La aplicación web de lista de la compra necesita una manera de identificar a sus usuarios de forma única y de proporcionarles un espacio personal para almacenar los productos.
La autenticación es la forma de comprobar la identidad de un usuario que intenta acceder a un sistema de información. A continuación, analizaremos la autenticación y cómo puede implementarla en Azure Static Web Apps.
Proveedores de identidades
Azure Static Web Apps dinamiza la experiencia de autenticación al administrar la autenticación con los proveedores siguientes:
- Microsoft Entra ID
- GitHub
- X
Todos los proveedores de autenticación están habilitados de forma predeterminada. Más adelante veremos cómo puede restringir un proveedor de autenticación con una regla de ruta personalizada.
Carpeta del sistema
La carpeta del sistema /.auth proporciona acceso a todas las API relacionadas con la autenticación. Puede usar estos puntos de conexión para implementar un flujo de trabajo de autenticación completo en la aplicación, incluidos el inicio y el cierre de sesión y el acceso a la información del usuario.
Iniciar sesión
En la tabla siguiente se muestra la ruta de inicio de sesión específica del proveedor que puede usar en la aplicación.
| Proveedor de identidades | Ruta de inicio de sesión |
|---|---|
| Microsoft Entra ID | /.auth/login/aad |
| GitHub | /.auth/login/github |
| X | /.auth/login/x |
Por ejemplo, para iniciar sesión con GitHub, puede incluir un vínculo de inicio de sesión en la aplicación web con el fragmento de código siguiente:
<a href="/.auth/login/github">Login</a>
Si quiere que un usuario vuelva a una página específica después de iniciar sesión, también puede proporcionar una dirección URL en el parámetro de cadena de consulta post_login_redirect_uri. Por ejemplo:
<a href="/.auth/login/github?post_login_redirect_uri=/products">Login</a>
Logout
La ruta /.auth/logout cierra la sesión de los usuarios en la aplicación web. Puede agregar un vínculo a la navegación del sitio para permitir que el usuario cierre la sesión, tal y como se muestra en el ejemplo siguiente.
<a href="/.auth/logout">Log out</a>
Al igual que con el inicio de sesión, puede proporcionar una dirección URL a la que redirigir después de cerrar la sesión con el parámetro de cadena de consulta post_logout_redirect_uri:
<a href="/.auth/logout?post_logout_redirect_uri=/home">Log out</a>
Acceso a la información del usuario
Para acceder a la información del usuario relacionada con la autenticación, use un punto de conexión de acceso directo o un encabezado especial en las funciones de la API.
Si envía una solicitud GET a la ruta /.auth/me, recibirá un objeto JSON con los datos del usuario que ha iniciado sesión. Las solicitudes de los usuarios sin autenticar devuelven null.
A continuación, se muestra un objeto de respuesta de ejemplo.
{
"identityProvider": "github",
"userId": "d75b260a64504067bfc5b2905e3b8182",
"userDetails": "github-user-example",
"userRoles": [ "anonymous", "authenticated" ]
}
Funciones de API
Todas las funciones de API disponibles en Azure Static Web Apps tienen acceso a la misma información de usuario que la aplicación cliente. Los datos de usuario se pasan a las funciones en el encabezado HTTP x-ms-client-principal. Los datos se serializan como objeto JSON y se codifican en Base64.
En la función de ejemplo siguiente se muestra cómo leer y devolver la información del usuario.
module.exports = async function (context, req) {
const header = req.headers["x-ms-client-principal"];
const encoded = Buffer.from(header, "base64");
const decoded = encoded.toString("ascii");
context.res = {
body: {
userInfo: JSON.parse(decoded)
}
};
};
Pasos siguientes
Después, implementaremos un flujo de trabajo de autenticación completo en nuestra aplicación.