在云原生开发与静态网站日益普及的今天，如何安全地在GitHub Pages前端调用受保护的Azure Functions后端，成为许多开发者关注的焦点。微软近日发布的实践指南中，详细阐述了如何利用Microsoft Entra ID（原Azure Active Directory）为托管在GitHub Pages上的静态应用提供安全的Azure Functions访问控制。这一方案将身份认证、授权与无服务器架构无缝衔接，为开发者提供了零成本、高安全性的企业级身份管理能力。

现状与挑战：静态网站调用API的安全缺口

GitHub Pages作为流行的静态网站托管服务，适合承载文档、博客或单页应用（SPA）。其原生不支持服务器端运行时，因此调用Azure Functions等后端API时，必须在前端代码中直接暴露API密钥或使用共享访问签名（SAS）令牌——这些做法存在明显安全风险：凭据可能被浏览器抓取、嵌入客户端代码时无法轮换、难以实现细粒度权限控制。

传统解决方案如函数级身份验证（Function-level auth）需要函数应用自带认证中间件，但静态前端无服务器端可协助处理OAuth流程。微软Entra ID的介入，恰好弥补了这一空白：通过OAuth 2.0授权码流或隐式流，前端应用可以直接从Entra ID获取访问令牌，而无需暴露长期密钥。

方案核心：Entra ID应用注册与令牌交换

要实现“GitHub Pages + Azure Functions + Entra ID”三者的安全集成，核心步骤分为三部分：

1. 在Entra ID中注册两个应用
首先，你需要为前端（GitHub Pages）和后端（Azure Functions）分别创建应用注册。前端应用需配置为“单页应用（SPA）”，允许重定向URI指向GitHub Pages的URL（例如https://yourusername.github.io）。后端应用则需暴露一个作用域（Scope），例如api://<backend-app-id>/access_as_user，并允许前端应用的客户端ID通过API权限（API permissions）访问该作用域。

2. 为Azure Functions启用Microsoft Entra身份验证
在Azure门户中打开函数应用的“身份验证”设置，选择“Microsoft Entra ID”作为身份提供者。在此处填写刚才创建的后端应用的应用ID、发型者URL（通常为https://login.microsoftonline.com/{tenant-id}/v2.0）以及所需受众（audience）。配置完成后，所有进入函数的HTTP请求必须携带有效访问令牌，否则返回401未授权。

3. 在GitHub Pages前端实现令牌获取逻辑
前端代码需要集成Microsoft Authentication Library (MSAL.js) 2.0。通过@azure/msal-browser库初始化公共客户端应用，指定前端应用的客户端ID和租户ID。当用户访问页面或点击调用API的按钮时，调用loginRedirect或acquireTokenSilent获取令牌，并将其作为Authorization: Bearer标头发送到Azure Functions端点。

关键适配点：由于GitHub Pages仅提供静态文件，无法存储刷新令牌或秘密，因此必须使用PKCE（Proof Key for Code Exchange）增强授权码流，确保令牌交换过程安全。MSAL.js默认支持此模式，开发者只需确认重定向URI配置正确。

实战案例：从零启用的完整流程

以个人博客为例，假设你想在博客中添加一个“访问计数”功能，调用Azure Functions查询数据库。按照上述方案，整个操作步骤如下：

  • 创建GitHub Pages仓库，上传包含前端界面和MSAL.js初始化的HTML/JS文件。
  • 在Azure Functions中创建HTTP触发器函数（例如GetCount），并将其“身份验证”级别调整为“匿名但要求令牌”？实际上，配置Entra后，函数会自动检查令牌，无需手动编写验证代码。
  • 在函数代码中，可以使用ClaimsPrincipal对象提取用户身份信息（如用户ID、名称），实现基于用户的个性化计数。
  • 本地测试：使用az login获取令牌后，通过Postman或Curl验证函数响应。正式部署后，用户访问GitHub Pages网页时，系统会弹出Microsoft登录窗口（若未登录），授权后无缝调用函数。

注意事项与最佳实践

尽管方案简洁，但开发者在实施时需留意以下几点：

  • CORS配置：Azure Functions需允许GitHub Pages域名发起跨域请求。在Functions的CORS设置中添加https://yourusername.github.io，否则浏览器会拦截响应。
  • 令牌有效期：默认令牌有效期1小时，前端应通过acquireTokenSilent静默刷新，避免用户频繁重定向登录。若刷新失败（例如用户更改密码），可降级为弹出式登录。
  • 托管位置：若GitHub Pages使用自定义域名（而非*.github.io），需在Entra ID的应用注册中正确配置重定向URI为自定义域。
  • 付费与配额：Microsoft Entra ID免费层支持SPA场景，但租户数、应用注册数量有限制（默认250个）。对于高流量场景，注意函数执行计费和令牌请求限流。

行业意义与展望

这一方案不仅解决了GitHub Pages开发者的燃眉之急，更标志着微软将Entra ID作为无服务器生态的“统一身份网关”——无论是Azure Functions、静态Web Apps还是其他服务，均可通过标准OIDC协议接入同一套身份体系。对于企业级用户而言，这意味着可以将内部员工或外部客户的现有Microsoft 365身份直接用于GitHub Pages应用，免去单独搭建认证服务器的高昂成本。

未来，随着Entra ID推出自定义声明映射、条件访问策略等高级功能，开发者甚至可以在静态网站上实现基于地理位置、设备状态等动态访问控制——而这一切，仅需几十行前端代码配置即可完成。微软的这份实践指南，无疑为GitHub Pages与Azure Functions的结合开启了一扇新的安全之门。