Inicio rápido: Inicio de sesión de usuarios en una aplicación de página única de React mediante la autenticación nativa

Se aplica a: Inquilinos externos (más información)

En este inicio rápido, usará una aplicación de página única (SPA) de React para demostrar cómo autenticar a los usuarios mediante la API de autenticación nativa. La aplicación de ejemplo muestra el registro de usuario, el inicio de sesión, el cierre de sesión y el restablecimiento de contraseña con un correo electrónico y una contraseña.

Prerrequisitos

• Una cuenta de Azure con una suscripción activa. Si no tienes una, crea una cuenta gratis.
• Esta cuenta de Azure debe tener permisos para administrar aplicaciones. Cualquiera de los siguientes roles de Microsoft Entra incluye los permisos necesarios:
  • Administrador de aplicaciones
  • Desarrollador de aplicaciones
• Un inquilino externo. Si no tiene uno, cree un nuevo inquilino externo en el Centro de administración de Microsoft Entra.
• Flujo de usuario. Para más información, consulte Creación de flujos de usuario de registro de autoservicio para aplicaciones en inquilinos externos. Asegúrese de que el flujo de usuario incluya los siguientes atributos de usuario:
  • Nombre asignado
  • Apellido
• Si aún no lo ha hecho, Registre una aplicación en el Centro de administración de Microsoft Entra. Asegúrese de:
  • Registre el identificador de aplicación (cliente) y el identificador de directorio (inquilino) para su uso posterior.
  • Conceda el consentimiento del administrador al registro de la aplicación.
• Asociación del registro de aplicaciones con el flujo de usuario
• Node.js.
• Visual Studio Code u otro editor de código.

Habilitar flujos de autenticación de cliente público y nativa

Para especificar que esta aplicación es un cliente público y puede usar la autenticación nativa, habilite el cliente público y los flujos de autenticación nativos:

1. En la página registros de aplicaciones, seleccione el registro de aplicaciones para el que desea habilitar flujos de autenticación nativa y cliente público.
2. En Administrar, seleccione Autenticación.
3. En Configuración avanzada, permita flujos de cliente públicos:
   1. Para Habilite los siguientes flujos de escritorio y móvil seleccione Sí.
   2. Para Habilitar autenticación nativa, seleccione Sí.
4. Seleccione el botón Guardar.

Clonar o descargar SPA de ejemplo

Para obtener la aplicación de ejemplo, puede clonarla desde GitHub o descargarla como un archivo .zip.

Para clonar la muestra, abra un símbolo del sistema y desplácese hasta donde desea crear el proyecto, e introduzca el siguiente comando:

git clone https://github.com/Azure-Samples/ms-identity-ciam-native-javascript-samples.git

Como alternativa, descargue el ejemplo y extráigalo en una ruta de acceso de archivo donde la longitud del nombre sea inferior a 260 caracteres.

Instalación de dependencias del proyecto

1. Abra una ventana de terminal y vaya al directorio que contiene la aplicación de ejemplo de React:

   cd API\React\ReactAuthSimple
   

2. Ejecute el siguiente comando para instalar las dependencias de la aplicación:

   npm install
   

Configuración de la aplicación React de ejemplo

1. En el editor de código, abra el archivo src\config.ts.

2. Busque el marcador de posición Enter_the_Application_Id_Here y reemplácelo por el identificador de aplicación (cliente) de la aplicación que registró anteriormente.

3. Guarde los cambios.

Configuración del servidor proxy CORS

Las API de autenticación nativas no admiten el uso compartido de recursos entre orígenes (CORS), por lo que debe configurar un servidor proxy entre la aplicación SPA y las API.

Este ejemplo de código incluye un servidor proxy CORS que reenvía solicitudes a puntos de conexión URL de la API de autenticación nativa. El servidor proxy CORS es un servidor Node.js que escucha en el puerto 3001.

Para configurar el servidor proxy, abra el archivo proxy.config.js y busque el marcador de posición:

• tenantSubdomain y reemplácelo por el subdominio Directorio (inquilino). Por ejemplo, si el dominio principal del cliente es contoso.onmicrosoft.com, utilice contoso. Si no tiene su subdominio de inquilino, obtenga información sobre cómo leer los detalles de su inquilino.
• tenantId y reemplácelo por el identificador de directorio (arrendatario). Si no tiene el identificador del inquilino, obtenga información sobre cómo leer los detalles del inquilino.

Ejecución y prueba de la aplicación

Ahora ha configurado la aplicación de ejemplo y está lista para ejecutarse.

1. Desde la ventana del terminal, ejecute los siguientes comandos para iniciar el servidor proxy CORS:

   cd API\React\ReactAuthSimple
   npm run cors
   

2. Para iniciar la aplicación React, abra otra ventana de terminal y, a continuación, ejecute los siguientes comandos:

   cd API\React\ReactAuthSimple
   npm start
   

3. Abra un explorador web y vaya a http://localhost:3000/.

4. Para registrarse en una cuenta, seleccione Registrarsey siga las indicaciones.

5. Después de registrarse, pruebe el inicio de sesión y el restablecimiento de contraseña seleccionando inicio de sesión y restablecer contraseña respectivamente.

Habilitación del inicio de sesión con un alias o un nombre de usuario

Puede permitir que los usuarios que inicien sesión con una dirección de correo electrónico y una contraseña también inicien sesión con un nombre de usuario y una contraseña. El nombre de usuario también denominado identificador de inicio de sesión alternativo puede ser un identificador de cliente, un número de cuenta u otro identificador que elija usar como nombre de usuario.

Puede asignar nombres de usuario a la cuenta de usuario manualmente a través del Centro de administración de Microsoft Entra o automatizarlo en la aplicación a través de Microsoft Graph API.

Siga los pasos descritos en el artículo Iniciar sesión con un alias o nombre de usuario para permitir que los usuarios inicien sesión con un nombre de usuario en tu aplicación.

1. Habilite el nombre de usuario en el inicio de sesión.
2. Cree usuarios con el nombre de usuario en el Centro de administración o actualice los usuarios existentes a agregando un nombre de usuario. Como alternativa, también puede automatizar la creación y actualización de usuarios en la aplicación mediante Microsoft Graph API.

Contenido relacionado

• Configuración de un proxy inverso para una aplicación de página única que usa la API de autenticación nativa mediante Azure Function App.
• Usa Azure Front Door como proxy inverso en un entorno de producción para una aplicación de una sola página que utiliza autenticación nativa.
• Cree una aplicación de página única de React que use la API de autenticación nativa desde cero.