DEV Community
·
🔐 使用C# Azure函数和认证保护Azure静态Web应用程序（SWA）
💡
原文英文，约900词，阅读约需4分钟。
📝
内容提要
本文介绍如何在Azure静态Web应用程序（SWA）中进行本地开发，包括设置SWA模拟器、使用Vite进行快速开发、通过GitHub登录实现用户认证、在C# Azure函数中处理认证数据、保护API端点以及将认证信息转发至外部API，最终构建一个完整的React + Vite + Azure SWA + C# API认证系统。
🎯
关键要点
- 本文介绍如何在Azure静态Web应用程序（SWA）中进行本地开发。
- 设置SWA模拟器以模拟Azure的认证行为。
- 使用Vite进行快速开发，创建新的React + Vite项目。
- 通过GitHub登录实现用户认证，并在React应用中添加登录/注销系统。
- 在C# Azure函数中捕获用户认证数据，解码x-ms-client-principal头部。
- 通过创建_routes.json文件限制API访问，仅允许已认证用户访问特定API。
- 将认证信息转发至外部API，使用HttpClient发送请求。
- 最终构建一个完整的React + Vite + Azure SWA + C# API认证系统。
❓
延伸问答
如何在本地设置Azure静态Web应用程序（SWA）？
可以通过安装Azure SWA模拟器并创建新的React + Vite项目来设置SWA，使用命令npm install -g @azure/static-web-apps-cli和npm create vite@latest my-swa-app --template react。
如何在Azure静态Web应用程序中实现用户认证？
可以通过GitHub登录实现用户认证，并在React应用中添加登录和注销功能，使用AuthContext管理用户状态。
如何在C# Azure函数中捕获用户认证数据？
在C# Azure函数中，可以通过解码请求头中的x-ms-client-principal来捕获用户认证数据。
如何限制API访问仅允许已认证用户？
可以通过创建_routes.json文件并指定allowedRoles为['authenticated']来限制API访问。
如何将认证信息转发至外部API？
可以在C# Azure函数中使用HttpClient将认证信息作为Authorization头部转发至外部API。
使用Vite进行快速开发的步骤是什么？
首先创建一个新的Vite项目，然后运行npm run dev启动开发服务器，确保应用可以在本地访问。
➡️
