Azure Container Apps Google登录与用户身份传递问题求助

基于todo-python-mongo-aca模板搭建包含前端Web应用和后端服务的基础应用。

需求目标 #

1. 支持用户通过Google登录
2. 用Google账号关联的ID访问数据库中的个人专属数据

已尝试方案 #

为保留未认证用户可访问的首页，遵循Azure容器应用文档中的「无Provider SDK流程」实现登录。

具体操作与问题 #

1. 登录流程现状 #

点击登录按钮可跳转至Google登录页（需清除浏览器缓存），登录后浏览器中可看到AppServiceAuthSession、ai_session、ai_user等Cookie。
登录按钮代码：

<BaseButton href={`/.auth/login/google?post_login_redirect_uri=/login-redirect`}>
  Login with Google redirect
</BaseButton>

2. 后端接口调用异常 #

无需用户信息的接口可正常调用，但保存用户专属数据的接口出现两个问题：

• 前端Axios设置withCredentials=true时触发CORS错误，提示Access-Control-Allow-Credentials头为空
• 后端FastAPI已配置CORSMiddleware允许凭证，但无法从请求头中获取X-MS-CLIENT-PRINCIPAL-ID，无法关联用户数据

后端配置代码：

app = FastAPI(
    description="Cnstlltn App",
    version="0.0.1",
    title="Cnstlltn App",
    docs_url="/",
)
app.add_middleware(
    CORSMiddleware,
    allow_origins=originList(),
    allow_credentials=True,
    allow_methods=["POST"],
    allow_headers=["Content-Type", "Authorization"],
    expose_headers=["*"],
)

后端接口代码：

@app.post("/save-frameworks", response_model=List[UserFramework], status_code=201)
async def save_frameworks(request: Request, saveFrameworks: List[Framework]) -> List[UserFramework]:
    user_id = request.headers.get("X-MS-CLIENT-PRINCIPAL-ID")
    results = []
    for framework in saveFrameworks:
        results.append(await UserFramework(userid=user_id, title=framework.title, content=framework.content).save())
    return results

3. Azure门户配置情况 #

• 前端容器应用：已开启认证，Ingress设置为不允许不安全连接
• 后端容器应用：未配置认证，Ingress设置与前端一致

可选方案与疑问 #

目前考虑以下方案，寻求可行性建议：

• 后端调用前端的/.auth/me接口获取用户ID？
• 切换至完整Easy Auth流程，但会失去未认证用户可访问的首页
• 使用文档中建议的SDK，但不确定该SDK是否适用于浏览器端应用

解决建议 #

针对CORS错误问题 #

1. 检查后端originList()返回的域名是否与前端实际域名完全匹配（包括协议、端口，比如https://your-frontend-domain.com，不能带结尾斜杠）
2. 确保后端CORSMiddleware的allow_headers包含Cookie，因为前端带凭证请求时会发送Cookie，需要允许该头
3. 验证Azure容器应用的Ingress是否配置了正确的CORS规则，平台层的CORS设置可能会覆盖应用内的配置

针对无法获取X-MS-CLIENT-PRINCIPAL-ID问题 #

因为后端未配置Easy Auth，请求不会经过认证中间件，自然不会添加X-MS-CLIENT-PRINCIPAL-ID头。推荐两种实现思路：

1. 前端获取用户ID后传递给后端：登录成功后，前端调用前端容器应用的/.auth/me接口（示例：fetch('/.auth/me', { credentials: 'include' })），拿到用户的user_id，调用后端接口时将该ID放在请求体或自定义请求头（如X-USER-ID）中，后端从对应位置读取即可。这种方式无需修改后端认证配置，完全保留未认证用户访问首页的需求。
2. 后端验证Cookie获取用户信息：后端接收前端传递的AppServiceAuthSession Cookie，调用前端容器的/.auth/me接口验证Cookie有效性并获取用户ID。这种方式需要处理跨域调用/.auth/me的问题，或在后端配置允许调用前端域名的CORS。

方案选择建议 #

• 优先选择前端获取用户ID后传递给后端的方案，实现简单，完全满足保留未认证首页的需求，无需修改后端认证配置，也不需要切换到强制认证模式。
• 不建议切换到完整Easy Auth强制认证，会直接拦截未认证用户请求，不符合需求。
• 文档中的SDK通常适用于后端服务或非浏览器端应用（如桌面APP），当前浏览器场景下无需使用，直接通过/.auth/me接口获取用户信息即可。

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