Bagikan melalui

Menyiapkan aplikasi web Python Flask untuk autentikasi

  • Artikel

Tutorial ini adalah bagian 2 dari seri yang menunjukkan pembuatan aplikasi web Python Flask dan menambahkan dukungan masuk menggunakan platform identitas Microsoft. Di bagian 1 dari seri ini, Anda mendaftarkan dan mengonfigurasi aplikasi di penyewa ID Microsoft Entra Anda.

Di tutorial ini, Anda akan:

  • Membuat proyek aplikasi web Python Flask baru
  • Instal dependensi aplikasi
  • Menambahkan komponen UI aplikasi
  • Mengonfigurasi aplikasi web Flask Anda untuk menggunakan ID Microsoft Entra untuk autentikasi

Prasyarat

Membuat proyek aplikasi web Python baru

Untuk menyelesaikan tutorial lainnya, Anda perlu membuat proyek aplikasi web Python Flask. Jika Anda lebih suka menggunakan sampel kode lengkap untuk pembelajaran, unduh sampel aplikasi web Python Flask dari GitHub.

Untuk membangun aplikasi web Python Flask dari awal, ikuti langkah-langkah berikut:

  1. Buat folder untuk menghosting aplikasi Anda dan beri nama flask-web-app.
  2. Navigasi ke direktori proyek Anda dan buat tiga file bernama app.py, app.config.py, dan requirements.txt.
  3. Buat file .env di folder akar proyek.
  4. Buat folder bernama templat di direktori akar proyek Anda. Flask mencari templat penyajian di subdirektori ini.

Setelah Anda membuat file, file dan direktori proyek Anda harus mirip dengan struktur berikut:

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

Instal dependensi aplikasi

Aplikasi yang Anda buat menggunakan paket, pembungkus identity di sekitar Microsoft Authentication Library (MSAL) untuk Python. Anda juga menginstal Flask, Flask Session, permintaan, dan semua dependensi lain yang diperlukan aplikasi. Perbarui requirements.txt dengan dependensi ini.

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

Menambahkan komponen antarmuka pengguna aplikasi

Di bagian ini, Anda membuat templat HTML untuk setiap rute yang Anda tentukan di aplikasi, termasuk masuk, keluar, panggilan API, dan templat kesalahan. Ikuti langkah-langkah ini untuk membuat templat untuk setiap halaman ini:

Templat masuk

Di folder templat, buat file HTML bernama login.html dan tambahkan konten berikut:

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

Templat ini mewakili halaman masuk tempat pengguna dapat masuk ke aplikasi Anda.

Templat indeks

Di folder templat, buat file HTML bernama index.html dan tambahkan konten berikut:

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

Templat indeks berfungsi sebagai beranda untuk aplikasi web, dirender saat pengguna mengunjungi URL akar aplikasi.

Tampilkan halaman

Templat ini digunakan untuk menampilkan hasil panggilan API hilir. Tambahkan cuplikan berikut ke 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>

Templat kesalahan

Templat kesalahan autentikasi

Di folder templat, buat file HTML yang disebut auth_error.html yang menampilkan pesan kesalahan apa pun yang mungkin muncul. Tambahkan kode berikut ke 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>

Templat kesalahan konfigurasi

Di folder templat, buat file HTML yang disebut config_error.html yang menampilkan pesan saat konfigurasi yang diperlukan hilang. Tambahkan kode berikut ke 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>

Buat file konfigurasi

Di editor kode Anda, buka app_config.py, yang menyimpan parameter konfigurasi, dan tambahkan kode berikut:

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"

Buat file .env untuk menyimpan pengaturan konfigurasi.

Dalam sampel ini, Anda menggunakan file .env untuk menyimpan dan mengelola pengaturan konfigurasi aplikasi, variabel lingkungan, dan kredensial yang tidak boleh disematkan dalam kode kami. Buka file .env yang Anda buat di akar direktori proyek Anda dan tambahkan nilai berikut.

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

Dalam file .env.sample Anda, ganti tempat penampung untuk:

    • CLIENT_IDdengan ID Aplikasi (klien) yang tersedia di halaman ringkasan pendaftaran aplikasi.
    • CLIENT_SECRET dengan rahasia klien yang Anda buat di Sertifikat & Rahasia
    • AUTHORITY dengan https://login.microsoftonline.com/<TENANT_GUID>. ID Direktori (penyewa) tersedia di halaman gambaran umum pendaftaran aplikasi.

Langkah selanjutnya

Pelajari cara menambahkan dukungan masuk ke aplikasi web Python Flask di bagian berikutnya dari seri tutorial ini:

Tutorial: Menambahkan dukungan masuk ke aplikasi web Python Flask