Inicio de sesión de usuarios en una aplicación web de Python Flask de ejemplo

En este artículo, explorará una aplicación web de Python Flask protegida por id. externa de Microsoft Entra. Este ejemplo le guiará por la experiencia de inicio de sesión para los clientes que se autentican en una aplicación web de Python Flask. La aplicación web de ejemplo usa la biblioteca de autenticación de Microsoft para Python (MSAL Python) para controlar la autenticación de usuario.

Requisitos previos

• Visual Studio Code u otro editor de código.
• Python 3+.
• Un inquilino externo. Para crear uno, puedes elegir uno de los métodos siguientes: 
  • (Recomendado) Usa la extensión Id. externa de Microsoft Entra para configurar un inquilino externo directamente en Visual Studio Code.
  • Crea un nuevo inquilino externo en el Centro de administración Microsoft Entra.

Registro de la aplicación web

Para permitir que su aplicación inicie la sesión de los usuarios con Microsoft Entra, id. externa de Microsoft Entra debe tener en cuenta la aplicación que haya creado. El registro de la aplicación establece una relación de confianza entre la aplicación y Microsoft Entra. Al registrar una aplicación, External ID genera un identificador único conocido como Id. de aplicación (cliente), un valor que se usa para identificar la aplicación al crear solicitudes de autenticación.

En los pasos siguientes, se muestra cómo registrar una aplicación en el centro de administración de Microsoft Entra:

1. Inicie sesión en el Centro de administración de Microsoft Entra al menos como Desarrollador de aplicaciones.

2. Si tienes acceso a varios inquilinos, usa el icono Configuración en el menú superior para cambiar al inquilino externo desde el menú Directorios y suscripciones.

3. Ve aIdentidad>Aplicaciones>Registros de aplicaciones.

4. Seleccione + Nuevo registro.

5. En la página Registrar una aplicación que aparece;

   1. Introduzca un Nombre de aplicación significativo que se muestre a los usuarios de la aplicación, por ejemplo ciam-client-app.
   2. En Tipos de cuenta admitidos, seleccione Solo las cuentas de este directorio organizativo.

6. Seleccione Registrar.

7. Se muestra el panel Información general de la aplicación tras registrarse correctamente. Registre el Id. de la aplicación (cliente) que se usará en el código fuente de la aplicación.

Para especificar el tipo de aplicación en el registro de la aplicación, siga estos pasos:

1. En Administrar, seleccione Autenticación.
2. En la página Configuraciones de plataforma, seleccione Agregar una plataforma y, a continuación, seleccione la opción Web.
3. Para URI de redireccionamiento, escriba http://localhost:3000/getAToken. Este URI de redirección es la ubicación donde el servidor de autorización envía el token de acceso. Puede personalizarlo para adaptarlo a su caso de uso.
4. Selecciona Configurar para guardar los cambios.

Adición de secreto de cliente de la aplicación

Cree un secreto de cliente para la aplicación registrada. La aplicación usa el secreto de cliente para demostrar su identidad al solicitar tokens.

1. En la página Registros de aplicaciones, seleccione la aplicación que creó (como ciam-client-app) para abrir la página Información general.
2. En Administrar, seleccione Certificados y secretos.
3. Seleccione Nuevo secreto de cliente.
4. Escriba una descripción para el secreto de cliente en el cuadro Descripción (por ejemplo, secreto de cliente de ciam app).
5. En Expira, seleccione el tiempo durante el cual es válido el secreto (según las reglas de seguridad de su organización) y, a continuación, elija Agregar.
6. Registre el Valor del secreto. Este valor se usará para la configuración en un paso posterior. El valor del secreto no se volverá a mostrar y no se podrá recuperar por ningún medio, después de salir del Certificados y secretos. Asegúrese de grabarlo.

Conceder consentimiento del administrador

Cuando registre la aplicación, se le asignará el permiso User.Read. Sin embargo, dado que el inquilino es un inquilino externo, los propios usuarios del cliente no pueden dar su consentimiento a este permiso. Como administrador, debe dar el consentimiento a este permiso en nombre de todos los usuarios del inquilino:

1. En la página Registros de aplicaciones, seleccione la aplicación que creó (como ciam-client-app) para abrir la página Información general.

2. En Administrar, seleccione Permisos de API.

   1. Seleccione Conceder consentimiento del administrador para <nombre del inquilino> y seleccione Sí.
   2. Seleccione Actualizar, luego compruebe que Concedido para <su nombre de inquilino> aparece en el Estado del permiso.

Creación de un flujo de usuario

Siga estos pasos para crear un flujo de usuario que un cliente pueda usar para iniciar sesión o registrarse en una aplicación.

1. Inicie sesión en el centro de administración de Microsoft Entra como mínimo un administrador de flujo de usuario de identificador externo.

2. Si tienes acceso a varios inquilinos, usa el icono Configuración en el menú superior para cambiar al inquilino externo desde el menú Directorios y suscripciones.

3. Vaya a Identidad> Identidades externas> Flujos de usuarios.

4. Seleccione + Nuevo flujo de usuario.

5. En la página Crear:

   1. Escriba un nombre para el flujo de usuario, como SignInSignUpSample.

   2. En la lista Proveedores de identidades, seleccione Cuentas de correo electrónico. Este proveedor de identidades permite a los usuarios iniciar sesión o registrarse con su dirección de correo electrónico.

      Nota

      Los proveedores de identidades adicionales se mostrarán aquí solo después de que configure la federación con ellos. Por ejemplo, si configura la federación con Google, Facebook, Apple o un proveedor de identidades de OIDC de , podrá seleccionar esos proveedores de identidades adicionales aquí.

   3. En Cuentas de correo electrónico, puede seleccionar una de las dos opciones. En este tutorial, seleccione Correo electrónico con contraseña.

      • Correo electrónico con contraseña: permite a los nuevos usuarios registrarse e iniciar sesión con una dirección de correo electrónico como nombre de inicio de sesión y una contraseña como credencial del primer factor.
      • Código de acceso de un solo uso de correo electrónico: permite a los nuevos usuarios registrarse e iniciar sesión con una dirección de correo electrónico como el nombre de inicio de sesión y el código de acceso de un solo uso como credencial del primer factor. El código de acceso de un solo uso de correo electrónico debe estar habilitado en el nivel de inquilino (Todos los proveedores de identidades>Código de acceso de un solo uso de correo electrónico) para que esta opción esté disponible en el nivel de flujo de usuario.

   4. En Atributos de usuario, elija los atributos que quiere recopilar del usuario tras registrarse. Al seleccionar Mostrar más, puede elegir los atributos y las notificaciones de País o región, Nombre para mostrar y Código postal. Seleccione Aceptar. (A los usuarios solo se les solicitan atributos cuando se registran por primera vez).

6. Seleccione Crear. El nuevo flujo de usuario aparece en la lista Flujos de usuario. Si es necesario, actualice la página.

Para habilitar el autoservicio de restablecimiento de contraseña, siga los pasos descritos en el artículo Habilitar el autoservicio de restablecimiento de contraseña.

Asociación de la aplicación web al flujo de usuarios

Para que los usuarios clientes vean la experiencia de registro o inicio de sesión cuando utilizan su aplicación, debe asociar su aplicación a un flujo de usuario. Aunque muchas aplicaciones se pueden asociar a su flujo de usuario, una sola aplicación solo se puede asociar a un flujo de usuario.

1. En el menú de la barra lateral, seleccione Identidad.

2. Seleccione External Identities y, a continuación, Flujos de usuario.

3. En la página Flujos de usuario, seleccione el nombre del flujo de usuario que creó anteriormente; por ejemplo, SignInSignUpSample.

4. En Usar, seleccione Aplicaciones.

5. Seleccione Agregar una aplicación.

6. Seleccione la aplicación de la lista, como ciam-client-app, o use el cuadro de búsqueda para buscar la aplicación y selecciónela.

7. Elija Seleccionar.

Una vez que asocie su aplicación con un flujo de usuarios, puede probar su flujo de usuarios simulando la experiencia de registro o inicio de sesión de un usuario con su aplicación desde el centro de administración de Microsoft Entra. Para ello, siga los pasos descritos en Prueba del flujo de usuario de registro e inicio de sesión.

Clonación o descarga de la aplicación web de ejemplo

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

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

  git clone https://github.com/Azure-Samples/ms-identity-docs-code-python.git
  

• Descargue el archivo .zip. 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 consola y cambie al directorio que contiene la aplicación web de ejemplo de Flask:

   cd flask-web-app
   

2. Configuración del entorno virtual

   Windows

   py -m venv .venv
   .venv\scripts\activate
   

   macOS y Linux

   python3 -m venv .venv
   source .venv/bin/activate
   

3. Ejecute los siguientes comandos para instalar las dependencias de la aplicación:

   python3 -m pip install -r requirements.txt
   

Configuración de la aplicación web de ejemplo

1. Abra los archivos del proyecto en Visual Studio Code o en el editor que está usando.

2. Cree un archivo .env en la carpeta raíz del proyecto usando el archivo .env.sample como guía.

3. En el archivo .env, proporcione las siguientes variables de entorno:

   • CLIENT_ID que es el Id. de aplicación (cliente) de la aplicación que registró anteriormente.
   • CLIENT_SECRET que es el valor secreto de aplicación que copió anteriormente.
   • AUTHORITY que es la dirección URL que identifica una entidad de token. Debe tener el formato https://{subdominio}.ciamlogin.com/{subdominio}.onmicrosoft.com. Reemplace subdominio por el subdominio del Directorio (inquilino). Por ejemplo, si el dominio principal del inquilino es contoso.onmicrosoft.com, use contoso. Si no tiene el subdominio de inquilino, obtenga información sobre cómo leer los detalles del inquilino.

4. Confirme que el URI de redirección está bien configurado. El URI de redirección que registró anteriormente debe coincidir con la configuración. Este ejemplo establece de forma predeterminada la ruta de acceso del URI de redirección en /getAToken. Esto se configura en el archivo app_config.py como REDIRECT_PATH.

Ejecute y pruebe la aplicación web

Ejecute la aplicación para ver cómo funciona la experiencia de inicio de sesión.

Nota

En este ejemplo se usa la biblioteca de terceros de identidad de Python. Microsoft no mantiene oficialmente la biblioteca, pero se recomienda su uso. Esta biblioteca facilita la adición de autenticación a la aplicación web a medida que abstrae muchos de los detalles de Python de MSAL.

1. Ejecute el comando siguiente en el terminal:

   python3 -m flask run --debug --host=localhost --port=3000
   

   Puede usar el puerto que prefiera. Debe ser similar al puerto del URI de redirección que registró anteriormente.

2. Abra el explorador web y vaya a http://localhost:3000. Debería ver la página similar a la que aparece en la siguiente captura de pantalla:

   

3. Cuando la página termine de cargarse, seleccione el vínculo Iniciar sesión. Se le pedirá que inicie sesión.

4. En la página de inicio de sesión, escriba su dirección de correo electrónico, seleccione Siguiente, escriba la contraseña y, a continuación, seleccione Iniciar sesión. Si no tiene una cuenta, seleccione el vínculo ¿No tiene una cuenta? Cree una, que inicia el flujo de registro.

5. Si elige la opción de registro, pasará por el flujo de inicio de sesión. Rellene el correo electrónico, el código de acceso único, la nueva contraseña y más detalles de la cuenta para completar todo el flujo de registro.

6. Después de iniciar sesión o registrarse, se le redirigirá de nuevo a la aplicación web. Verá una página similar a la siguiente captura de pantalla:

   

7. Seleccione Cerrar sesión para cerrar la sesión del usuario de la aplicación web o seleccione Llamar a una API de bajada para realizar una llamada a un punto de conexión de Microsoft Graph.

Funcionamiento

Cuando los usuarios seleccionan el vínculo Iniciar sesión, la aplicación inicia una solicitud de autenticación y redirige a los usuarios id. externa de Microsoft Entra. A continuación, un usuario inicia sesión o se registra en la página que aparece. Después de proporcionar las credenciales necesarias y dar su consentimiento a los ámbitos necesarios, id. externa de Microsoft Entra redirige al usuario a la aplicación web con un código de autorización. A continuación, la aplicación web usa este código de autorización para adquirir un token de id. externa de Microsoft Entra.

Cuando los usuarios seleccionan el vínculo Cerrar sesión, la aplicación borra la sesión u redirige al usuario al punto de conexión de cierre de sesión de id. externa de Microsoft Entra para notificarle que el usuario ha cerrado sesión. A continuación, se redirige de nuevo al usuario a la aplicación web.

Contenido relacionado

• Inicio de sesión de usuarios en una aplicación web de Django de ejemplo
• Habilitar restablecimiento de contraseña
• Personalizar el branding de la marca predeterminado
• Configurar el inicio de sesión con Google