Azure SWA模拟器本地Google登录报错：ClientId not found for 'google' provider

操作步骤 #

在Visual Studio开发者命令提示符中执行以下命令启动Azure静态Web应用模拟器：

swa start http://localhost:5152 --api-location http://localhost:7238

看到[swa] - Waiting for http://localhost:5152 to be ready提示后启动应用（可带或不带调试），在浏览器访问http://localhost:4280/，通过链接http://localhost:4280/.auth/login/google?post_login_redirect_uri=/useredit进入Google登录页面。

问题现象 #

预期可正常进入Google登录界面，但访问该链接时页面报错：ClientId not found for 'google' provider。移除staticwebapp.config.json中的Google身份提供者配置后恢复正常；测试访问错误的提供者名称链接（如gooooooogle）可正常进入模拟器。

排查信息 #

• 已尝试清除浏览器缓存、本地存储，更换浏览器，均无效
• 此前功能正常运行数周，未修改本地配置
• 多台电脑、多个项目均出现此问题，但部署到Azure后无异常，仅本地模拟器存在问题

配置文件 #

当前staticwebapp.config.json配置：

{
  "navigationFallback": {
    "rewrite": "/index.html"
  },
  "routes": [
    {
      "route": "/api/import_users",
      "allowedRoles": [ "admin" ]
    },
    {
      "route": "/api/export_users",
      "allowedRoles": [ "admin" ]
    },
    {
      "route": "/api/export_posts",
      "allowedRoles": [ "admin" ]
    },
    {
      "route": "/api/hello_protected",
      "allowedRoles": [ "authenticated" ]
    },
    {
      "route": "/api/hello_protected_admin",
      "allowedRoles": [ "admin" ]
    },
    {
      "route": "/api/hello_protected_superadmin",
      "allowedRoles": [ "authenticated" ]
    }
  ],
  "auth": {
    "rolesSource": "/api/roles",
    "identityProviders": {
      "google": {
        "registration": {
          "clientIdSettingName": "GOOGLE_CLIENT_ID",
          "clientSecretSettingName": "GOOGLE_CLIENT_SECRET"
        }
      }
    }
  }
}

解决方法 #

1. 配置本地环境变量
   模拟器需要读取GOOGLE_CLIENT_ID和GOOGLE_CLIENT_SECRET环境变量，确保变量已正确设置：

   • Windows命令提示符：

     set GOOGLE_CLIENT_ID=你的Google客户端ID
     set GOOGLE_CLIENT_SECRET=你的Google客户端密钥
     swa start http://localhost:5152 --api-location http://localhost:7238
     

   • macOS/Linux终端：

     export GOOGLE_CLIENT_ID=你的Google客户端ID
     export GOOGLE_CLIENT_SECRET=你的Google客户端密钥
     swa start http://localhost:5152 --api-location http://localhost:7238
     

2. 使用.env文件管理变量
   在项目根目录创建.env文件，写入：

   GOOGLE_CLIENT_ID=你的Google客户端ID
   GOOGLE_CLIENT_SECRET=你的Google客户端密钥
   

   启动模拟器时指定环境文件：

   swa start http://localhost:5152 --api-location http://localhost:7238 --env .env
   

3. 更新SWA CLI到最新版本
   该问题可能是CLI版本bug，执行更新命令：

   npm install -g @azure/static-web-apps-cli
   

4. 核对配置文件参数
   确认staticwebapp.config.json中clientIdSettingName和clientSecretSettingName与环境变量名称完全一致，注意大小写匹配。

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