通过Azure Function、Auth0为Azure存储账户托管React应用实现身份认证的咨询

1. 是否可以重定向到localhost:8000 #

可以，你遇到的500错误是配置不全导致的，并非功能不支持。

2. 当前流程的问题 #

你当前的流程存在两处不合理：

• 硬编码了生产环境的redirectUri，本地运行时没有动态切换成本地回调地址
• 没有在Azure Function App的认证配置中添加本地回调地址作为允许的重定向目标，Azure的认证模块在校验回调地址时匹配失败，才会返回500错误

3. 实现思路指导 #

• 第一步：配置环境变量区分运行环境
  本地开发环境下将redirectUri设置为http://localhost:8000/.auth/login/auth0/callback，生产环境保持为Azure Function App的回调地址。可以在React项目中分别配置.env.development和.env.production两个环境变量文件，通过process.env动态读取即可。
  示例配置：

  <Auth0Provider
    domain={process.env.REACT_APP_AUTH0_DOMAIN}
    clientId={process.env.REACT_APP_AUTH0_CLIENT_ID}
    redirectUri={process.env.REACT_APP_AUTH0_REDIRECT_URI}
  >
    <Login />
  </Auth0Provider>
  

• 第二步：补充两边的白名单配置
  分别在Auth0后台的「允许回调URL」、「允许登出URL」、「允许Web源」配置项中添加本地地址http://localhost:8000；同时在Azure Function App的认证配置中，将本地回调地址添加到允许的重定向URI列表中。
• 第三步：适配Client Principal获取逻辑
  生产环境直接调用Azure提供的/.auth/me端点即可获取标准的Client Principal数据。
  本地调试可以选择两种方案：
  • 使用Azure Static Web Apps CLI工具本地模拟Azure的认证层，模拟环境会自动生成和生产一致的Client Principal结构，业务代码不需要做额外适配
  • 本地调试时在Auth0登录回调完成后，解析Auth0返回的ID Token，手动构造符合Azure Client Principal格式的结构使用，上线后自动切回调用/.auth/me的逻辑即可

内容的提问来源于stack exchange，提问作者reactinretrograde