Configuración de la autenticación en una aplicación web de Python de ejemplo mediante Azure AD B2C

En este artículo, se usa un ejemplo de aplicación web de Python para ilustrar cómo agregar la autenticación de Azure Active Directory B2C (Azure AD B2C) a las aplicaciones web.

Información general

OpenID Connect (OIDC) es un protocolo de autenticación que se basa en OAuth 2.0. Puede usar OIDC para que los usuarios inicien sesión de forma segura en una aplicación. En este ejemplo de aplicación web se usa el paquete de identidad para Python para simplificar la adición de compatibilidad de autenticación y autorización a aplicaciones web de Python.

El flujo de inicio de sesión consta de los pasos siguientes:

1. El usuario va a la aplicación web y selecciona Iniciar sesión.
2. La aplicación inicia la solicitud de autenticación y redirige a los usuarios a Azure AD B2C.
3. El registro o inicio de sesión de los usuarios, el restablecimiento de la contraseña o el inicio de sesión con una cuenta de red social.
4. Una vez que los usuarios hayan iniciado sesión correctamente, Azure AD B2C devuelve un token de identificador a la aplicación.
5. La aplicación intercambia el código de autorización con un token de identificador, valida el token de identificador, lee las notificaciones y, a continuación, devuelve una página segura a los usuarios.

Prerrequisitos

• Una cuenta de Azure con una suscripción activa. Cree una cuenta gratuita.
• Si todavía no tiene uno, cree un inquilino de Azure AD B2C vinculado a la suscripción de Azure.
• Python 3.8 y versiones posteriores

Paso 1: Configuración del flujo de usuario

Cuando los usuarios intentan iniciar sesión en la aplicación, esta inicia una solicitud de autenticación para el punto de conexión de autorización mediante un flujo de usuario. El flujo de usuario define y controla la experiencia del usuario. Al completar los usuarios el flujo de usuario, Azure AD B2C genera un token y, después, redirige a los usuarios de vuelta a la aplicación.

Si aún no lo ha hecho, cree un flujo de usuario o una directiva personalizada. Repita los pasos para crear tres flujos de usuario independientes de la manera siguiente:

• Un flujo de usuario combinado de inicio de sesión y registro, como susi. Este flujo de usuario también admite la experiencia ¿Olvidó su contraseña?.
• Un flujo de usuario de edición de perfiles, como edit_profile.
• Un flujo de usuario de restablecimiento de contraseña, como reset_password.

Azure AD B2C antepone el prefijo B2C_1_ al nombre del flujo de usuario. Por ejemplo, susi se convierte en B2C_1_susi.

Paso 2: Registro de una aplicación web

Para permitir que la aplicación inicie sesión con Azure AD B2C, registre la aplicación en el directorio de Azure AD B2C. El registro de la aplicación establece una relación de confianza entre la aplicación y Azure AD B2C.

Durante el registro de la aplicación, especificará el URI de redirección. El URI de redirección es el punto de conexión al que Azure AD B2C redirige a los usuarios después de que estos se autentican con Azure AD B2C. El proceso de registro de la aplicación genera un identificador de aplicación, también conocido como identificador de cliente, que permite identificar de forma exclusiva la aplicación. Una vez registrada la aplicación, Azure AD B2C usará el identificador de aplicación y el identificador URI de redirección para crear solicitudes de autenticación.

Paso 2.1: Registro de la aplicación

Siga estos pasos para crear el registro de aplicación web:

1. Inicie sesión en Azure Portal.

2. Si tiene acceso a varios inquilinos, seleccione el icono Configuración en el menú superior para cambiar al inquilino de Azure AD B2C desde el menú Directorios y suscripciones.

3. En Azure Portal, busque y seleccione Azure AD B2C.

4. Seleccione Registros de aplicaciones y luego Nuevo registro.

5. En Nombre, escriba un nombre para la aplicación (por ejemplo, webapp1).

6. En Tipos de cuenta compatibles, seleccione Cuentas en cualquier proveedor de identidades o directorio de la organización (para autenticar usuarios con flujos de usuario) .

7. En URI de redirección, seleccione Web y luego, en el cuadro Dirección URL, escriba http://localhost:5000/getAToken.

8. En Permisos, active la casilla Conceder consentimiento de administrador para openid y permisos de acceso sin conexión.

9. Seleccione Registrar.

10. Seleccione Información general.

11. Anote el Id. de aplicación (cliente) para usarlo más adelante al configurar la aplicación web.

    

Paso 2.2: Creación de un secreto de cliente de la aplicación web

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

1. En Administrar, seleccione Certificados y secretos.
2. Seleccione Nuevo secreto de cliente.
3. Escriba una descripción para el secreto de cliente en el cuadro Descripción (por ejemplo, clientsecret1).
4. En Expira, seleccione el tiempo durante el cual el secreto es válido y, a continuación, seleccione Agregar.
5. Registre el Valor del secreto. Este valor se usará para la configuración en un paso posterior.

Paso 3: Obtención de la aplicación web de ejemplo

Descargue el archivo zip o clone la aplicación web de ejemplo desde GitHub.

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

Extraiga el archivo de ejemplo en una carpeta en la que la longitud total de caracteres de la ruta de acceso sea igual o inferior a 260.

Paso 4: Configuración de la aplicación web de ejemplo

En el directorio raíz del proyecto, siga estos pasos:

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

   FLASK_DEBUG=True
   B2C_TENANT_NAME=<tenant name>
   CLIENT_ID=<client id>
   CLIENT_SECRET=<client secret>
   SIGNUPSIGNIN_USER_FLOW=B2C_1_signupsignin1
   EDITPROFILE_USER_FLOW=B2C_1_profile_editing
   RESETPASSWORD_USER_FLOW=B2C_1_reset_password
   

   Clave	Value
   B2C_TENANT_NAME	Primera parte del nombre de inquilino de Azure AD B2C (por ejemplo, contoso).
   CLIENT_ID	Identificador de aplicación de la API web del paso 2.1.
   CLIENT_SECRET	Valor del secreto de cliente que creó en el paso 2.2.
   *_USER_FLOW	Los flujos de usuarios que creó en el paso 1.

   Se hace referencia a las variables de entorno en app_config.py y se mantienen en un archivo .env independiente para mantenerlos fuera del control de código fuente. El archivo .gitignore proporcionado impide que el archivo .env se proteja.

Paso 5: Ejecución de la aplicación web de ejemplo

1. En la consola o el terminal, cambie al directorio que contiene el ejemplo. Por ejemplo:

   cd ms-identity-python-webapp
   

2. Ejecute los siguientes comandos para instalar los paquetes necesarios desde PyPi y ejecutar la aplicación web en la máquina local:

   Linux

   python -m pip install -r requirements.txt
   python -m flask run --host localhost --port 5000
   

   macOS

   python -m pip install -r requirements.txt
   python -m flask run --host localhost --port 5000
   

   Windows

   py -m pip install -r requirements.txt
   py -m flask run --host localhost --port 5000
   

   La ventana de consola muestra el número de puerto de la aplicación que se ejecuta localmente:

    * Debug mode: on
      WARNING: This is a development server. Do not use it in a production deployment.
      Use a production WSGI server instead.
    * Running on `http://localhost:5000/` (Press CTRL+C to quit)
   

3. Vaya a http://localhost:5000 para ver la aplicación web que se ejecuta en la máquina local.

4. Seleccione Iniciar sesión.

   

5. Complete el proceso de inicio de sesión o registro.

6. Después de una autenticación correcta, verá el nombre para mostrar, como se muestra aquí:

   

Paso 6: Llamada a una API web

Para que la aplicación pueda iniciar sesión con Azure AD B2C y llame a una API web, debe registrar dos aplicaciones en el directorio de Azure AD B2C.

• Registro de la aplicación web (Python) que ya creó en el paso 2. Este registro de aplicación permite que la aplicación inicie sesión con Azure AD B2C. El proceso de registro de la aplicación genera un identificador de aplicación, también conocido como identificador de cliente, que permite identificar de forma exclusiva la aplicación. Por ejemplo, Id. de aplicación: 1.

• El registro de API web permite que su aplicación llame a una API web protegida. El registro expone los permisos (ámbitos) de la API web. El proceso de registro de la aplicación genera un identificador de aplicación que identifica de forma única la API web (por ejemplo, id. de aplicación: 2). Conceda a su aplicación (Id. de aplicación: 1) permisos para los ámbitos de la API web (Id. de aplicación: 2).

Los registros y la arquitectura de la aplicación se describen en los diagramas siguientes:

Una vez completada la autenticación, los usuarios interactúan con la aplicación, que invoca una API web protegida. La API web usa la autenticación de token de portador. El token de portador es el token de acceso que la aplicación ha obtenido de Azure Active Directory B2C. La aplicación pasa el token en el encabezado de autorización de la solicitud HTTPS.

Authorization: Bearer <access token>

Si el ámbito del token de acceso no coincide con los ámbitos de la API web, la biblioteca de autenticación obtiene un nuevo token de acceso con los ámbitos correctos.

Paso 6.1: Registro de la aplicación de API web

Siga estos pasos para crear el registro de aplicación de API web (Id. de aplicación: 2):

1. Inicie sesión en Azure Portal.

2. Asegúrese de que usa el directorio que contiene el inquilino de Azure AD B2C. Seleccione el icono Directorios y suscripciones en la barra de herramientas del portal.

3. En la página Configuración del portal | Directorios y suscripciones, busque el directorio de Azure AD B2C en la lista Nombre de directorio y seleccione Cambiar.

4. En Azure Portal, busque y seleccione Azure AD B2C.

5. Seleccione Registros de aplicaciones y luego Nuevo registro.

6. En Nombre, escriba un nombre para la aplicación (por ejemplo, my-api1). Deje los valores predeterminados para URI de redireccionamiento y Tipos de cuenta admitidos.

7. Seleccione Registrar.

8. Una vez completado el registro de la aplicación, seleccione Información general.

9. Anote el valor Id. de aplicación (cliente) para usarlo más adelante al configurar la aplicación web.

   

Paso 6.2: Configuración de ámbitos

1. Seleccione la aplicación my-api1 que creó (id. de aplicación: 2) para abrir la página Información general.

2. En Administrar, seleccione Exponer una API.

3. Junto a URI de id. de aplicación, seleccione el vínculo Establecer. Reemplace el valor predeterminado (GUID) por un nombre único (por ejemplo, tasks-api) y, luego, seleccione Guardar.

   Cuando la aplicación web solicite un token de acceso para la API web, deberá agregar este URI como prefijo para cada ámbito que se defina para la API.

4. En Ámbitos definidos con esta API, seleccione Agregar un ámbito.

5. Para crear un ámbito que defina el acceso de lectura a la API, siga estos pasos:

   1. Para Nombre de ámbito, escriba tasks.read.
   2. Para Nombre para mostrar del consentimiento del administrador, escriba Acceso de lectura a la API de tareas.
   3. Para Descripción del consentimiento del administrador, escriba Permite el acceso de lectura a la API de tareas.

6. Seleccione la opción Agregar un ámbito.

7. Seleccione Agregar un ámbito y agregue una opción que defina el acceso de escritura en la API:

   1. Para Nombre de ámbito, escriba tasks.write.
   2. Para Nombre para mostrar del consentimiento del administrador, escriba Acceso de escritura a la API de tareas.
   3. Para Descripción del consentimiento del administrador, escriba Permite el acceso de escritura a la API de tareas.

8. Seleccione la opción Agregar un ámbito.

Paso 6.3: Concesión de permisos a la aplicación web

Si desea conceder permisos a la aplicación (identificador de aplicación: 1), siga estos pasos:

1. Seleccione Registros de aplicaciones y, luego, la aplicación que creó (identificador de aplicación: 1).

2. En Administrar, seleccione Permisos de API.

3. En Permisos configurados, seleccione Agregar un permiso.

4. Seleccione la pestaña Mis API.

5. Seleccione la API (identificador de aplicación:2) a la que la aplicación web debe tener acceso. Por ejemplo, escriba my-api1.

6. En Permiso, expanda Tareas y, a continuación, seleccione los ámbitos que definió anteriormente; por ejemplo, tasks.read y tasks.write.

7. Seleccione Agregar permisos.

8. Seleccione Conceder consentimiento de administrador para <el nombre de inquilino>.

9. Seleccione Sí.

10. Seleccione Actualizar y compruebe que aparece Granted for... (Concedido para...) en Estado para ambos ámbitos.

11. En la lista Permisos configurados, seleccione el ámbito y copie el nombre completo del ámbito.

    

Paso 6.4: Configuración de la API web

En este ejemplo, se adquiere un token de acceso con los ámbitos pertinentes que la aplicación web puede usar para una API web. Este ejemplo en sí no actúa como una API web. En su lugar, debe usar una API web existente o crear una nueva. Para ver un tutorial sobre cómo crear una API web en el inquilino de B2C, consulte Habilitación de la autenticación en su propia API web mediante Azure AD B2C.

Paso 6.5: Configuración de la aplicación de ejemplo con la API web

Abra el archivo app_config.py. Este archivo contiene información sobre el proveedor de identidades de Azure AD B2C. Actualice las siguientes propiedades de la configuración de la aplicación:

Clave	Value
ENDPOINT	Identificador URI de la API web (por ejemplo, https://localhost:6000/hello).
SCOPE	Ámbitos de la API web que creó (por ejemplo, ["https://contoso.onmicrosoft.com/tasks-api/tasks.read", https://contoso.onmicrosoft.com/tasks-api/tasks.write"]).

Paso 6.6: Ejecución de la aplicación de ejemplo

1. En la consola o el terminal, cambie al directorio que contiene el ejemplo.

2. Si la aplicación aún no se está ejecutando, reiníciela con el comando del Paso 5.

3. Seleccione Llamar a una API de bajada.

   

Paso 7: Implementación de la aplicación

En una aplicación de producción, el URI de redirección del registro de la aplicación suele ser un punto de conexión accesible públicamente donde se ejecuta la aplicación, como https://contoso.com/getAToken.

Puede agregar y modificar los URI de redireccionamiento en las aplicaciones registradas en cualquier momento. Las siguientes restricciones se aplican a los URI de redireccionamiento:

• La URL de redireccionamiento debe comenzar con el esquema https.
• La URL de redireccionamiento distingue entre mayúsculas y minúsculas. Sus mayúsculas o minúsculas deben coincidir con las de la ruta de acceso de la dirección URL de la aplicación en ejecución.

Pasos siguientes

• Obtenga información sobre la Habilitación de las opciones de autenticación en una aplicación web de Python mediante Azure AD B2C.