練習 - 設定驗證提供者與存取權

4 分鐘

您的購物清單 Web 應用程式必須安全地存取某些路由，並停用特定的驗證提供者。在此練習中，您將更新 Web 應用程式的路由設定，以完成此結果。

在此練習中，您將完成下列步驟：

將規則新增至路由設定，以停用某些驗證提供者。
保護產品清單，只讓經過驗證的使用者存取。
部署已更新的應用程式。
測試限制是否有效。

停用驗證提供者

我們將更新應用程式的路由設定，以停用 Microsoft Entra 驗證提供者。

在 Visual Studio Code 中開啟專案。

開啟下列檔案。

angular-app/staticwebapp.config.json

react-app/staticwebapp.config.json

svelte-app/staticwebapp.config.json

vue-app/staticwebapp.config.json

在 JSON 物件的根目錄中，新增下列路由設定。
```
"routes": [
  {
    "route": "/.auth/login/aad",
    "statusCode": 404
  }
]
```
新增這項路由規則，能讓我們防止使用者存取 Microsoft Entra 驗證提供者。

保護產品清單存取權

接下來，我們想要保護產品清單，所以只讓經過驗證的使用者存取 API。為此，我們將在 staticwebapp.config.json 設定檔中新增另一個路由規則。

在 routes 陣列的頂端新增下列規則。

{
  "route": "/api/products/*",
  "allowedRoles": ["authenticated"]
},

您完成的 staticwebapp.config.json 檔案看起來應該與下列範例相同：

{
  "routes": [
    {
      "route": "/api/products/*",
      "allowedRoles": ["authenticated"]
    },
    {
      "route": "/.auth/login/aad",
      "statusCode": 404
    }
  ],
  "navigationFallback": {
    "rewrite": "/index.html",
    "exclude": ["*.{css,scss,js,png,gif,ico,jpg,svg}"]
  }
}

部署您的變更

在測試這項設定的結果之前，我們會重新部署應用程式。

在 Visual Studio Code 中，按 F1 開啟命令選擇區。
進入並選取 [Git: 全部認可]。
輸入認可訊息 Secure access，然後按 Enter。
按 F1 開啟命令選擇區。
進入並選取 [Git: 推送]，然後按 Enter。

推送您的變更之後，請等候組建與部署處理序開始執行。執行之後，應該可以在已部署應用程式上看到這些變更。

測試新的限制

重新部署應用程式之後，您可以測試新的限制是否有效。

在 Visual Studio Code [總管] 視窗中，返回 [Static Web Apps] 區段，接著以滑鼠右鍵按一下 my-static-web-app-and-authn，然後選取 [瀏覽網站] 以在瀏覽器中檢視應用程式。
若未登入，您應該會看到未經授權訊息，而非產品清單。
在驗證提供者清單中選取 [Microsoft Entra ID] 以登入。

您應該會看到 404 錯誤頁面，如下所示：
按下瀏覽器的 [上一頁] 按鈕返回應用程式。
在驗證提供者清單中選取 [GitHub] 以登入。
在出現提示時，輸入 GitHub 認證，然後在 Azure 同意頁面上選取 [授與同意]。

您現在已登入，應該會看到產品清單。

下一步

恭喜！您已在靜態 Web 應用程式中實作完整的驗證工作流程！

練習 - 設定驗證提供者與存取權

停用驗證提供者

保護產品清單存取權

部署您的變更

測試新的限制

下一步

意見反應