教學課程：在 Azure App Service 中端對端驗證和授權使用者

Azure App Service 提供可高度調整且自我修補的虛擬主機服務。 此外，App Service 還內建支援 使用者驗證和授權。 本教學課程說明如何使用App Service驗證和授權保護您的應用程式。 它會使用具有檢視前端的Express.js作為範例。 App Service 驗證和授權支援所有語言執行平臺，您可以遵循本教學課程，瞭解如何將它套用至慣用的語言。

Azure App Service 使用 Linux 作業系統提供可高度擴充、自我修復的 Web 主機服務。 此外，App Service 還內建支援 使用者驗證和授權。 本教學課程說明如何使用App Service驗證和授權保護您的應用程式。 它會使用具有檢視Express.js。 App Service 驗證和授權支援所有語言執行平臺，您可以遵循本教學課程，瞭解如何將它套用至慣用的語言。

在本教學課程中，您將瞭解：

• 啟用內建驗證和授權
• 針對未經驗證的要求保護應用程式
• 使用 Microsoft Entra 識別碼作為識別提供者
• 代表登入的使用者存取遠端應用程式
• 使用令牌驗證保護服務對服務呼叫
• 使用伺服器程式代碼的存取令牌
• 使用來自用戶端 （瀏覽器） 程式代碼的存取令牌

提示

完成此案例之後，請繼續進行下一個程式，以瞭解如何以已驗證的使用者身分連線到 Azure 服務。 常見案例包括以具有特定能力或存取特定數據表或檔案的使用者身分存取 Azure 儲存體 或資料庫。

此程式中的驗證會透過 Azure App 服務 在裝載平臺層提供。 您必須部署前端和後端應用程式，並設定成功使用此 Web 應用程式的驗證。

取得使用者配置檔

前端應用程式已設定為安全地使用後端 API。 前端應用程式會為使用者提供 Microsoft 登入，然後允許使用者從後端取得其 假 配置檔。 本教學課程會使用假配置檔來簡化完成案例的步驟。

在前端執行原始碼之前，App Service 會插入從 App Service x-ms-token-aad-access-token 標頭驗證accessToken的 。 前端原始程式碼接著會存取並傳送 accessToken 至後端伺服器作為 bearerToken ，以安全地存取後端 API。 後端伺服器會在傳遞至後端原始程式碼之前驗證 bearerToken。 一旦後端原始程式碼收到 bearerToken，就可以使用它。

在本系列中的下一篇文章中，bearerToken 會交換為具有存取 Microsoft Graph API 範圍之令牌的令牌。 Microsoft Graph API 會傳回使用者的配置檔資訊。

必要條件

如果您沒有 Azure 訂用帳戶，請在開始之前先建立 Azure 免費帳戶。

• Node.js (LTS)

• 在 Azure Cloud Shell 中使用 Bash 環境。 如需詳細資訊，請參閱 Azure Cloud Shell 中的 Bash 快速入門。

  

• 若要在本地執行 CLI 參考命令，請安裝 Azure CLI。 若您在 Windows 或 macOS 上執行，請考慮在 Docker 容器中執行 Azure CLI。 如需詳細資訊，請參閱〈如何在 Docker 容器中執行 Azure CLI〉。

  • 如果您使用的是本機安裝，請使用 az login 命令，透過 Azure CLI 來登入。 請遵循您終端機上顯示的步驟，完成驗證程序。 如需其他登入選項，請參閱使用 Azure CLI 登入。

  • 出現提示時，請在第一次使用時安裝 Azure CLI 延伸模組。 如需擴充功能詳細資訊，請參閱使用 Azure CLI 擴充功能。

  • 執行 az version 以尋找已安裝的版本和相依程式庫。 若要升級至最新版本，請執行 az upgrade。

1.複製範例應用程式

1. 在 Azure Cloud Shell 中，執行下列命令來複製範例存放庫。

   git clone https://github.com/Azure-Samples/js-e2e-web-app-easy-auth-app-to-app
   

2.建立和部署應用程式

建立資源群組、Web 應用程式方案、Web 應用程式，並在單一步驟中部署。

1. 變更為前端 Web 應用程式目錄。

   cd js-e2e-web-app-easy-auth-app-to-app/frontend
   

2. 使用 az webapp up 建立及部署前端 Web 應用程式。 因為 Web 應用程式名稱必須是全域唯一的，請以唯一的名稱取代 <front-end-app-name> 。

   az webapp up --resource-group myAuthResourceGroup --name <front-end-app-name> --plan myPlan --sku FREE --os-type Windows --location "West Europe" --runtime "NODE:16LTS"
   

3. 變更為後端 Web 應用程式目錄。

   cd ../backend
   

4. 將後端 Web 應用程式部署至相同的資源群組和應用程式方案。 因為 Web 應用程式名稱必須是全域唯一的，請以一組唯一的縮寫或數位取代 <back-end-app-name> 。

   az webapp up --resource-group myAuthResourceGroup --name <back-end-app-name> --plan myPlan --os-type Windows --location "West Europe" --runtime "NODE:16LTS"
   

1. 變更為前端 Web 應用程式目錄。

   cd frontend
   

2. 使用 az webapp up 建立及部署前端 Web 應用程式。 因為 Web 應用程式名稱必須是全域唯一的，請以一組唯一的縮寫或數位取代 <front-end-app-name> 。

   az webapp up --resource-group myAuthResourceGroup --name <front-end-app-name> --plan myPlan --sku FREE --location "West Europe" --os-type Linux --runtime "NODE:16-lts"
   

3. 變更為後端 Web 應用程式目錄。

   cd ../backend
   

4. 將後端 Web 應用程式部署至相同的資源群組和應用程式方案。 因為 Web 應用程式名稱必須是全域唯一的，請以一組唯一的縮寫或數位取代 <back-end-app-name> 。

   az webapp up --resource-group myAuthResourceGroup --name <back-end-app-name> --plan myPlan --sku FREE --location "West Europe" --runtime "NODE:16-lts"
   

3.設定應用程式設定

前端應用程式必須知道 API 要求的後端應用程式 URL。 使用下列 Azure CLI 命令來設定應用程式設定。 URL 格式 https://<back-end-app-name>.azurewebsites.net應該是 。

az webapp config appsettings set --resource-group myAuthResourceGroup --name <front-end-app-name> --settings BACKEND_URL="https://<back-end-app-name>.azurewebsites.net"

4.前端呼叫後端

流覽至前端應用程式，並從後端傳回 假 配置檔。 此動作會驗證前端是否成功向後端要求配置檔，而後端會傳回配置檔。

1. 在瀏覽器開啟前端 Web 應用程式。 https://<front-end-app-name>.azurewebsites.net

   

2. 選取 Get user's profile 連結。

3. 檢視從後端 Web 應用程式傳回的假配置檔。

   

   withAuthentication false 的值表示尚未設定驗證。

5.設定驗證

在此步驟中，您會啟用兩個 Web 應用程式的驗證和授權。 本教學課程使用 Microsoft Entra ID 作為識別提供者。

您也可以將前端應用程式設定為：

• 將前端應用程式存取權授與後端應用程式
• 設定 App Service 以傳回可使用的令牌
• 在您的程式代碼中使用令牌。

如需詳細資訊，請參閱 設定 App Services 應用程式的 Microsoft Entra 驗證。

啟用後端應用程式的驗證和授權

1. 在 [Azure 入口網站] 功能選單中，選取 [資源群組] 或搜尋 ，然後從任何頁面選取 [資源群組]。

2. 在 [資源群組] 中，尋找並選取資源群組。 在 [概觀] 中，選取您的後端應用程式。

3. 在後端應用程式的左側功能表中，選取 [ 驗證]，然後選取 [ 新增識別提供者]。

4. 在 [新增識別提供者] 頁面中，選取 [Microsoft] 作為 [識別提供者] 以登入 Microsoft 和 Microsoft Entra 身分識別。

5. 接受預設設定，然後選取 [ 新增]。

   

6. [ 驗證] 頁面隨即開啟。 將 Microsoft Entra 應用程式的用戶端識別碼 複製到記事本。 您稍後需要此值。

   

如果您在此停止，您有一個已受到App Service 驗證和授權保護的獨立應用程式。 其餘各節說明如何透過將已驗證的使用者從前端「流動」到後端來保護多應用程序解決方案。

啟用前端應用程式的驗證和授權

1. 在 [Azure 入口網站] 功能選單中，選取 [資源群組] 或搜尋 ，然後從任何頁面選取 [資源群組]。

2. 在 [資源群組] 中，尋找並選取資源群組。 在 [ 概觀] 中，選取前端應用程式的管理頁面。

3. 在前端應用程式的左側功能表中，選取 [ 驗證]，然後選取 [ 新增識別提供者]。

4. 在 [新增識別提供者] 頁面中，選取 [Microsoft] 作為 [識別提供者] 以登入 Microsoft 和 Microsoft Entra 身分識別。

5. 接受預設設定，然後選取 [ 新增]。

6. [ 驗證] 頁面隨即開啟。 將 Microsoft Entra 應用程式的用戶端識別碼 複製到記事本。 您稍後需要此值。

將前端應用程式存取權授與後端

既然您已啟用這兩個應用程式的驗證和授權，每個應用程式都由AD應用程式支援。 若要完成驗證，您需要執行三件事：

• 將前端應用程式存取權授與後端應用程式
• 設定 App Service 以傳回可使用的令牌
• 在您的程式代碼中使用令牌。

提示

如果您遇到錯誤並重新設定應用程式的驗證/授權設定，令牌存放區中的令牌可能無法從新的設定重新產生。 若要確定您的令牌已重新產生，您必須註銷並重新登入您的應用程式。 最簡單的方法是在私人模式中使用瀏覽器，並在變更應用程式中的設定之後，以私人模式關閉並重新開啟瀏覽器。

在此步驟中，您會 代表使用者將後端應用程式的存取權授與前端應用程式 。 （技術上，您會提供前端的 AD 應用程式 代表使用者存取後端 AD 應用程式 的許可權。

1. 在前端應用程式的 [驗證] 頁面中，選取 [識別提供者] 底下的前端應用程式名稱。 系統會自動為您產生此應用程式註冊。 選取 左側功能表中的 [API 許可權 ]。

2. 選取 [新增許可權]，然後選取 [我的 API><後端應用程式名稱]。>

3. 在後端應用程式的 [要求 API 許可權] 頁面中，選取 [委派的許可權] 並user_impersonation，然後選取 [新增許可權]。

   

設定 App Service，以傳回可使用的存取權杖

前端應用程式現在具有存取後端應用程式作為登入使用者的必要許可權。 在此步驟中，您會設定 App Service 驗證和授權，以提供存取後端的可用存取令牌。 在此步驟中，您需要後端的用戶端識別碼，而此標識碼是從啟用後端應用程式的驗證和授權複製而來。

在 Cloud Shell 中，在前端應用程式上執行下列命令，將 參數新增 scope 至驗證設定 identityProviders.azureActiveDirectory.login.loginParameters。 取代 front-end-app-name> 和 <back-end-client-id。<>

az extension add --name authV2
authSettings=$(az webapp auth show -g myAuthResourceGroup -n <front-end-app-name>)
authSettings=$(echo "$authSettings" | jq '.properties' | jq '.identityProviders.azureActiveDirectory.login += {"loginParameters":["scope=openid offline_access api://<back-end-client-id>/user_impersonation"]}')
az webapp auth set --resource-group myAuthResourceGroup --name <front-end-app-name> --body "$authSettings"

命令會有效地新增 loginParameters 具有其他自定義範圍的屬性。 以下是所要求範圍的說明：

• openid 根據預設，App Service 已要求 。 如需詳細資訊，請參閱 OpenID 連線 範圍。
• 為了方便起見，這裡會包含offline_access（如果您想要重新整理令牌）。
• api://<back-end-client-id>/user_impersonation 是後端應用程式註冊中公開的 API。 這是提供您 JWT 令牌的範圍，其中包含後端應用程式作為 令牌物件。

提示

• 若要在 Azure 入口網站 中檢視api://<back-end-client-id>/user_impersonation範圍，請移至後端應用程式的 [驗證] 頁面，按兩下 [識別提供者] 底下的連結，然後按下左側功能表中的 [公開 API]。
• 若要改為使用 Web 介面設定必要的範圍，請參閱重新整理驗證令牌中的 Microsoft 步驟。
• 某些範圍需要管理員或使用者同意。 當使用者在瀏覽器中登入前端應用程式時，這項需求會導致顯示同意要求頁面。 若要避免此同意頁面，請在 [公開 API] 頁面中，按兩下 [新增用戶端應用程式]，並提供前端應用程式註冊的用戶端識別碼，將前端的應用程式註冊新增為授權用戶端應用程式。

您的應用程式現在已設定。 前端現在已準備好使用適當的存取令牌來存取後端。

如需如何設定其他提供者存取令牌的資訊，請參閱 重新整理識別提供者令牌。

6.將後端 App Service 設定為只接受來自前端 App Service 的令牌

您也應該將後端 App Service 設定為只接受來自前端 App Service 的令牌。 當您將令牌從前端傳遞至後端時，不這樣做可能會導致「403：禁止錯誤」。

您可以透過您在上一個步驟中使用的相同 Azure CLI 程式來設定此設定。

1. appId取得前端 App Service 的 （您可以在前端 App Service 的 [驗證] 刀鋒視窗上取得此專案。

2. 執行下列 Azure CLI，取代 <back-end-app-name> 與 <front-end-app-id>。

authSettings=$(az webapp auth show -g myAuthResourceGroup -n <back-end-app-name>)
authSettings=$(echo "$authSettings" | jq '.properties' | jq '.identityProviders.azureActiveDirectory.validation.defaultAuthorizationPolicy.allowedApplications += ["<front-end-app-id>"]')
az webapp auth set --resource-group myAuthResourceGroup --name <back-end-app-name> --body "$authSettings"

authSettings=$(az webapp auth show -g myAuthResourceGroup  -n <back-end-app-name>)
authSettings=$(echo "$authSettings" | jq '.properties' | jq '.identityProviders.azureActiveDirectory.validation.jwtClaimChecks += { "allowedClientApplications": ["<front-end-app-id>"]}')
az webapp auth set --resource-group myAuthResourceGroup --name <back-end-app-name> --body "$authSettings"

7. 前端會呼叫已驗證的後端

前端應用程式必須以正確的 user_impersonation 範圍將使用者的驗證傳遞至後端。 下列步驟會檢閱此功能範例中提供的程序代碼。

檢視前端應用程式的原始碼：

1. 使用前端 App Service 插入 x-ms-token-aad-access-token 標頭，以程式設計方式取得使用者的 accessToken。

   // ./src/server.js
   const accessToken = req.headers['x-ms-token-aad-access-token'];
   

2. 使用標頭中的 Authentication accessToken 作為 bearerToken 值。

   // ./src/remoteProfile.js
   // Get profile from backend
   const response = await fetch(remoteUrl, {
       cache: "no-store", // no caching -- for demo purposes only
       method: 'GET',
       headers: {
           'Authorization': `Bearer ${accessToken}`
       }
   });
   if (response.ok) {
       const { profile } = await response.json();
       console.log(`profile: ${profile}`);
   } else {
       // error handling
   }
   

   本教學課程會傳 回假 配置檔，以簡化案例。 本 系列中的下一個教學課程 示範如何使用 Microsoft Graph 等下游 Azure 服務的範圍，交換後端持有人Token 作為新令牌。

7.後端會將配置檔傳回前端

如果前端的要求未獲得授權，後端 App Service 會在要求到達應用程式程式代碼之前，以 401 HTTP 錯誤碼拒絕要求。 到達後端程序代碼時（因為它包含已授權的令牌），請擷取 bearerToken 以取得 accessToken。

檢視後端應用程式的原始碼：

// ./src/server.js
const bearerToken = req.headers['Authorization'] || req.headers['authorization'];

if (bearerToken) {
    const accessToken = bearerToken.split(' ')[1];
    console.log(`backend server.js accessToken: ${!!accessToken ? 'found' : 'not found'}`);

    // TODO: get profile from Graph API
    // provided in next article in this series
    // return await getProfileFromMicrosoftGraph(accessToken)

    // return fake profile for this tutorial
    return {
        "displayName": "John Doe",
        "withAuthentication": !!accessToken ? true : false
    }
}

8.瀏覽至應用程式

1. 在瀏覽器中使用前端網站。 URL 格式 https://<front-end-app-name>.azurewebsites.net/為 。

2. 瀏覽器會向 Web 應用程式要求驗證。 完成驗證。

   

3. 驗證完成後，前端應用程式會傳回應用程式的首頁。

   

4. 選取 Get user's profile。 這會將持有人令牌中的驗證傳遞至後端。

5. 後端會以 假 硬式編碼配置檔名稱回應： John Doe。

   

   true 的值表示已設定驗證。withAuthentication

9. 清除資源

在上述步驟中，您已建立資源群組中的 Azure 資源。

1. 在 Cloud Shell 中執行下列命令，以刪除資源群組。 此命令可能會花一分鐘執行。

   az group delete --name myAuthResourceGroup
   

2. 使用驗證應用程式的 用戶端識別碼，您先前已找到並記下 Enable authentication and authorization 後端和前端應用程式的各節。

3. 刪除前端和後端應用程式的應用程式註冊。

   # delete app - do this for both frontend and backend client ids
   az ad app delete <client-id>
   

常見問題集

如何? 本機開發計算機上測試此驗證嗎？

此程式中的驗證會透過 Azure App 服務 在裝載平臺層提供。 沒有對等的模擬器。 您必須為每個應用程式部署前端和後端應用程式和組態驗證，才能使用驗證。

應用程式未顯示 假 配置檔，如何進行偵錯？

當此應用程式未傳回假配置檔時，前端和後端應用程式都有/debug路由來協助偵錯驗證。 前端偵錯路由提供要驗證的重要部分：

• 環境變數：
  • BACKEND_URL已正確設定為 https://<back-end-app-name>.azurewebsites.net。 請勿包含尾端正斜線或路線。
• HTTP 標頭：
  • 會 x-ms-token-* 插入標頭。
• 會顯示登入使用者的 Microsoft Graph 設定檔名稱。
• 權杖的 前端應用程式範圍 具有 user_impersonation。 如果您的範圍不包含此專案，可能是計時問題。 在 Azure 資源中確認前端應用程式login的參數。 等候幾分鐘的時間進行驗證的複寫。

應用程式原始碼是否已正確部署到每個 Web 應用程式？

1. 在 Web 應用程式的 Azure 入口網站 中，選取 [開發工具 -> 進階工具]，然後選取 [移至]。> 這會開啟新的瀏覽器索引標籤或視窗。

2. 在新的瀏覽器索引標籤中，選取 [ 瀏覽目錄 -> 網站 wwwroot]。

3. 確認下列內容位於 目錄中：

   • package.json
   • node_modules.tar.gz
   • /src/index.js

4. 確認package.json的 name 屬性與 Web 名稱相同，或 frontendbackend。

5. 如果您變更了原始程式碼，而且需要重新部署，請從具有該應用程式package.json檔案的目錄中，使用 az webapp up 。

應用程式是否已正確啟動

當要求首頁時，這兩個 Web 應用程式都應該傳回一些內容。 如果您無法連線 /debug 到 Web 應用程式，應用程式未正確啟動。 檢閱該 Web 應用程式的錯誤記錄檔。

1. 在 Web 應用程式的 Azure 入口網站 中，選取 [開發工具 -> 進階工具]，然後選取 [移至]。> 這會開啟新的瀏覽器索引標籤或視窗。
2. 在新的瀏覽器索引標籤中，選取 [ 瀏覽目錄 -> 部署記錄]。
3. 檢閱每個記錄檔，以找出任何回報的問題。

前端應用程式是否能夠與後端應用程式交談？

因為前端應用程式會從伺服器原始程式碼呼叫後端應用程式，因此這不是您在瀏覽器網路流量中看到的內容。 使用下列清單來判斷後端設定檔要求成功：

• 如果已連線到後端 Web 應用程式，後端 Web 應用程式會將任何錯誤傳回前端應用程式。 如果尚未連線到，前端應用程式會報告狀態代碼和訊息。
  • 401：使用者未正確傳遞驗證。 這表示範圍未正確設定。
  • 404：伺服器的 URL 不符合伺服器擁有的路由
• 當您提出使用者設定檔的前端要求時，請使用後端應用程式的串流記錄來監看。 原始程式碼 console.log 中有偵錯資訊，可協助判斷失敗發生的位置。

前端令牌到期時會發生什麼事？

您的存取令牌會在一段時間後到期。 如需如何重新整理存取令牌，而不需要使用者重新驗證您的應用程式的相關信息，請參閱 重新整理識別提供者令牌。

下一步

您已了解如何︰

• 啟用內建驗證和授權
• 針對未經驗證的要求保護應用程式
• 使用 Microsoft Entra 識別碼作為識別提供者
• 代表登入的使用者存取遠端應用程式
• 使用令牌驗證保護服務對服務呼叫
• 使用伺服器程式代碼的存取令牌
• 使用來自用戶端 （瀏覽器） 程式代碼的存取令牌

請前進到下一個教學課程，瞭解如何使用此使用者的身分識別來存取 Azure 服務。

 在 Azure App 服務 中建立安全的多層式應用程式