Compartir a través de

Tutorial: Inicio de sesión de usuarios en una aplicación web de Python Flask mediante la plataforma de identidad de Microsoft

Se aplica a:Círculo verde con un símbolo de marca de verificación blanca. inquilinos de personal Círculo verde con un símbolo de marca de verificación blanca. inquilinos externos (más información)

Este tutorial le guía en la protección de una aplicación web de Python Flask.

En este tutorial, harás lo siguiente:

  • Creación de un proyecto de Python Flask
  • Instalación de las dependencias necesarias
  • Configuración de la aplicación web de Flask para usar la plataforma de identidad de Microsoft para la autenticación
  • Prueba de la experiencia de inicio de sesión y cierre de sesión en la aplicación web de Flask

Prerrequisitos

  • Un inquilino de recursos. Puede usar su Directorio Predeterminado o configurar un nuevo tenant.
  • Registre una nueva aplicación en el Centro de administración de Microsoft Entra, configurada solo para Cuentas en este directorio organizativo. Consulte Registro de una aplicación para obtener más detalles. Registre los valores siguientes en la página Información general de la aplicación para su uso posterior:
    • Id. de aplicación (cliente)
    • Id. de directorio (inquilino)
  • Agregue un secreto de cliente al registro de la aplicación. No use secretos de cliente en aplicaciones de producción. En su lugar, use certificados o credenciales federadas. Para más información, consulte Incorporación de credenciales a la aplicación.

Creación de un proyecto de Flask

  1. Cree una carpeta para hospedar la aplicación flask, como flask-web-app.

  2. Abra una ventana de consola y cambie al directorio a la carpeta de la aplicación web de Flask mediante el comando .

    cd flask-web-app

  3. Configuración del entorno virtual

    En función del sistema operativo, ejecute los siguientes comandos para configurar el entorno virtual y activarlo:

    Para el sistema operativo Windows:

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

    Para el sistema operativo macOS o Linux:

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

Instalación de dependencias de aplicaciones

Para instalar las dependencias de la aplicación, ejecute los siguientes comandos:

pip install flask
pip install python-dotenv
pip install requests
pip install "ms_identity_python[flask] @ git+https://github.com/azure-samples/ms-identity-python@0.9"

La biblioteca ms_identity_python que se instala automáticamente instala la Biblioteca de autenticación de Microsoft (MSAL) para Python como su dependencia. MSAL Python es la biblioteca que permite autenticar a los usuarios y administrar sus tokens de acceso.

Después de instalar las bibliotecas necesarias, actualice el archivo de requisitos mediante la ejecución del siguiente comando:

pip freeze > requirements.txt

Adición de las configuraciones

  1. Cree un archivo .env* en la carpeta raíz para almacenar de forma segura la configuración de la aplicación. El archivo .env debe contener las siguientes variables de entorno:

    CLIENT_ID="<Enter_your_client_id>"
CLIENT_SECRET="<Enter_your_client_secret>"
AUTHORITY="https://login.microsoftonline.com/<Enter_tenant_id>"
REDIRECT_URI="<Enter_redirect_uri>"

    Reemplace los marcadores de posición por los siguientes valores:

    • Reemplace <Enter_your_client_id> por el Identificador de aplicación (cliente) de la aplicación web cliente que registró.
    • Reemplace <Enter_tenant_id> por el Identificador de directorio (inquilino) donde registró la aplicación web.
    • Reemplace por <Enter_your_client_secret> el valor secreto de cliente de la aplicación web que creó. En este tutorial, usamos secretos con fines de demostración. En producción, use enfoques más seguros, como certificados o credenciales de identidad federada.
    • Reemplace <Enter_redirect_uri> por el URI de redirección que registró anteriormente. En este tutorial se establece la ruta URI de redirección a http://localhost:3000/getAToken.

  2. Cree un archivo app_config.py para leer las variables de entorno y agregar otras configuraciones que necesite.

    import os

AUTHORITY = os.getenv("AUTHORITY")
CLIENT_ID = os.getenv("CLIENT_ID")
CLIENT_SECRET = os.getenv("CLIENT_SECRET")
REDIRECT_URI = os.getenv("REDIRECT_URI")
SESSION_TYPE = "filesystem" # Tells the Flask-session extension to store sessions in the filesystem. Don't use in production apps.

Configuración de puntos de conexión de aplicación

En esta fase, creas los puntos de conexión de tu aplicación web y agregas la lógica de negocio a la aplicación.

  1. Cree un archivo denominado app.py en la carpeta raíz.

  2. Importe las dependencias necesarias en la parte superior del archivo app.py .

    import os
import requests
from flask import Flask, render_template
from identity.flask import Auth
import app_config

  3. Inicialice la aplicación flask y configúrela para usar el tipo de almacenamiento de sesión que especificó en el archivo app_config.py .

    app = Flask(__name__)
app.config.from_object(app_config)

  4. Inicialice el cliente de la aplicación. Una aplicación web de Flask es un cliente confidencial. Pasamos el secreto de cliente porque los clientes confidenciales pueden almacenarlo de forma segura. En segundo plano, la biblioteca de identidades llama a la clase ConfidentialClientApplication de la biblioteca MSAL.

    auth = Auth(
    app,
    authority=app.config["AUTHORITY"],
    client_id=app.config["CLIENT_ID"],
    client_credential=app.config["CLIENT_SECRET"],
    redirect_uri=app.config["REDIRECT_URI"]
)

  5. Agregue los puntos de conexión necesarios a la aplicación de Flask. La aplicación web usa el flujo de código de autorización para iniciar sesión en el usuario. La biblioteca envoltorio de MSAL ms_identity_python ayuda a interactuar con la biblioteca MSAL, facilitando así la incorporación de inicio y cierre de sesión en tu aplicación. Agregamos una página de índice y la protegemos mediante el login_required decorador proporcionado por la biblioteca ms_identity_python . El login_required decorador garantiza que solo los usuarios autenticados puedan acceder a la página de índice.

    @app.route("/")
@auth.login_required
def index(*, context):
    return render_template(
        'index.html',
        user=context['user'],
        title="Flask Web App Sample",
    )

    Se garantiza que el usuario está presente porque hemos decorado esta vista con @login_required.

Creación de las plantillas de aplicación

Cree una carpeta denominada plantillas en la carpeta raíz. En la carpeta templates, cree un archivo denominado index.html. Esta es la página principal de la aplicación. Agregue el código siguiente al archivo index.html :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ title }}</title>
</head>
<body>
    <h1>{{ title }}</h1>
    <h2>Welcome {{ user.get("name") }}!</h2>

    <img src="https://github.com/Azure-Samples/ms-identity-python-webapp-django/raw/main/static/topology.png" alt="Topology">

    <ul>
    {% if api_endpoint %}
        <!-- If an API endpoint is declared and scopes defined, this link will show. We set this in the call an API tutorial. For this tutorial, we do not define this endpoint. -->
        <li><a href='/call_api'>Call an API</a></li>
    {% endif %}

    <li><a href="{{ url_for('identity.logout') }}">Logout</a></li>
    </ul>

    <hr>
    <footer style="text-align: right">{{ title }}</footer>
</body>
</html>

Ejecución y prueba de la aplicación web de ejemplo

  1. Ejecute el comando siguiente en el terminal:

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

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

  2. Abra el explorador y vaya a http://localhost:3000. Verá una página de inicio de sesión.

  3. Inicie sesión con su cuenta microsoft siguiendo los pasos. Se le pedirá que proporcione una dirección de correo electrónico y una contraseña para iniciar sesión.

  4. Si la aplicación necesita algún ámbito, se presenta una pantalla de consentimiento. La aplicación solicita permiso para mantener el acceso a los datos a los que permite el acceso y para iniciar sesión. Seleccione Aceptar. Esta pantalla no aparece si no se define ningún ámbito.

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:

Captura de pantalla del ejemplo de aplicación web de flask después de la autenticación correcta.

Seleccione Cerrar sesión para salir de la aplicación. Se le pedirá que elija una cuenta de la que quiere cerrar sesión. Seleccione la cuenta que usó para iniciar sesión.

Uso del dominio de dirección URL personalizado (opcional)

Los inquilinos de recursos no admiten dominios de dirección URL personalizados.