Aracılığıyla paylaş

Kimlik doğrulaması için Python Flask web uygulaması hazırlama

  • Makale

Bu öğretici, Python Flask web uygulaması oluşturmayı ve Microsoft kimlik platformu kullanarak oturum açma desteği eklemeyi gösteren serinin 2. bölümüdür. Bu serinin 1. bölümünde, uygulamayı Microsoft Entra Id kiracınıza kaydettiniz ve yapılandırdınız.

Bu öğreticide şunları yaptınız:

  • Yeni python flask web uygulaması projesi oluşturma
  • Uygulama bağımlılıklarını yükleme
  • Uygulamanın kullanıcı arabirimi bileşenlerini ekleme
  • Flask web uygulamanızı kimlik doğrulaması için Microsoft Entra Id kullanacak şekilde yapılandırma

Önkoşullar

Yeni python web uygulaması projesi oluşturma

Öğreticinin geri kalanını tamamlamak için bir Python Flask web uygulaması projesi oluşturmanız gerekir. Öğrenme için tamamlanmış bir kod örneği kullanmayı tercih ediyorsanız GitHub'dan Python Flask web uygulaması örneğini indirin.

Python Flask web uygulamasını sıfırdan oluşturmak için şu adımları izleyin:

  1. Uygulamanızı barındırmak ve flask-web-app olarak adlandırmak için bir klasör oluşturun.
  2. Proje dizininize gidin ve app.py, app.config.py ve requirements.txt adlı üç dosya oluşturun.
  3. Projenin kök klasöründe bir .env dosyası oluşturun.
  4. Proje kök dizininizde templates adlı bir klasör oluşturun. Flask bu alt dizinde işleme şablonlarını arar.

Dosyaları oluşturduktan sonra projenizin dosyası ve dizini aşağıdaki yapıya benzer olmalıdır:

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

Uygulama bağımlılıklarını yükleme

Oluşturduğunuz uygulama, Python için Microsoft Authentication Library (MSAL) çevresindeki bir sarmalayıcı olan paketini kullanıridentity. Ayrıca Flask, Flask Oturumu, istekler ve uygulamanın gerektirdiği diğer tüm bağımlılıkları da yüklersiniz. requirements.txt bu bağımlılıklarla güncelleştirin.

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

Uygulama kullanıcı arabirimi bileşenleri ekleme

Bu bölümde, uygulamada tanımladığınız yolların her biri için oturum açma, oturum kapatma, API çağrıları ve hata şablonları gibi HTML şablonları oluşturacaksınız. Bu sayfaların her biri için şablon oluşturmak için şu adımları izleyin:

Oturum açma şablonları

templates klasöründe, login.html adlı bir HTML dosyası oluşturun ve aşağıdaki içeriği ekleyin:

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

Bu şablon, kullanıcıların uygulamanızda oturum açabileceği oturum açma sayfasını temsil eder.

Dizin şablonu

templates klasöründe, index.html adlı bir HTML dosyası oluşturun ve aşağıdaki içeriği ekleyin:

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

Dizin şablonu, kullanıcılar uygulamanın kök URL'sini ziyaret ettiğinde işlenen web uygulaması için bir giriş sayfası görevi görür.

Görüntüleme sayfası

Bu şablon, aşağı akış API çağrısının sonucunu görüntülemek için kullanılır. aşağıdaki kod parçacığını display.html ekleyin.

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

Hata şablonları

Kimlik doğrulaması hata şablonu

şablonlar klasöründe, auth_error.html adlı ve ortaya çıkabilecek hata iletilerini görüntüleyen bir HTML dosyası oluşturun. aşağıdaki kodu auth_error.html ekleyin.

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

Yapılandırma hatası şablonu

Şablonlar klasöründe, gerekli yapılandırma eksik olduğunda ileti görüntüleyen config_error.html adlı bir HTML dosyası oluşturun. aşağıdaki kodu config_error.html ekleyin.

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

Yapılandırma dosyasını oluşturma

Kod düzenleyicinizde yapılandırma parametrelerini barındıran app_config.py açın ve aşağıdaki kodu ekleyin:

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"

Yapılandırma ayarlarını depolamak için bir .env dosyası oluşturun.

Bu örnekte, uygulamanın yapılandırma ayarlarını, ortam değişkenlerini ve kodumuza eklenmemesi gereken kimlik bilgilerini depolamak ve yönetmek için bir .env dosyası kullanırsınız. Proje dizininizin kökünde oluşturduğunuz .env dosyasını açın ve aşağıdaki değerleri ekleyin.

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

.env.sample dosyanızda aşağıdaki yer tutucuları değiştirin:

    • CLIENT_ID uygulama kaydına genel bakış sayfasında Bulunan Uygulama (istemci) kimliği ile.
    • CLIENT_SECRET Sertifikalar ve Gizli Diziler'de oluşturduğunuz istemci gizli dizisiyle
    • AUTHORITY yerine https://login.microsoftonline.com/<TENANT_GUID> yazın. Dizin (kiracı) kimliği, uygulama kaydına genel bakış sayfasında bulunur.

Sonraki adım

Bu öğretici serisinin sonraki bölümünde Python Flask web uygulamasına oturum açma desteği eklemeyi öğrenin:

Öğretici: Python Flask web uygulamasına oturum açma desteği ekleme