练习 - 配置身份验证提供程序和访问权限

你的购物列表 Web 应用需要保护对某些路由的访问，并禁用特定身份验证提供程序。 在此练习中，你将更新 Web 应用的路由配置以实现此结果。

在本练习中，你将完成以下步骤：

1. 向路由配置添加规则以禁用某些身份验证提供程序。
2. 保护产品列表，只允许经过身份验证的用户访问该列表。
3. 部署已更新的应用。
4. 测试限制是否有效。

禁用身份验证提供程序

我们将更新应用的路由配置，以禁用 Microsoft Entra 验证提供程序。

1. 在 Visual Studio Code 中打开项目。

2. 打开以下文件。

   angular-app/staticwebapp.config.json
   

   react-app/staticwebapp.config.json
   

   svelte-app/staticwebapp.config.json
   

   vue-app/staticwebapp.config.json
   

3. 在 JSON 对象的根目录下，添加以下路由配置。

   "routes": [
     {
       "route": "/.auth/login/aad",
       "statusCode": 404
     }
   ]
   

   通过添加此传递规则，我们将阻止用户访问 Microsoft Entra 验证提供程序。

保护对产品列表的访问

接下来，我们想要保护产品列表，确保只有经过身份验证的用户才能访问 API。 为此，我们将在 staticwebapp.config.json 配置文件中添加另一个路由规则。

1. 在 routes 数组的顶部，添加以下规则。

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

2. 完成的 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}"]
     }
   }
   

部署所做的更改

在测试此配置结果之前，我们将重新部署应用。

1. 在 Visual Studio Code 中，按 F1 打开命令面板。

2. 输入并选择“Git: 全部提交”。

3. 输入 Secure access 作为提交消息，然后按 Enter。

4. 按 F1 打开命令面板。

5. 输入并选择“Git: 推送”，然后按 Enter。

推送更改后，请等待生成和部署进程运行。 之后，这些更改应该会在部署的应用上可见。

测试新限制

重新部署应用后，可以测试新限制是否有效。

1. 在“Visual Studio Code 资源管理器”窗口中，返回到 Static Web Apps 部分，右键单击 my-static-web-app-and-authn，然后选择“浏览站点”以在浏览器中查看应用。

2. 如果未登录，应会看到“未经授权”消息，而不是产品列表。

3. 在验证提供程序列表中选择“Microsoft Entra”进行登录。

   你应会看到如下所示的 404 错误页面：

   

4. 按浏览器的后退按钮返回到应用。

5. 在身份验证提供程序列表中选择“GitHub”登录。

6. 根据系统提示输入 GitHub 凭据，然后在 Azure 同意页面上选择“授予同意”。

你现在已登录并应可以看到产品列表。

后续步骤

祝贺。 你已在静态 Web 应用中实现了完整的身份验证工作流！