共用方式為

在範例 Python Flask Web 應用程式中登入使用者

  • 發行項

在本文中，您會探索受 Microsoft Entra 外部 ID 保護的 Python Flask Web 應用程式。 此範例會引導您了解向 Python Flask Web 應用程式進行驗證之客戶的登入體驗。 範例 Web 應用程式會使用適用於 Python 的 Microsoft 驗證程式庫 (MSAL Python) (英文) 來處理使用者驗證。

必要條件

註冊 Web 應用程式

若要讓應用程式能夠使用 Microsoft Entra 將使用者登入，Microsoft Entra 外部 ID 必須能夠感知您建立的應用程式。 應用程式註冊會在應用程式與 Microsoft Entra 之間建立信任關係。 註冊應用程式時，外部 ID 會產生稱為「應用程式 (用戶端) 識別碼」的唯一識別碼，這個值可在建立驗證要求時用來識別您的應用程式。

下列步驟顯示如何在 Microsoft Entra 系統管理中心內註冊您的應用程式：

  1. 至少以應用程式開發人員的身分登入 Microsoft Entra 系統管理中心。

  2. 如果您有權存取多個租用戶，請使用頂端功能表中的 [設定] 圖示 ，以從 [目錄 + 訂用帳戶] 功能表切換至您的外部租用戶。

  3. 瀏覽至 [身分識別] > [應用程式] > [應用程式註冊]。

  4. 選取 + 新增註冊。

  5. 在出現的 [註冊應用程式] 頁面中；

    1. 輸入要向應用程式使用者顯示的有意義應用程式「名稱」，例如 ciam-client-app。
    2. 在 [支援的帳戶類型] 底下，選取 [僅在此組織目錄中的帳戶]。

  6. 選取註冊。

  7. 應用程式的 [概觀] 窗格會在成功註冊時顯示。 記錄要在應用程式原始程式碼中使用的「應用程式 (用戶端) 識別碼」。

若要在應用程式註冊中指定您的應用程式類型，請遵循下列步驟：

  1. 在 [管理] 下，選取 [驗證]。
  2. 在 [平台設定] 頁面上，選取 [新增平台]，然後選取 [Web] 選項。
  3. 針對 [重新導向 URI] 輸入 http://localhost:3000/getAToken。 此重新導向 URI 是授權伺服器傳送存取權杖的位置。 您可以進行自訂以符合您的使用案例。
  4. 選取 [設定] 以儲存您的變更。

新增應用程式用戶端密碼

為已註冊的應用程式建立用戶端密碼。 在要求權杖時，應用程式會使用用戶端密碼來證明其身分識別。

  1. 從 [應用程式註冊] 頁面中，選取您建立的應用程式 (例如 ciam-client-app)，以開啟其 [概觀] 頁面。
  2. 在 [管理] 下，選取 [憑證和密碼]。
  3. 選取 [新用戶端密碼]。
  4. 在 [描述] 方塊中，輸入用戶端密碼的描述 (例如「ciam 應用程式用戶端密碼」)。
  5. 在 [到期] 下方，選取祕密有效的持續時間 (根據組織的安全性規則)，然後選取 [新增]。
  6. 記錄祕密的 [值]。 您將會在稍後的步驟中使用此值進行設定。 在您離開 [憑證和祕密] 之後，祕密值將不會再次顯示，而且無法透過任何方式擷取。 請務必妥善加以記錄。

註冊應用程式之後，就會獲 指派User.Read 許可權。 不過，由於租使用者是外部租使用者，因此客戶使用者本身無法同意此許可權。 身為管理員的您必須代表租用戶中的所有使用者同意此權限：

  1. 從 [應用程式註冊] 頁面中，選取您建立的應用程式 (例如 ciam-client-app)，以開啟其 [概觀] 頁面。

  2. 在 [管理] 之下選取 [API 權限]。

    1. 選取 [代表 <您的租用戶名稱> 授與管理員同意]，然後選取 [是]。
    2. 選取 [重新整理]，然後確認 [為租用戶名稱>授與] <出現在許可權的 [狀態] 底下。

建立使用者流程

請遵循下列步驟來建立客戶可用來登入或註冊應用程式的使用者流程。

  1. 至少以外部 ID 使用者流程管理員的身分登入 Microsoft Entra 系統管理中心。

  2. 如果您有權存取多個租用戶，請使用頂端功能表中的 [設定] 圖示 ，以從 [目錄 + 訂用帳戶] 功能表切換至您的外部租用戶。

  3. 瀏覽至 [身分識別] > [外部身分識別] > [使用者流程]。

  4. 選取 [+ 新增使用者流程]。

  5. 在 [建立] 頁面上：

    1. 輸入使用者流程的 [名稱]，例如 SignInSignUpSample。

    2. 在 [識別提供者] 清單中，選取 [電子郵件帳戶]。 此識別提供者可讓使用者使用其電子郵件地址來登入或註冊。

      注意

      其他識別提供者只會在您設定與其的同盟之後，才會在這裡列出。 例如，若設定與 Google 或 Facebook 的同盟，則可在此處選取這些其他識別提供者。

    3. 在 [電子郵件帳戶] 下方，您可以選取兩個選項中的其中一個。 在本教學課程中，選取 [電子郵件和密碼]。

      • 電子郵件和密碼：可讓新使用者使用電子郵件地址作為登入名稱，並使用密碼作為其第一個要素認證來註冊和登入。
      • 電子郵件一次性密碼：可讓新使用者使用電子郵件地址作為登入名稱，並使用電子郵件一次性密碼作為其第一個要素認證來註冊和登入。 電子郵件一次性密碼必須在租用戶層級啟用 ([所有識別提供者] > [電子郵件一次性密碼])，此選項才能在使用者流程層級使用。

    4. 在 [使用者屬性] 下方，選擇您想要在註冊時向使用者收集的屬性。 選取 [顯示更多]，即可選擇 [國家/地區]、[顯示名稱] 和 [郵遞區號] 的屬性和宣告。 選取 [確定]。 (只有在使用者第一次註冊時，才會提示使用者輸入屬性。)

  6. 選取 建立。 新的使用者流程會出現在 [使用者流程] 清單中。 如有需要，請重新整理頁面。

若要啟用自助式密碼重設，請使用啟用自助式密碼重設一文中的步驟。

將 Web 應用程式與使用者流程建立關聯

若要讓客戶使用者在使用您的應用程式時看到註冊或登入體驗，您必須將您的應用程式與使用者流程關聯起來。 雖然許多應用程式可以與您的使用者流程產生關聯，但單一應用程式只能與一個使用者流程產生關聯。

  1. 在側邊欄功能表上，選取 [身分識別]。

  2. 選取 [外部身分識別]，然後選取 [使用者流程]。

  3. 在 [使用者流程] 頁面中，選取您稍早建立的 [使用者流程名稱]，例如 SignInSignUpSample。

  4. 在 [使用] 下方，選取 [應用程式]。

  5. 選取新增應用程式。

  6. 從清單中選取應用程式 (例如 ciam-client-app)，或使用搜尋方塊來尋找應用程式並選取。

  7. 選擇選取。

將應用程式與使用者流程關聯後，您即可從 Microsoft Entra 系統管理中心使用您的應用程式模擬使用者的註冊或登入體驗，以測試您的使用者流程。 若要這麼做，請使用測試註冊和登入使用者流程中的步驟。

複製或下載範例 Web 應用程式

若要取得應用程式範例，您可以從 GitHub 加以複製，或將其下載為 .zip 檔案。

  • 若要複製範例，請開啟命令提示字元，並瀏覽至您想要建立專案的位置，然後輸入下列命令：

    git clone https://github.com/Azure-Samples/ms-identity-docs-code-python.git

  • 下載 .zip 檔案 (英文)。 將其解壓縮到名稱長度少於 260 個字元的檔案路徑。

安裝專案相依性

  1. 開啟主控台視窗，並變更至包含 Flask 範例 Web 應用程式的目錄：

    cd flask-web-app

  2. 設定虛擬環境

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

  3. 執行下列命令以安裝應用程式相依性：

    python3 -m pip install -r requirements.txt

設定範例 Web 應用程式

  1. 在 Visual Studio Code 或您使用的編輯器上開啟專案檔。

  2. 使用 .env.sample 檔案作為指南，在專案的根資料夾中建立 .env 檔案。

  3. 在您的 .env 檔案中，提供下列環境變數：

    • CLIENT_ID，其為您稍早註冊之應用程式的應用程式 (用戶端) 識別碼。
    • CLIENT_SECRET，其為您稍早複製的應用程式祕密值。
    • AUTHORITY，其為識別權杖授權單位的 URL。 其格式應該是 https://{subdomain}.ciamlogin.com/{subdomain}.onmicrosoft.com。 將 subdomain取代為目錄 (租用戶) 子網域。 例如，如果您的租用戶主要網域是 contoso.onmicrosoft.com，請使用 contoso。 如果您沒有租用戶子網域，請了解如何讀取租用戶詳細資料。

  4. 確認重新導向 URI 已正確設定。 您稍早註冊的重新導向 URI 應該符合您的設定。 根據預設，此範例會將重新導向 URI 路徑設定為 /getAToken。 這會在 app_config.py 檔案中設定為 REDIRECT_PATH。

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

執行應用程式以查看實際的登入體驗。

注意

此範例使用 Python 身分識別第三方程式庫 (英文)。 此程式庫不是由 Microsoft 官方維護，但建議您使用。 此程式庫可讓您更輕鬆地將驗證新增至 Web 應用程式，因為其會擷取許多 MSAL Python 詳細資料。

  1. 在終端內，執行下列 命令：

    python3 -m flask run --debug --host=localhost --port=3000

    您可以使用您選擇的連接埠。 這應該與您稍早註冊的重新導向 URI 連接埠類似。

  2. 開啟瀏覽器，然後移至 http://localhost:3000。 您應該會看到類似下列螢幕擷取畫面的頁面：

    Flask Web 應用程式範例登入頁面的螢幕擷取畫面。

  3. 頁面完成載入之後，請選取 [登入] 連結。 系統會提示您登入。

  4. 在登入頁面上，輸入您的 [電子郵件地址]、選取 [下一步]、輸入您的 [密碼]，然後選取 [登入]。 如果您沒有帳戶，請選取 [沒有帳戶?建立一個] 連結，以啟動註冊流程。

  5. 如果您選擇註冊選項，則將進入註冊流程。 請填寫您的電子郵件、一次性密碼、新密碼和更多帳戶詳細資料，以完成整個註冊流程。

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

    成功驗證後的 Flask Web 應用程式範例的螢幕擷取畫面。

  7. 選取 [登出] 以將使用者登出 Web 應用程式，或選取 [呼叫下游 API] 以呼叫 Microsoft Graph 端點。

運作方式

當使用者選取 [登入] 連結時，應用程式會起始驗證要求，並將使用者重新導向 Microsoft Entra 外部 ID。 使用者接著會在出現的頁面上登入或註冊頁面。 在提供必要的認證並同意要求的範圍之後，Microsoft Entra 外部 ID 會將使用者重新導向回具有授權碼的 Web 應用程式。 接著，Web 應用程式會使用此授權碼，從 Microsoft Entra 外部 ID 取得權杖。

當使用者選取 [登出] 連結時，應用程式會清除其工作階段，然後將使用者重新導向 Microsoft Entra 外部 ID 登出端點，以向其通知使用者已登出。然後，系統會將使用者重新導向回 Web 應用程式。

相關內容