Compartir a través de

Preparación de una aplicación web de Python Flask para la autenticación

  • Artículo

Este tutorial es la parte 2 de una serie que muestra cómo compilar una aplicación web de Python Flask y agregar compatibilidad con el inicio de sesión mediante la plataforma de identidad de Microsoft. En parte 1 de esta serie, registró y configuró la aplicación en el inquilino de Microsoft Entra ID.

En este tutorial ha:

  • Creación de un nuevo proyecto de aplicación web de Python Flask
  • Instalar las dependencias de la aplicación
  • Adición de los componentes de la interfaz de usuario de la aplicación
  • Configuración de la aplicación web de Flask para usar Microsoft Entra ID para la autenticación

Requisitos previos

Creación de un nuevo proyecto de aplicación web de Python

Para completar el resto del tutorial, debe crear un proyecto de aplicación web de Python Flask. Si prefiere usar un ejemplo de código completado para el aprendizaje, descargue el ejemplo de aplicación web de Python Flask desde GitHub.

Para compilar la aplicación web de Python Flask desde cero, siga estos pasos:

  1. Cree una carpeta para hospedar la aplicación y asígnela el nombre flask-web-app.
  2. Vaya al directorio del proyecto y cree tres archivos denominados app.py, app.config.py, y requirements.txt.
  3. Cree un archivo .env en la carpeta raíz del proyecto.
  4. Cree una carpeta denominada plantillas en el directorio raíz del proyecto. Flask busca plantillas de representación en este subdirectorio.

Después de crear los archivos, el archivo y el directorio del proyecto deben ser similares a la estructura siguiente:

python-webapp/
├── templates/
│     ├── display.html
│     ├── index.html
│     ├── login.html
├── .env.sample
├── app.py
├── app.config.py
│── requirements.txt

Instalar las dependencias de la aplicación

La aplicación que compila usa el identity paquete, un contenedor alrededor de la Biblioteca de autenticación de Microsoft (MSAL) para Python. También instala Flask, sesión de Flask, solicitudes y todas las demás dependencias que requiere la aplicación. Actualice requirements.txt con estas dependencias.

Flask>=2.2
Flask-Session>=0.3.2,<0.6
werkzeug>=2
requests>=2,<3
identity>=0.5.1,<0.6
python-dotenv<0.22

Incorporación de componentes de la interfaz de usuario de la aplicación

En esta sección, creará plantillas HTML para cada una de las rutas que defina en la aplicación, como el inicio de sesión, el cierre de sesión, las llamadas API y las plantillas de error. Siga estos pasos para crear plantillas para cada una de estas páginas:

Plantillas de inicio de sesión

En la carpeta de plantillas, cree un archivo HTML denominado login.html y agregue el siguiente contenido:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Microsoft Identity Python Web App: Login</title>
</head>
<body>
    <h1>Microsoft Identity Python Web App</h1>

    {% if user_code %}
    <ol>
      <li>To sign in, type <b>{{ user_code }}</b> into
        <a href='{{ auth_uri }}' target=_blank>{{ auth_uri }}</a>
        to authenticate.
      </li>
      <li>And then <a href="{{ url_for('auth_response') }}">proceed</a>.</li>
    </ol>
    {% else %}
    <ul><li><a href='{{ auth_uri }}'>Sign In</a></li></ul>
    {% endif %}

    <hr>
    <footer style="text-align: right">Microsoft identity platform Web App Sample {{ version }}</footer>
</body>
</html>

Esta plantilla representa la página de inicio de sesión donde los usuarios pueden iniciar sesión en la aplicación.

Plantilla de índice

En la carpeta de plantillas, cree un archivo HTML denominado index.html y agregue el siguiente contenido:

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

    <ul>
    {% if config.get("ENDPOINT") %}
      <li><a href='/call_downstream_api'>Call a downstream API</a></li>
    {% endif %}

    <li><a href="/logout">Logout</a></li>
    </ul>

    <hr>
    <footer style="text-align: right">Microsoft identity platform Web App Sample {{ version }}</footer>
</body>
</html>

La plantilla de índice actúa como página principal de la aplicación web, representada cuando los usuarios visitan la dirección URL raíz de la aplicación.

Mostrar página

Esta plantilla se usa para mostrar el resultado de una llamada API de bajada. Agregue el siguiente fragmento de código a display.html.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Microsoft Identity Python Web App: API</title>
</head>
<body>
    <a href="javascript:window.history.go(-1)">Back</a> <!-- Displayed on top of a potentially large JSON response, so it will remain visible -->
    <h1>Result of the downstream API Call</h1>
    <pre>{{ result |tojson(indent=4) }}</pre> <!-- Just a generic json viewer -->
</body>
</html>

Plantillas de error

plantilla de error de autenticación

En la carpeta de plantillas, cree un archivo HTML denominado auth_error.html que muestre los mensajes de error que puedan aparecer. Agregue el código siguiente a auth_error.html.

<!DOCTYPE html>*
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Microsoft Identity Python Web App: Error</title>
</head>
<body>
    <h2>Login Failure</h2>
    <dl>
      {#
        Flask automatically escapes these unsafe input, so we do not have to.
        See also https://flask.palletsprojects.com/en/2.0.x/templating/#jinja-setup
      #}
      <dt>{{ result.get("error") }}</dt>
      <dd>{{ result.get("error_description") }}</dd>
    </dl>
    <hr>
    <a href="{{ url_for('index') }}">Homepage</a>
</body>
</html>

plantilla de error de configuración

En la carpeta de plantillas, cree un archivo HTML denominado config_error.html que muestre un mensaje cuando falta una configuración necesaria. Agregue el código siguiente a config_error.html.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Microsoft Identity Python Web App: Error</title>
</head>
<body>
    <h2>Config Missing</h2>
    <p>
        Almost there. Did you forget to set up
<a target=_blank
href="https://learn.microsoft.com/azure/active-directory/develop/web-app-quickstart?pivots=devlang-python#step-5-configure-the-sample-app">
necessary environment variables</a> for your deployment?
    </p>
    <hr>
    <a href="{{ url_for('index') }}">Homepage</a>
</body>
</html>

Cree el archivo de configuración de

En el editor de código, abra app_config.py, que contiene los parámetros de configuración y agregue el código siguiente:

import os
AUTHORITY= os.getenv("AUTHORITY")

# Application (client) ID of app registration
CLIENT_ID = os.getenv("CLIENT_ID")
# Application's generated client secret: never check this into source control!
CLIENT_SECRET = os.getenv("CLIENT_SECRET")
 
REDIRECT_PATH = "/getAToken"  # Used for forming an absolute URL to your redirect URI.

ENDPOINT = 'https://graph.microsoft.com/v1.0/me'  
SCOPE = ["User.Read"]

# Tells the Flask-session extension to store sessions in the filesystem
SESSION_TYPE = "filesystem"

Cree un archivo .env para almacenar las opciones de configuración.

En este ejemplo, se usa un archivo .env para almacenar y administrar la configuración de la aplicación, las variables de entorno y las credenciales que no se deben insertar en nuestro código. Abra el archivo .env que creó en la raíz del directorio del proyecto y agregue los valores siguientes.

# The following variables are required for the app to run.
CLIENT_ID=<client id>
CLIENT_SECRET=<client secret>
AUTHORITY=<Enter_your_authority_url>

En el archivo .env.sample, reemplace los marcadores de posición por:

    • CLIENT_IDcon el id. de aplicación (cliente) disponible desde la página de información general del registro de la aplicación.
    • CLIENT_SECRET con el secreto de cliente que ha creado en Certificados y secretos
    • AUTHORITY por https://login.microsoftonline.com/<TENANT_GUID>. El id. de directorio (inquilino) está disponible en la página de información general del registro de la aplicación.

Paso siguiente

Aprenda a agregar compatibilidad de inicio de sesión a una aplicación web de Python Flask en la siguiente parte de esta serie de tutoriales:

Tutorial: Adición de compatibilidad de inicio de sesión a una aplicación web de Python Flask