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

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

必要條件

• Visual Studio Code 或其他程式碼編輯器。
• Python 3+。
• 外部租使用者。 如果您還沒有試用版， 請註冊免費試用。

註冊 Web 應用程式

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

下列步驟示範如何在 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. 記錄祕密的 [值]。 您將會在稍後的步驟中使用此值進行設定。 在您離開 憑證和秘密之後，秘密值不會再次顯示，而且無法透過任何方式擷取。 請確定您記錄它。

授與管理員同意

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

2. 在「管理」下方選取 [API 權限]。 從 [ 設定的許可權 ] 列表中，您的應用程式已獲指派 User.Read 許可權。 不過，由於租使用者是外部租使用者，因此取用者使用者本身無法同意此許可權。 身為系統管理員必須代表租使用者中的所有使用者同意此許可權：

   1. 選取 [授與租用戶名稱>的<管理員同意]，然後選取 [是]。
   2. 選取 [重新整理]，然後確認 [為租用戶名稱>授與] <出現在這兩個範圍的 [狀態] 底下。

建立使用者流程

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

1. 以至少外部標識碼使用者流程 管理員 istrator 身分登入 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. 選擇選取。

複製或下載範例 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. 設定虛擬環境

   Windows

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

   macOS/Linux

   python3 -m venv .venv
   source .venv/bin/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。 將子域取代為 Directory （tenant） 子域。 例如，如果您的租使用者主要網域是 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。 您應該會看到類似下列螢幕快照的頁面：

   

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

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

5. 如果您選擇註冊選項，您將經歷登入流程。 填寫您的電子郵件、單次密碼、新密碼和更多帳戶詳細數據，以完成整個註冊流程。

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

   

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

運作方式

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

當使用者選取 [註銷] 連結時，應用程式會清除其會話，將使用者重新導向至 Microsoft Entra 外部 ID 註銷端點，以通知使用者已註銷。然後，用戶會重新導向回 Web 應用程式。

相關內容

• 在範例 Django Web 應用程式中登入使用者
• 啟用密碼重設
• 自定義默認商標
• 使用Google設定登入