Escenario: Aplicación de una sola página
Aprenda lo necesario para crear una aplicación de página única (SPA) Para obtener instrucciones sobre Azure Static Web Apps, consulte Autenticación y autorización para Static Web Apps en su lugar.
Introducción
Si aún no lo ha hecho, cree su primera aplicación según se indica en la guía de inicio rápido de JavaScript SPA:
Información general
Muchas aplicaciones web modernas se compilan como aplicaciones de página única del lado cliente. Los desarrolladores las escriben mediante JavaScript o un marco SPA, como Angular, Vue y React. Estas aplicaciones se ejecutan en un explorador web y tienen características de autenticación diferentes a las de las aplicaciones web del lado servidor tradicionales.
La Plataforma de identidad de Microsoft ofrece dos opciones para que las aplicaciones de página única inicien la sesión de los usuarios y obtengan tokens para acceder a los servicios de back-end o a las API web:
Flujo de códigos de autorización de OAuth 2.0 (con PKCE) El flujo del código de autorización permite a la aplicación intercambiar un código de autorización para los tokens de identificador para representar al usuario autenticado y también los tokens de acceso necesarios para llamar a las API protegidas.
Proof Key for Code Exchange (PKCE) es una extensión del flujo de código de autorización para evitar ataques de inyección de código de autorización. Además, devuelve tokens de actualización que proporcionan acceso a largo plazo a los recursos en nombre de usuarios sin necesidad de interacción adición de estos.
El uso del flujo de código de autorización con PKCE es el enfoque de autorización recomendado y más seguro, no solo en aplicaciones JavaScript nativas y basadas en explorador, sino en todos los demás tipos de clientes de OAuth.
- Flujo implícito de OAuth 2.0. El flujo de concesión implícita permite a la aplicación obtener tokens de identificador y de acceso. A diferencia del flujo del código de autorización, el flujo de concesión implícita no devuelve un token de actualización. También es menos seguro, por lo que se recomienda usar el flujo de código de autorización para las nuevas aplicaciones. Este flujo de autenticación no incluye escenarios de aplicaciones que usan marcos de JavaScript multiplataforma, como Electron y React Native, ya que requieren más funcionalidades para la interacción con las plataformas nativas.
Características específicas
Para habilitar este escenario en la aplicación, necesita lo siguiente:
- Registro de aplicaciones con Microsoft Entra ID. Los pasos para el registro difieren entre el flujo de concesión implícita y el flujo de código de autorización.
- La configuración de la aplicación con las propiedades de aplicación registradas, como el identificador de aplicación.
- Usar la biblioteca de autenticación de Microsoft para JavaScript (MSAL.js) para completar el flujo de autenticación a fin de iniciar sesión y adquirir tokens.
Lecturas recomendadas
Si no está familiarizado con la administración de identidades y acceso (IAM) con OAuth 2.0 y OpenID Connect, o incluso si es nuevo en IAM en la plataforma de identidad de Microsoft, debe dar máxima prioridad a leer los siguientes artículos.
Aunque su lectura no es necesaria antes de completar el primer inicio rápido o tutorial, se tratan temas fundamentales para la plataforma, y estar familiarizado con ellos le ayudará a medida que crea escenarios más complejos.
Autenticación y autorización
Plataforma de identidad de Microsoft
Pasos siguientes
Avance al siguiente artículo de este escenario, Registro de la aplicación.