教學課程：使用 Microsoft 身分識別平臺登入 Python Flask Web 應用程式

適用於： 員工租戶 外部租戶 （進一步了解）

本教學課程會引導您保護 Python Flask Web 應用程式。

在本教學課程中，您會：

先決條件

• Python 3+。
• Visual Studio Code 或其他程式碼編輯器。

建立 Flask 專案

1. 建立資料夾來載入 Flask 應用程式，例如 flask-web-app。

2. 開啟主控台視窗，並使用 命令將 目錄變更為 Flask Web 應用程式資料夾

   cd flask-web-app
   

3. 設定虛擬環境

   根據您的作系統，執行下列命令來設定虛擬環境並加以啟用：

   針對 WINDOWS 作業系統：

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

   針對 macOS 或 Linux 作業系統：

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

安裝應用程式依賴項

若要安裝應用程式相依性，請執行下列命令：

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"

您安裝的 ms_identity_python 程式庫會自動安裝 Microsoft 驗證程式庫（MSAL），作為它的相依性。 MSAL Python 是可讓您驗證使用者及管理其存取令牌的連結庫。

安裝必要的連結庫之後，請執行下列命令來更新您的需求檔案：

pip freeze > requirements.txt

設定應用程式以進行驗證

透過 Microsoft 身份平台登入使用者的網頁應用程式，會透過設定檔 .env 進行設定。 在 Python Flask 中，必須指定以下值：

更新組態檔

1. 在根目錄建立一個 .env 檔案，以安全儲存應用程式的設定。 您的 .env 檔案應包含下列環境變數：

   • Workforce 租戶
   • 外部租戶

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

   用以下值取代占位符：

   • 將 <Enter_your_client_id> 替換為您註冊的用戶端 Web 應用程式的 應用程式（client）識別碼。
   • 將 <Enter_tenant_id> 替換為您註冊 Web 應用程式時使用的 目錄（租戶）ID。
   • 將 <Enter_your_client_secret> 取代為您建立之 Web 應用程式的 客戶端密碼 值。 在本教學課程中，我們會使用秘密進行示範。 在生產環境中，請使用更安全的方法，例如 憑證或同盟身分識別認證。
   • 將 <Enter_redirect_uri> 替換為您稍早註冊的重定向 URI。 本教學課程會將重新導向 URI 路徑設定為 http://localhost:3000/getAToken。

2. 建立 app_config.py 檔案來讀取環境變數，並新增您需要的其他組態。

   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.
   

設定應用程式端點

在這個階段，您會建立 Web 應用程式端點，並將商業規則新增至您的應用程式。

1. 在根資料夾中建立名為 app.py 的檔案。

2. 在 app.py 檔案頂端匯入必要的相依性。

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

3. 初始化 Flask 應用程式，並將其設定為使用您在 app_config.py 檔案中指定的工作階段記憶體類型。

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

4. 初始化用戶端應用程式。 Flask Web 應用程式是機密用戶端。 我們會傳遞客戶端密碼，因為機密用戶端可以安全地儲存它。 身分識別程式庫會呼叫 MSAL 程式庫的 ConfidentialClientApplication 類別。

   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. 將必要的端點新增至 Flask 應用程式。 Web 應用程式會使用授權碼流程來登入使用者。 ms_identity_python MSAL 包裝函式庫有助於與 MSAL 函式庫互動，以便更方便地在您的應用程式中添加登入和登出功能。 我們會新增索引頁面，並使用 login_required 函式庫所提供的 裝飾器來保護它。 login_required 裝飾器可確保只有已驗證的使用者才能存取首頁。

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

   因為我們用@login_required來裝飾此視圖，因此可以確保使用者會出現。

建立應用程式範本

在根資料夾中建立一個叫 樣本 的資料夾。 在 templates 資料夾中，建立名為 index.html的檔案。 這是應用程式的首頁。 將下列程式代碼新增至 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>

執行及測試範例 Web 應用程式

登入或註冊之後，系統會將您重新導向回 Web 應用程式。 您會看到類似下列螢幕快照的頁面：

選取 [登出] 以登出應用程式。 系統會提示您挑選要註銷的帳戶。 選取您用來登入的帳戶。

使用自訂網址 （選擇性）