使用 Azure AD B2C 在範例 Python Web 應用程式中設定驗證

本文使用範例 Python Web 應用程式來說明如何將 Azure Active Directory B2C （Azure AD B2C） 驗證新增至 Web 應用程式。

概觀

OpenID Connect (OIDC) 是建置於 OAuth 2.0 之上的驗證通訊協定。 您可以使用 OIDC，安全地將使用者登入應用程式。 此 Web 應用程式範例會使用適用於 Python 的身分識別套件來簡化對 Python Web 應用程式的新增驗證和授權支援。

登入流程包含下列步驟：

1. 使用者移至 Web 應用程式，然後選取 [登入]。
2. 應用程式會起始驗證要求，並將使用者重新導向至 Azure AD B2C。
3. 使用者註冊或登入、重設密碼，或使用社交帳戶來登入。
4. 使用者成功登入之後，Azure AD B2C 會將標識碼令牌傳回給應用程式。
5. 應用程式會以標識碼令牌交換授權碼、驗證標識元令牌、讀取宣告，然後將安全頁面傳回給使用者。

必要條件

• 具有有效訂用帳戶的 Azure 帳戶。 免費建立帳戶。
• 如果您還沒有租用戶，請建立 Azure AD B2C 租用戶並連結到 Azure 訂用帳戶。
• Python 3.8+

步驟 1：設定您的使用者流程

當使用者嘗試登入應用程式時，應用程式會透過使用者流程，啟動對授權端點的驗證要求。 使用者流程會定義並控制使用者體驗。 當使用者完成使用者流程之後，Azure AD B2C 會產生權杖，然後將使用者重新導向回到您的應用程式。

如果您尚未這麼做，請建立使用者流程或自訂原則。 重複步驟，以建立下列三個不同的使用者流程：

• 合併的登入和註冊使用者流程 (例如 susi)。 這個使用者流程也支援忘記密碼體驗。
• 設定檔編輯使用者流程 (例如 edit_profile)。
• 密碼重設使用者流程 (例如 reset_password)。

Azure AD B2C 會在使用者流程名稱前面加上 B2C_1_。 例如，susi 會成為 B2C_1_susi。

步驟 2：註冊 Web 應用程式

若要讓應用程式能夠使用 Azure AD B2C 登入，請在 Azure AD B2C 目錄中註冊您的應用程式。 註冊您的應用程式會建立應用程式與 Azure AD B2C 之間的信任關係。

在應用程式註冊期間，您會指定「重新導向 URI」。 重新導向 URI 是使用者在向 Azure AD B2C 進行驗證之後，由 Azure AD B2C 重新導向的端點。 應用程式註冊流程會產生可唯一識別您應用程式的「應用程式識別碼」 (也稱為「用戶端識別碼」)。 註冊應用程式之後，Azure AD B2C 會同時使用應用程式識別碼和重新導向 URI 來建立驗證要求。

步驟 2.1：註冊應用程式

若要建立 Web 應用程式註冊，請遵循下列步驟：

1. 登入 Azure 入口網站。

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

3. 在 Azure 入口網站中，搜尋並選取 [Azure AD B2C]。

4. 選取 [應用程式註冊]，然後選取 [新增註冊]。

5. 在 [名稱] 底下，輸入應用程式的名稱 (例如 webapp1)。

6. 在 [支援的帳戶類型] 下，選取 [任何身分識別提供者或組織目錄中的帳戶 (用於運用使用者流程來驗證使用者)]。

7. 在 [重新導向 URI] 下，選取 [Web]，然後在 [URL] 方塊中輸入 http://localhost:5000/getAToken。

8. 在 [權限] 底下，選取 [對 openid 與 offline_access 權限授與管理員同意] 核取方塊。

9. 選取註冊。

10. 選取 [概觀]。

11. 當您設定 Web 應用程式時，請記錄 [應用程式 (用戶端) 識別碼]，以供稍後使用。

    

步驟 2.2：建立 Web 應用程式用戶端密碼

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

1. 在 [管理] 下，選取 [憑證和密碼]。
2. 選取 [新用戶端密碼]。
3. 在 [描述] 方塊中輸入用戶端密碼的描述 (例如，clientsecret1)。
4. 在 [到期] 下，選取祕密的有效持續時間，然後選取 [新增]。
5. 記錄祕密的 [值]。 您將會在稍後的步驟中使用此值進行設定。

步驟 3：取得 Web 應用程式範例

下載 ZIP 檔案，或從 GitHub 複製範例 Web 應用程式。

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

將範例檔案解壓縮至路徑總長度為 260 或更少字元的資料夾。

步驟 4：設定範例 Web 應用程式

在專案的根目錄中，遵循下列步驟：

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

   FLASK_DEBUG=True
   B2C_TENANT_NAME=<tenant name>
   CLIENT_ID=<client id>
   CLIENT_SECRET=<client secret>
   SIGNUPSIGNIN_USER_FLOW=B2C_1_signupsignin1
   EDITPROFILE_USER_FLOW=B2C_1_profile_editing
   RESETPASSWORD_USER_FLOW=B2C_1_reset_password
   

   機碼	值
   B2C_TENANT_NAME	Azure AD B2C 租用戶名稱的第一個部分 (例如 contoso)。
   CLIENT_ID	步驟 2.1 中的 Web API 應用程式識別碼。
   CLIENT_SECRET	您在步驟 2.2 中建立的客戶端密碼值。
   *_USER_FLOW	您在步驟 1 中建立的使用者流程。

   環境變數會在 app_config.py 中予以參考，並保留在個別的 .env 檔案中，使其遠離原始檔控制。 提供的 .gitignore 檔案可防止簽入 .env 檔案。

步驟 5：執行範例 Web 應用程式

1. 在您的主控台或終端機中，切換至包含範例的目錄。 例如：

   cd ms-identity-python-webapp
   

2. 從 PyPi 安裝必要的套件，並執行下列命令，在本機電腦上執行 Web 應用程式：

   Linux

   python -m pip install -r requirements.txt
   python -m flask run --host localhost --port 5000
   

   macOS

   python -m pip install -r requirements.txt
   python -m flask run --host localhost --port 5000
   

   Windows

   py -m pip install -r requirements.txt
   py -m flask run --host localhost --port 5000
   

   主控台視窗會顯示本機執行應用程式的埠號碼：

    * Debug mode: on
      WARNING: This is a development server. Do not use it in a production deployment.
      Use a production WSGI server instead.
    * Running on `http://localhost:5000/` (Press CTRL+C to quit)
   

3. 若要檢視在本機電腦上執行的 Web 應用程式，請移至 http://localhost:5000。

4. 選取 [登入]。

   

5. 完成註冊或登入程式。

6. 成功驗證之後，您會看到您的顯示名稱，如下所示：

   

步驟 6：呼叫 Web API

若要讓您的應用程式使用 Azure AD B2C 登入並呼叫 Web API，您必須在 Azure AD B2C 目錄中註冊兩個應用程式。

• 您在步驟 2 中建立的 Web 應用程式 （Python） 註冊。 此應用程式註冊可讓您的應用程式使用 Azure AD B2C 登入。 應用程式註冊流程會產生可唯一識別您應用程式的「應用程式識別碼」 (也稱為「用戶端識別碼」)。 例如， 應用程式識別碼：1。

• Web API 註冊讓您的應用程式能夠呼叫受保護的 Web API。 註冊會公開 Web API 權限 (範圍)。 應用程式註冊程式會產生可唯一 識別 Web API 的應用程式 識別碼（例如， 應用程式識別碼：2）。 授與您的應用程式 （應用程式識別碼： 1） Web API 範圍的許可權（應用程式識別元：2）。

下圖說明應用程式註冊和應用程式架構：

驗證完成之後，使用者會與應用程式互動，而該應用程式會叫用受保護的 Web API。 該 Web API 會使用持有人權杖驗證。 持有人權杖是應用程式從 Azure AD B2C 取得的存取權杖。 應用程式會在 HTTPS 要求的授權標頭中傳遞權杖。

Authorization: Bearer <access token>

如果存取權杖的範圍與 Web API 的範圍不符，則驗證程式庫會取得具有正確範圍的新存取權杖。

步驟 6.1：註冊 Web API 應用程式

若要建立 Web API 應用程式註冊 (「應用程式識別碼：2」)，請遵循下列步驟：

1. 登入 Azure 入口網站。

2. 確定您使用的目錄包含您的 Azure AD B2C 租用戶。 選取入口網站工具列中的 [目錄 + 訂用帳戶] 圖示。

3. 在 [入口網站設定] | [目錄 + 訂用帳戶] 頁面上，在 [目錄名稱] 清單中找出 Azure AD B2C 目錄，然後選取 [切換]。

4. 在 Azure 入口網站中，搜尋並選取 [Azure AD B2C]。

5. 選取 [應用程式註冊]，然後選取 [新增註冊]。

6. 針對 [名稱]，輸入應用程式的名稱 (例如 my-api1)。 保留 [重新導向 URI] 和 [支援的帳戶類型] 的預設值。

7. 選取註冊。

8. 當應用程式註冊完成之後，選取 [概觀]。

9. 當您設定 Web 應用程式時，請記錄 [應用程式 (用戶端) 識別碼] 值，以供稍後使用。

   

步驟 6.2：設定範圍

1. 選取您建立的 my-api1 應用程式 (應用程式識別碼：2)，以開啟其 [概觀] 頁面。

2. 在 [管理] 底下，選取 [公開 API]。

3. 選取 [應用程式識別碼 URI] 旁邊的 [設定] 連結。 以唯一的名稱 (例如 tasks-api) 取代預設值 (GUID)，然後選取 [儲存]。

   當您的 Web 應用程式要求 Web API 的存取權杖時，應該新增此 URI 作為您針對 API 所定義之每個範圍的前置詞。

4. 在 [由此 API 定義的範圍] 底下，選取 [新增範圍]。

5. 若要建立定義 API 讀取存取權的範圍：

   1. 針對 [範圍名稱]，輸入 tasks.read。
   2. 針對 [管理員同意顯示名稱]，輸入工作 API 的讀取存取權。
   3. 針對 [管理員同意描述]，輸入允許工作 API 的讀取存取權。

6. 選取新增範圍。

7. 選取 [新增範圍]，然後新增定義 API 寫入存取權的範圍：

   1. 針對 [範圍名稱]，輸入 tasks.write。
   2. 針對 [管理員同意顯示名稱]，輸入工作 API 的寫入存取權。
   3. 針對 [管理員同意描述]，輸入允許工作 API 的寫入存取權。

8. 選取新增範圍。

步驟 6.3：授與 Web 應用程式許可權

若要為應用程式 (應用程式識別碼：1) 授與權限，請遵循下列步驟：

1. 選取 [應用程式註冊]，然後選取您建立的應用程式 (「應用程式識別碼：1」)。

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

3. 在 [已設定的權限] 底下，選取 [新增權限]。

4. 選取 [我的 API] 索引標籤。

5. 選取 Web 應用程式應獲授存取權的 API (「應用程式識別碼：2」)。 例如，輸入 my-api1。

6. 在 [權限] 下，展開 [工作]，然後選取您稍早定義的範圍 (例如 tasks.read 和 tasks.write)。

7. 選取新增權限。

8. 選取 [代表 <您的租用戶名稱> 授與管理員同意]。

9. 選取 [是]。

10. 選取 [重新整理]，然後驗證 [授與...] 會出現在這兩個範圍的 [狀態] 下方。

11. 從 [設定的權限] 清單中，選取您的範圍，然後複製範圍的完整名稱。

    

步驟 6.4：設定 Web API

此範例會取得具有相關範圍的存取令牌，Web 應用程式可用於 Web API。 此範例本身不會做為 Web API。 相反地，您必須使用現有的 Web API 或建立新的 API。 如需在 B2C 租使用者中建立 Web API 的教學課程，請參閱 使用 Azure AD B2C 在您自己的 Web API 中啟用驗證。

步驟 6.5：使用 Web API 設定範例應用程式

開啟app_config.py檔案。 此檔案包含您 Azure AD B2C 識別提供者的相關資訊。 更新應用程式設定的下列屬性：

機碼	值
ENDPOINT	Web API 的 URI（例如 ， https://localhost:6000/hello）。
SCOPE	您要建立的 Web API 範圍 （例如 ， ["https://contoso.onmicrosoft.com/tasks-api/tasks.read", https://contoso.onmicrosoft.com/tasks-api/tasks.write"]。

步驟 6.6：執行範例應用程式

1. 在您的主控台或終端機中，切換至包含範例的目錄。

2. 如果應用程式尚未繼續執行，請使用步驟 5 中的命令來重新啟動它。

3. 選取 [呼叫下游 API]。

   

步驟 7：部署您的應用程式

在生產應用程式中，應用程式註冊重新導向 URI 通常是應用程式執行所在的可公開存取端點，例如 https://contoso.com/getAToken。

您可以隨時在已註冊的應用程式中新增及修改重新導向 URI。 下列限制會套用至重新導向 URI：

• 重新導向URL必須以配置 https開頭。
• 重新導向URL會區分大小寫。 其大小寫必須符合您執行中應用程式之 URL 路徑的大小寫。

下一步

• 瞭解如何 使用 Azure AD B2C 在 Python Web 應用程式中設定驗證選項。