快速入門 - 在範例 Web 應用程式中登入使用者 - Microsoft identity platform

發行項
03/05/2025

在本快速入門中，您將使用範例 Web 應用程式，展示如何在您的工作租戶中登入使用者並呼叫 Microsoft Graph API。範例應用程式會使用 Microsoft 驗證連結庫來處理驗證。

開始之前，請使用此頁面頂端的 租用戶類型選取器 選擇租用戶類型。 Microsoft Entra ID 提供兩個租戶設定：員工和外部。工作群組租戶配置適用於員工、內部應用程式和其他組織資源。外部租戶是為客戶使用的應用程式而設計的。

先決條件

Azure 訂用帳戶。建立免費的 Azure 訂用帳戶。
Node.js
Visual Studio Code 或其他程式碼編輯器。
Microsoft Entra 工作團隊租戶。如需詳細資訊，請參閱取得 Microsoft Entra 租戶的方法。

註冊 Web 應用程式

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

若要完成註冊，請提供應用程式名稱，並指定支援的帳戶類型。註冊之後，應用程式概觀窗格會顯示應用程式原始碼中所需的標識碼。

登入 Microsoft Entra 系統管理中心。
如果您有多個租使用者的存取權，請使用頂端功能表中的 [設定] 圖示，切換至您想要從 [目錄 + 訂用帳戶] 功能表註冊應用程式的租使用者。
瀏覽至 [身分識別>應用程式>應用程式註冊]，然後選取 [新增註冊]。
輸入應用程式的名稱，例如 identity-client-web-app。
針對 支援的帳戶類型，請選取 此組織目錄中的 [帳戶]。如需不同帳戶類型的資訊，請選取 協助我選擇 選項。
選取登錄。
註冊完成時，會顯示應用程式的 [概觀] 窗格。記錄 目錄（租使用者）標識碼 和 應用程式（用戶端）標識碼，以用於您的應用程式原始程式碼。

注意

支援的帳戶類型 可以藉由參考修改應用程式所支援的帳戶來變更。

新增平臺和 URL

平臺會指定您想要整合的應用程式類型。重新導向 URI 是身分識別平台驗證伺服器在成功授權並獲授與安全性令牌後，傳送使用者的位置。

若要登入使用者，您的應用程式必須傳送具有指定為參數之重新導向 URI 的登入要求，而且它必須符合您在應用程式註冊中新增的任何重新導向 URI。

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

在 [管理] 下，選取 [驗證]。
在 [平臺組態] 頁面上，選取 [[新增平臺]，然後選取 [Web] 選項。
針對重新導向 URI ，請輸入，http://localhost:3000/auth/redirect。
在 Front-channel 註銷 URL下，輸入 https://localhost:5001/signout-callback-oidc 以進行註銷。
選擇 [設定] 以儲存變更。

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

在 [管理] 下，選取 [驗證]。
在 [平臺組態] 頁面上，選取 [[新增平臺]，然後選取 [Web] 選項。
針對 重新導向 URI，輸入 https://localhost:5001/signin-oidc。
在 Front-channel 註銷 URL中，輸入 https://localhost:5001/signout-callback-oidc 以執行註銷。
選取 [設定] 以儲存變更。

新增應用程式用戶端密碼或憑證

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

從 [應用程式註冊] 頁面中，選取您建立的應用程式（例如 Web 應用程式用戶端密碼），以開啟其概觀頁面。
在 [管理] 底下，選取 [憑證 & 密碼>[客戶端密碼]>[新增客戶端密碼]。
在 [描述] 方塊中，輸入客戶端密碼的描述（例如，Web 應用程式用戶端密碼）。
在 [[到期] 的下方，選擇秘密有效的持續時間（依照您的組織安全性規則），然後選擇 [[新增]。
記錄秘密的值。您可以在稍後的步驟中使用此值進行設定。在您離開 憑證和秘密之後，秘密的值將不會再顯示，而且無法透過任何方式擷取。請確定您把它錄下來。

若要為 Web 應用程式使用憑證認證，您必須建立憑證，然後上傳憑證。基於測試目的，您可以使用自我簽署憑證。使用下列步驟來建立及上傳自我簽署憑證：

使用終端機，流覽至您選擇的目錄，然後使用下列命令建立自我簽署憑證。
```
dotnet dev-certs https -ep ./certificate.crt --trust
```
返回 Microsoft Entra 系統管理中心，然後在 [管理] 底下，選取 [憑證] [& 秘密]>[上傳憑證]。
選取 憑證 (0) 索引標籤，然後選取 上傳憑證。
[上傳憑證] 窗格隨即出現。使用圖示瀏覽至您在上一個步驟中建立的憑證檔案，然後選取 [開啟] 。
請輸入憑證的描述，例如 aspnet-web-app 憑證，然後選擇新增。
記錄指紋值，以供下一個步驟使用。

當您建立機密用戶端應用程式的認證時：

Microsoft建議您先使用憑證，而不是客戶端密碼，再將應用程式移至生產環境。如需如何使用憑證的詳細資訊，請參閱 Microsoft身分識別平臺應用程式驗證憑證認證中的指示，。
基於測試目的，您可以建立自我簽署憑證，並將您的應用程式設定為向它進行驗證。不過，在生產時，您應該購買由知名憑證授權機構簽署的憑證，然後使用 Azure Key Vault 來管理憑證的存取和存續時間。

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

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

下載 .zip 檔案，然後將它解壓縮到名稱長度少於 260 個字元或複製存放庫的檔案路徑：
若要複製範例，請開啟命令提示字元並流覽至您想要建立專案的位置，然後輸入下列命令：
```
git clone https://github.com/Azure-Samples/ms-identity-node.git
```

下載 .zip 檔案，然後將它解壓縮到名稱長度少於 260 個字元或複製存放庫的檔案路徑：
若要複製範例，請開啟命令提示字元並流覽至您想要建立專案的位置，然後輸入下列命令：
```
git clone https://github.com/Azure-Samples/ms-identity-docs-code-dotnet.git
```

下載 Python 程式代碼範例然後將它解壓縮到檔名長度少於 260 個字元或複製存放庫的檔案路徑：
若要複製範例，請開啟命令提示字元並流覽至您想要建立專案的位置，然後輸入下列命令：

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

設定範例 Web 應用程式

若要使用範例應用程式登入使用者，您必須使用您的應用程式和租戶詳細資訊來更新範例應用程式。

在 ms-identity-node-main 資料夾中，開啟 App 資料夾中的 .env 檔案。取代下列佔位符號：

變數	描述	範例
`Enter_the_Cloud_Instance_Id_Here`	註冊應用程式的 Azure 雲端實例	`https://login.microsoftonline.com/` （包括尾端正斜線）
`Enter_the_Tenant_Info_here`	租用戶標識碼或主要網域	`contoso.microsoft.com` 或 `aaaabbbb-0000-cccc-1111-dddd2222eeee`
`Enter_the_Application_Id_Here`	您註冊之應用程式的用戶端識別碼	`00001111-aaaa-2222-bbbb-3333cccc4444`
`Enter_the_Client_Secret_Here`	您註冊之應用程式的客戶端密碼	`A1b-C2d_E3f.H4i,J5k?L6m!N7o-P8q_R9s.T0u`
`Enter_the_Graph_Endpoint_Here`	您的應用程式所呼叫的 Microsoft Graph API 雲端實例	`https://graph.microsoft.com/`（包括結尾的正斜線符號）
`Enter_the_Express_Session_Secret_Here`	用來簽署 Express 會話 Cookie 的隨機字元字串	`A1b-C2d_E3f.H4...`

進行變更之後，您的檔案看起來應該類似下列代碼段：

CLOUD_INSTANCE=https://login.microsoftonline.com/
TENANT_ID=aaaabbbb-0000-cccc-1111-dddd2222eeee
CLIENT_ID=00001111-aaaa-2222-bbbb-3333cccc4444
CLIENT_SECRET=A1b-C2d_E3f.H4...

REDIRECT_URI=http://localhost:3000/auth/redirect
POST_LOGOUT_REDIRECT_URI=http://localhost:3000

GRAPH_API_ENDPOINT=https://graph.microsoft.com/

EXPRESS_SESSION_SECRET=6DP6v09eLiW7f1E65B8k

在 IDE 中，開啟專案資料夾 ms-identity-docs-code-dotnet\web-app-aspnet，其中包含範例。

開啟 appsettings.json，並以下列代碼段取代檔案內容;

{
"AzureAd": {
  "Instance": "https://login.microsoftonline.com/",
  "TenantId": "Enter the tenant ID obtained from the Microsoft Entra admin center",
  "ClientId": "Enter the client ID obtained from the Microsoft Entra admin center",
  "ClientCertificates": [
    {
      "SourceType": "StoreWithThumbprint",
      "CertificateStorePath": "CurrentUser/My",
      "CertificateThumbprint": "Enter the certificate thumbprint obtained the Microsoft Entra admin center"
    }   
  ],
  "CallbackPath": "/signin-oidc"
},
  "DownstreamApi": {
    "BaseUrl": "https://graph.microsoft.com/v1.0/",
    "RelativePath": "me",
    "Scopes": [ 
      "user.read" 
    ]
  },
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*"
}

TenantId - 註冊應用程式的租用戶識別碼。將引號中的文字替換成先前從已註冊應用程式概觀頁面記錄的 Directory (tenant) ID。
ClientId - 應用程式的識別碼，也稱為用戶端。以先前從已註冊應用程式概觀頁面記錄的 Application (client) ID 值取代引號中的文字。
ClientCertificates - 自我簽署憑證用於應用程式中的驗證。以先前記錄的憑證指紋取代 CertificateThumbprint 的文字。

開啟您在 IDE 中下載的應用程式，並瀏覽至範例應用程式的根資料夾。
```
cd flask-web-app
```
使用 .env.sample 作為指南，在專案的根資料夾中建立 .env.env 檔案。
```
# The following variables are required for the app to run.
CLIENT_ID=<Enter_your_client_id>
CLIENT_SECRET=<Enter_your_client_secret>
AUTHORITY=<Enter_your_authority_url>
```
- 將 [CLIENT_ID] 的值設定為 [概觀] 頁面上所註冊應用程式的 應用程式（用戶端）標識碼。
- 將 CLIENT_SECRET 的值設為您在已註冊應用程式的 憑證 & 秘密 中創建的客戶端密碼。
- 將 AUTHORITY 的值設定為 https://login.microsoftonline.com/<TENANT_GUID>。 目錄（租用戶）標識碼 可在應用程式註冊概覽頁面上取得。
環境變數會在 app_config.py中參考，並且會保留在個別的 .env 檔案中，使其遠離原始檔控制。提供的 .gitignore 檔案可防止簽入 .env 檔案。

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

您已設定範例應用程式。您可以繼續執行並測試它。

若要啟動伺服器，請從專案目錄內執行下列命令：
```
cd App
npm install
npm start
```
移至 http://localhost:3000/。
選取登入以開始登入過程。

第一次登入時，系統會提示您提供同意，以允許應用程式登入並存取配置檔。成功登入之後，系統會將您重新導向回應用程式首頁。

應用程式的運作方式

範例會在localhost埠3000上裝載網頁伺服器。當網頁瀏覽器存取此位址時，應用程式會轉譯首頁。一旦用戶選取 [登入]，應用程式就會透過 MSAL 節點連結庫所產生的 URL，將瀏覽器重新導向至Microsoft Entra 登入畫面。在使用者同意之後，瀏覽器會將使用者重新導向回應用程式首頁，以及標識碼和存取令牌。

在您的項目目錄中，使用終端機輸入下列命令：
```
dotnet run
```
複製終端機中顯示的 https URL，例如，https://localhost:5001，然後將它貼到瀏覽器中。我們建議使用私密或無痕模式的瀏覽器會話。
請遵循步驟並輸入必要的詳細數據，以使用您的Microsoft帳戶登入。系統會要求您提供電子郵件位址，以便將一次性密碼傳送給您。出現提示時，請輸入程序代碼。
應用程式會請求許可，以維持對您已授與存取的數據的持續存取權，並登入您的帳號及讀取您的個人資料。選擇接受。下列螢幕快照隨即出現。它表示您已登入應用程式，並從 Microsoft Graph API 檢視您的設定檔詳細數據。

從應用程式註銷

在頁面右上角找到 [註銷] 鏈接，然後選擇它。
系統會提示您挑選要註銷的帳戶。選取您用來登入的帳戶。
隨即出現訊息，指出您註銷。您現在可以關閉瀏覽器視窗。

建立應用程式的虛擬環境：
- 針對 Windows，請執行下列命令：
```
py -m venv .venv
.venv\scripts\activate
```
- 針對 macOS/Linux，請執行下列命令：
```
python3 -m venv .venv
source .venv/bin/activate
```
使用 pip安裝必要條件：
```
pip install -r requirements.txt
```
從命令行執行應用程式。請確定您的應用程式正在與您稍早設定的重新導向 URI 相同的埠上執行。
```
flask run --debug --host=localhost --port=5000
```
複製出現在終端機中的 HTTPs URL，例如，https://localhost:5000，然後將它貼到瀏覽器中。我們建議使用私人或 incognito 瀏覽器會話。
請遵循步驟並輸入必要的詳細數據，以使用您的Microsoft帳戶登入。系統會要求您提供登入的電子郵件地址和密碼。
應用程式會要求許可權，以維護您允許存取的數據存取權，以及登入並讀取配置檔，如螢幕快照所示。選擇接受。
下列螢幕快照隨即出現，表示您已成功登入應用程式。

顯示範例應用程式如何成功登入用戶的圖表。

應用程式的運作方式

下圖示範範例應用程式的運作方式：

顯示本快速入門所產生的範例應用程式運作方式的圖表。

應用程式會使用 identity 套件，從Microsoft身分識別平臺取得存取令牌。此套件建置在適用於 Python 的 Microsoft 驗證連結庫（MSAL）之上，以簡化 Web 應用程式中的驗證和授權。
您在上一個步驟中取得的存取令牌會作為持有人令牌，以在呼叫 Microsoft Graph API 時驗證使用者。

透過教學課程，學習如何建置一個 Node.js Web 應用程式，登入使用者並呼叫 Microsoft Graph API。在 Node.js & Express Web 應用程式中，登入使用者並獲取 Microsoft Graph 的存取權杖。

在本快速入門中，您會使用範例網頁應用程式來示範如何在外部租戶中讓使用者登入。範例應用程式會使用 Microsoft 驗證連結庫來處理驗證。

開始之前，請在此頁面頂端使用 租用戶類型選取器 來選擇租用戶類型。 Microsoft Entra ID 提供兩個租戶配置，員工和外部。員工組態設定是為了員工、內部應用程式和其他組織資源而設計的。外部租戶是為面向客戶的應用程式設計的。

先決條件

Visual Studio Code 或其他程式碼編輯器。
Node.js。
外部租戶。若要建立一個，請從下列方法中選擇：
- （建議）使用 Microsoft Entra External ID 擴充功能直接在 Visual Studio Code 中設定外部租使用者。
- 在 Microsoft Entra 管理中心建立新的外部租戶。

註冊 Web 應用程式

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

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

以至少應用程式開發人員身分登入 Microsoft Entra 系統管理中心。
如果您有多個租使用者的存取權，請使用頂端功能表中的 [設定] 圖示，從 [目錄 + 訂用帳戶] 功能表切換至外部租使用者。
瀏覽至 身分識別>應用程式>應用程式註冊。
選擇 + 新增註冊
在 [註冊應用程式] 頁面中出現;
1. 輸入一個具有意義的應用程式名稱，該名稱將顯示給應用程式的使用者，例如 ciam-client-app。
2. 在 [支援的帳戶類型] 下，選取 [僅限此組織目錄中的帳戶]。
選取 [[註冊]。
應用程式概觀窗格會在成功註冊時顯示。記錄 應用程式（用戶端）標識碼，以用於您的應用程式原始程式碼。

新增平臺和 URL

平臺會指定您想要整合的應用程式類型。重定向 URI 是指當使用者成功授權並獲得安全性令牌後，身分識別平台驗證伺服器將使用者傳送到的位置。

若要登入使用者，您的應用程式必須傳送具有指定為參數之重新導向 URI 的登入要求，而且它必須符合您在應用程式註冊中新增的任何重新導向 URI。

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

在 [管理] 下，選取 [驗證]。
在 [平臺組態] 頁面上，選取 [[新增平臺]，然後選取 [Web] 選項。
針對 重新導向 URI 輸入 http://localhost:3000/auth/redirect。
選取 [配置] 以儲存變更。

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

在 [管理] 下，選取 [驗證]。
在 [平臺組態] 頁面上，選取 [[新增平臺]，然後選取 [Web] 選項。
在 重定向 URI 中輸入 https://localhost:7274/signin-oidc。
在 [前端登出 URL] 下，輸入 https://localhost:7274/signout-callback-oidc 以進行登出。
選取 [設定 ]，然後 [設定] 以儲存變更。

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

在 [管理] 下，選取 [驗證]
在 [平臺組態] 頁面上，選取 [[新增平臺]，然後選取 [Web] 選項。
針對 重新導向 URI 輸入 http://localhost:5000/redirect。此重新導向 URI 是授權伺服器傳送存取令牌的位置。您可以自定義它以符合您的使用案例。
選取 [配置 ] 以儲存您的變更。

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

在 [管理] 下，選取 [驗證]
在 [平臺組態] 頁面上，選取 [[新增平臺]，然後選取 [Web] 選項。
針對重新導向 URI ，在中輸入 http://localhost:3000/getAToken。此重新導向 URI 是授權伺服器傳送存取令牌的位置。您可以自定義它以符合您的使用案例。
選取 [設定] 以儲存變更。

新增應用程式客戶端密碼

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

從 [應用程式註冊] 頁面中，選取您建立的應用程式（例如 Web 應用程式用戶端密碼），以開啟其概觀頁面。
在 [管理] 底下，選取 [憑證 & 密碼>[客戶端密碼]>[新增客戶端密碼]。
在 [描述] 方塊中，輸入客戶端密碼的描述（例如，Web 應用程式用戶端密碼）。
在到期底下，選擇秘密有效的持續時間（根據您的組織安全規則），然後選擇新增。
記錄秘密的值。您可以在稍後的步驟中使用此值進行設定。在您離開 憑證和秘密之後，秘密值將不再顯示，也無法透過任何方式擷取。確保把它錄下來。

當您建立機密用戶端應用程式的認證時：

Microsoft建議您先使用憑證，而不是客戶端密碼，再將應用程式移至生產環境。如需如何使用憑證的詳細資訊，請參閱 Microsoft身分識別平臺應用程式驗證憑證認證中的指示，。
基於測試目的，您可以建立自我簽署憑證，並將您的應用程式設定為向它進行驗證。不過，生產中，您應該購買由知名證書頒發機構單位簽署的憑證，然後使用 Azure Key Vault 來管理憑證存取和存留期。

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

從 [應用程式註冊] 頁面中，選取您建立的應用程式（例如 ciam-client-app），以開啟其 [概觀] 頁面。
在 [管理] 下，選取 [API 許可權]。
1. 選取 [為 <你的租用戶名稱>授予系統管理員同意]，然後選取 [是]。
2. 選取 [[重新整理]，然後確認 已授與 <租使用者名稱> 出現在許可權狀態底下。

建立使用者流程

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

以至少外部 ID 使用者流程管理員身分登入 Microsoft Entra 管理中心。
如果您有多個租使用者的存取權，請使用頂端功能表中的 [設定] 圖示，從 [目錄 + 訂用帳戶] 功能表切換至外部租使用者。
瀏覽至 身分識別>外部身分識別>使用者流程。
選取 [+ 新增使用者流程]。
在 [建立] 頁面上：
1. 輸入使用者流程的名稱，例如 SignInSignUpSample。
2. 在 識別提供者 的列表中，選取 電子郵件帳戶。此識別提供者可讓使用者使用其電子郵件位址登入或註冊。
  
  注意
  
  只有在您設定與他們同盟之後，才會在這裡列出其他識別提供者。例如，如果您設定與 Google、Facebook、Apple 或 OIDC 身分識別提供者的同盟，您將能夠在這裡選取這些額外的識別提供者。
3. 在 [電子郵件帳戶下，您可以選取兩個選項之一。在本教學課程中，選取 [電子郵件與密碼。
  - 具有密碼的電子郵件：允許新使用者以電子郵件地址作為登入名稱和密碼作為其第一個因素認證來註冊和登入。
  - 電子郵件一次性密碼：允許新使用者使用電子郵件地址作為登入名稱和電子郵件一次性密碼作為其第一個因素認證來註冊和登入。必須在租用戶層級啟用電子郵件一次性密碼（所有識別提供者>電子郵件一次性密碼），此選項才能在使用者流程層級取得。
4. 在 [使用者屬性下，選擇您想要在註冊時從使用者收集的屬性。選取 [顯示更多]，您可以選擇 國家/地區的屬性和宣告、顯示名稱，以及 郵遞區編碼。選取 [確定] 。（只有在使用者第一次註冊時，才會提示使用者輸入屬性。
選取建立。新的使用者流程會出現在 使用者流程 清單中。如有必要，請重新整理頁面。

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

將 Web 應用程式與使用者流程產生關聯

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

在側邊欄選單上，選取 [身分識別]。
選取 [外部身分識別]，然後 [使用者流程]。
在 [使用者流程] 頁面中，選取您稍早建立使用者流程名稱，例如，SignInSignUpSample。
在 [使用] 下，選取 [應用程式]。
選擇 添加應用程式。
從清單中選取應用程式，例如 ciam-client-app，或使用搜尋方塊來尋找應用程式，然後加以選取。
選擇 ，選擇。

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

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

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

若要複製範例，請開啟命令提示字元並流覽至您想要建立專案的位置，然後輸入下列命令：
```
git clone https://github.com/Azure-Samples/ms-identity-ciam-javascript-tutorial.git
```
或者，下載範例 .zip 檔案，然後將它解壓縮到名稱長度少於 260 個字元的檔案路徑。

安裝專案相依性

開啟主控台視窗，並變更為包含 Node.js 範例應用程式的目錄：
```
cd 1-Authentication\5-sign-in-express\App
```
執行下列命令來安裝應用程式相依性：
```
npm install
```

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

若要複製範例，請開啟命令提示字元並流覽至您想要建立專案的位置，然後輸入下列命令：
```
git clone https://github.com/Azure-Samples/ms-identity-ciam-dotnet-tutorial.git
```
下載 .zip 檔案。將它解壓縮到名稱長度少於 260 個字元的檔案路徑。

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

若要複製範例，請開啟命令提示字元並流覽至您想要建立專案的位置，然後輸入下列命令：
```
git clone https://github.com/Azure-Samples/ms-identity-docs-code-python.git
```
下載 .zip 檔案。將它解壓縮到名稱長度少於 260 個字元的檔案路徑。

安裝專案依賴項

開啟主控台視窗，並變更為包含 Flask 範例 Web 應用程式的目錄：
```
cd django-web-app
```
設定虛擬環境：
- 針對 Windows，請執行下列命令：
```
py -m venv .venv
.venv\scripts\activate
```
- 針對 macOS/Linux，請執行下列命令：
```
python3 -m venv .venv
source .venv/bin/activate
```
若要安裝應用程式相依性，請執行下列命令：
```
python3 -m pip install -r requirements.txt
```

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

若要複製範例，請開啟命令提示字元並流覽至您想要建立專案的位置，然後輸入下列命令：
```
git clone https://github.com/Azure-Samples/ms-identity-docs-code-python.git
```
下載 .zip 檔案。將它解壓縮到名稱長度少於 260 個字元的檔案路徑。

安裝專案依賴項

開啟主控台視窗，並變更為包含 Flask 範例 Web 應用程式的目錄：
```
cd flask-web-app
```
設定虛擬環境：
- 針對 Windows，請執行下列命令：
```
py -m venv .venv
.venv\scripts\activate
```
- 針對 macOS/Linux，請執行下列命令：
```
python3 -m venv .venv
source .venv/bin/activate
```
若要安裝應用程式相依性，請執行下列命令：
```
python3 -m pip install -r requirements.txt
```

設定範例 Web 應用程式

若要使用範例應用程式讓使用者登入，您必須以您的應用程式和租戶詳細資料來更新程式：

在您的程式代碼編輯器中，開啟 應用程式\authConfig.js 檔案。
尋找佔位符：
- Enter_the_Application_Id_Here，並將它取代為您稍早註冊之應用程式的應用程式（用戶端）標識碼。
- Enter_the_Tenant_Subdomain_Here，並將它取代為 Directory （tenant）子域。例如，如果您的租戶的主要網域是 contoso.onmicrosoft.com，請使用 contoso。如果您沒有租戶名稱，請瞭解如何查看租戶詳細資料。
- Enter_the_Client_Secret_Here，接著把它替換為您稍早複製的應用程式密鑰。

瀏覽至包含 ASP.NET Core 範例應用程式的根目錄：
```
cd 1-Authentication\1-sign-in-aspnet-core-mvc
```
開啟 appsettings.json 檔案。
在 Authority中，尋找 Enter_the_Tenant_Subdomain_Here，然後將其替換為您租用戶的子域名。例如，如果您的租使用者主要網域是 caseyjensen@onmicrosoft.com，則您應該輸入的值是 casyjensen。
尋找 Enter_the_Application_Id_Here 值，並將它取代為您在 Microsoft Entra 系統管理中心註冊的應用程式識別碼（clientId）。
將 Enter_the_Client_Secret_Here 取代為您在 [新增應用程式客戶端密碼]中設定的客戶端密碼值。

在 Visual Studio Code 或您使用的編輯器上開啟項目檔。
使用 .env.sample 檔案作為指南，在專案的根資料夾中建立 .env 檔案。
在您的 .env 檔案中，提供下列環境變數：
1. CLIENT_ID 這是您稍早註冊之應用程式的應用程式（用戶端）標識碼。
2. CLIENT_SECRET 這是您稍早複製的應用程式秘密值。
3. AUTHORITY，這是識別令牌授權單位的URL。其格式應為 https://{subdomain}.ciamlogin.com/{subdomain}.onmicrosoft.com。將子域取代為 Directory （tenant）子域。例如，如果您的租戶主要網域是 contoso.onmicrosoft.com，請使用 contoso。如果您沒有租使用者子域，請瞭解如何閱讀租使用者詳細資料。
4. REDIRECT_URI 應該與您稍早註冊的重新導向 URI 類似，並且應該符合您的設定。

在 Visual Studio Code 或您使用的編輯器上開啟項目檔。
使用 .env.sample 檔案作為指南，在專案的根資料夾中建立 .env 檔案。
在您的 .env 檔案中，提供下列環境變數：
- CLIENT_ID 這是您稍早註冊之應用程式的應用程式（用戶端）標識碼。
- CLIENT_SECRET 這是您稍早複製的應用程式秘密值。
- AUTHORITY，這是識別令牌授權單位的URL。其格式應為 https://{subdomain}.ciamlogin.com/{subdomain}.onmicrosoft.com。將子域取代為 Directory （tenant）子域。例如，如果您的租戶主要網域是 contoso.onmicrosoft.com，請使用 contoso。如果您沒有租戶子域，請瞭解如何查看租戶詳細資訊。
確認重新導向 URI 已正確設定。您稍早註冊的重新導向 URI 應該符合您的設定。根據預設，此範例會將重新導向 URI 路徑設定為 /getAToken。此組態位於 app_config.py 檔案中，REDIRECT_PATH。

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

您現在可以測試 web 應用程式 Node.js 範例。您必須啟動 Node.js 伺服器，並在 http://localhost:3000透過瀏覽器存取伺服器。

在您的終端機中，執行下列命令：
```
npm start 
```
開啟瀏覽器，然後移至 http://localhost:3000。您應該會看到類似下列螢幕快照的頁面：
在頁面完成載入後，當出現提示時，選取 [登入]。
在登入頁面上，輸入 電子郵件地址，選取 [下一步]，輸入密碼，然後選取 [登入]。如果您沒有帳戶，請選取 [沒有帳戶？建立一個 連結，以啟動註冊流程。
如果您選擇註冊選項，請在填寫電子郵件、單次密碼、新密碼和更多帳戶詳細數據之後，完成整個註冊流程。您會看到類似下列螢幕快照的頁面。如果您選擇登入選項，您會看到類似的頁面。
選取註銷將使用者註銷 Web 應用程式，或選取 檢視標識符令牌宣告 以檢視 Microsoft Entra 所傳回的標識符令牌宣告。

運作方式

當使用者選取登入連結時，應用程式會起始驗證要求，並將使用者重新導向至Microsoft Entra External ID。在出現的登入或註冊頁面上，一旦使用者成功登入或建立帳戶，Microsoft Entra External ID 會將標識元令牌傳回給應用程式。應用程式會驗證標識碼令牌、讀取宣告，並將安全頁面傳回給使用者。

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

如果您想要建置類似您所執行範例的應用程式，請完成在您自己的 Node.js Web 應用程式登入使用者一文中的步驟。

請在終端或命令列執行下列指令：
```
dotnet run
```
開啟網頁瀏覽器並瀏覽至 https://localhost:7274。
使用向外部租用戶註冊的帳戶登入。
一旦登入後，顯示名稱會在 [註銷] 按鈕的旁邊顯示，如下列螢幕快照所示。
若要從應用程式註銷，請選取 [註銷] 按鈕。

執行應用程式以查看遊戲的登入體驗。

注意

此範例會使用 Python 身分驗證第三方庫。連結庫不會由 Microsoft 正式維護，但建議您使用。此連結庫可讓您更輕鬆地將驗證新增至 Web 應用程式，因為它會擷取許多 MSAL Python 詳細數據。

在您的終端機中，執行下列命令：

python manage.py runserver localhost:5000

您可以使用您選擇的連接埠號碼。

開啟瀏覽器，然後移至 http://localhost:5000。您應該會看到類似下列螢幕快照的頁面：
頁面完成載入之後，選取登入連結。系統會提示您登入。
在登入頁面上，輸入 電子郵件地址，選取 [下一步]，輸入密碼，然後選取 [登入]。如果您沒有帳戶，請選取 [沒有帳戶？建立一個 連結，以啟動註冊流程。
如果您選擇註冊選項，請瀏覽註冊流程。填寫您的電子郵件、一次性密碼、新密碼和更多帳戶詳細數據，以完成整個註冊流程。
登入或註冊之後，系統會將您重新導向回 Web 應用程式。您會看到類似下列螢幕快照的頁面：
選取登出可將使用者登出 Web 應用程式，或選取 呼叫下游 API 來發起對 Microsoft Graph 端點的調用。

運作方式

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

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

執行應用程式以查看遊戲的登入體驗。

注意

此範例會使用 Python 識別第三方程式庫。連結庫不會由 Microsoft 正式維護，但建議您使用。此連結庫可讓您更輕鬆地將驗證新增至 Web 應用程式，因為它會擷取許多 MSAL Python 詳細數據。

在您的終端機中，執行下列命令：
```
python3 -m flask run --debug --host=localhost --port=3000
```
您可以使用您選擇的連接埠。這應該類似於您稍早註冊的重新導向 URI 埠。
開啟瀏覽器，然後移至 http://localhost:3000。您應該會看到類似下列螢幕快照的頁面：
頁面載入完成後，選取登入連結。系統會提示您登入。
在登入頁面上，輸入 電子郵件地址，選取 [下一步]，輸入密碼，然後選取 [登入]。如果您沒有帳戶，請選取 [沒有帳戶？建立一個 連結，以啟動註冊流程。
如果您選擇註冊選項，您將經歷登入流程。填寫您的電子郵件、單次密碼、新密碼和更多帳戶詳細數據，以完成整個註冊流程。
登入或註冊之後，系統會將您重新導向回 Web 應用程式。您會看到類似下列螢幕快照的頁面：
選取註銷以將使用者登出網頁應用程式，或選取 呼叫下游 API 呼叫 Microsoft Graph 端點。

共用方式為

先決條件

註冊 Web 應用程式

新增平臺和 URL

新增應用程式用戶端密碼或憑證

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

設定範例 Web 應用程式

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

應用程式的運作方式

從應用程式註銷

應用程式的運作方式

先決條件

註冊 Web 應用程式

新增平臺和 URL

新增應用程式客戶端密碼

建立使用者流程

將 Web 應用程式與使用者流程產生關聯

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

安裝專案相依性

安裝專案依賴項

安裝專案依賴項

設定範例 Web 應用程式

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

運作方式

運作方式

運作方式

意見反應

其他資源

共用方式為

快速入門：在範例 Web 應用程式中登入使用者

先決條件

註冊 Web 應用程式

新增平臺和 URL

新增應用程式用戶端密碼或憑證

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

設定範例 Web 應用程式

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

應用程式的運作方式

相關內容

先決條件

註冊 Web 應用程式

新增平臺和 URL

新增應用程式客戶端密碼

授與管理員同意

建立使用者流程

將 Web 應用程式與使用者流程產生關聯

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

安裝專案相依性

設定範例 Web 應用程式

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

運作方式

相關內容

意見反應

其他資源