Compartilhar via

Preparar um aplicativo Web Python Flask para autenticação

  • Artigo

Este tutorial é a parte 2 de uma série que demonstra a criação de um aplicativo Web Python Flask e a adição de suporte de entrada usando a plataforma de identidade da Microsoft. Na parte 1 desta série, você registrou e configurou o aplicativo em seu locatário do Microsoft Entra ID.

Neste tutorial, você:

  • Criar um novo projeto de aplicativo Web Python Flask
  • Instalar dependências do aplicativo
  • Adicionar os componentes da interface do usuário do aplicativo
  • Configurar seu aplicativo Web Flask para usar o Microsoft Entra ID para autenticação

Pré-requisitos

Criar um novo projeto de aplicativo Web Python

Para concluir o restante do tutorial, você precisa criar um projeto de aplicativo Web Python Flask. Se você preferir usar um exemplo de código concluído para aprendizado, baixe o exemplo de aplicativo Web Flask do Python do GitHub.

Para criar o aplicativo Web Python Flask do zero, siga estas etapas:

  1. Crie uma pasta para hospedar seu aplicativo e nomeie-o flask-web-app.
  2. Navegue até o diretório do projeto e crie três arquivos chamados app.py, app.config.py e requirements.txt.
  3. Crie um arquivo .env na pasta raiz do projeto.
  4. Crie uma pasta chamada templates no diretório raiz do projeto. O Flask procura modelos de renderização neste subdiretório.

Depois de criar os arquivos, o arquivo e o diretório do projeto devem ser semelhantes à seguinte estrutura:

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

Instalar dependências do aplicativo

O aplicativo criado usa o pacote identity, um wrapper em torno da MSAL (Biblioteca de Autenticação da Microsoft) para Python. Você também instala o Flask, o Flask Session, as solicitações e todas as outras dependências necessárias ao aplicativo. Atualize requirements.txt com essas dependências.

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

Adicionar componentes de interface do usuário do aplicativo

Nesta seção, você criará modelos HTML para cada uma das rotas definidas no aplicativo, incluindo entrada, saída, chamadas à API e modelos de erro. Siga estas etapas para criar modelos para cada uma dessas páginas:

Modelos de logon

Na pasta de modelos, crie um arquivo HTML chamado login.html e adicione o seguinte conteúdo:

<!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>

Esse modelo representa a página de logon na qual os usuários podem entrar no aplicativo.

Modelo de índice

Na pasta de modelos, crie um arquivo HTML chamado index.html e adicione o seguinte conteúdo:

<!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>

O modelo de índice serve como uma home page para o aplicativo Web e é renderizado quando os usuários visitam a URL raiz do aplicativo.

Página de exibição

Esse modelo é usado para exibir o resultado de uma chamada à API downstream. Adicione o snippet a seguir à 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>

Modelos de erro

Modelo de erro de autenticação

Na pasta modelos, crie um arquivo HTML chamado auth_error.html que exibe qualquer mensagem de erro que possa surgir. Adicione o código a seguir em 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>

Modelo de erro de configuração

Na pasta de modelos, crie um arquivo HTML chamado config_error.html que exibe uma mensagem quando uma configuração necessária está ausente. Adicione o código a seguir em 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>

Criar o arquivo de configuração

No editor de código, abra app_config.py, que contém os parâmetros de configuração e adicione o seguinte código:

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"

Crie um arquivo .env para armazenar as configurações.

Neste exemplo, você usa um arquivo .env para armazenar e gerenciar as configurações, as variáveis de ambiente e as credenciais do aplicativo, que não devem ser inseridas em nosso código. Abra o arquivo .env que você criou na raiz do diretório do projeto e adicione os valores a seguir.

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

No arquivo .env.sample, substitua os espaços reservados por:

    • CLIENT_ID com a ID do aplicativo (cliente) disponível na página de visão geral do registro do aplicativo.
    • CLIENT_SECRET com o segredo do cliente que você criou nos Certificados e Segredos
    • AUTHORITY por https://login.microsoftonline.com/<TENANT_GUID>. A ID do Diretório (locatário) está disponível na página de visão geral do registro do aplicativo.

Próxima etapa

Saiba como adicionar suporte de entrada a um aplicativo Web Python Flask na próxima parte desta série de tutoriais:

Tutorial: Adicionar suporte de entrada a um aplicativo Web Python Flask