Google OAuth2.0认证后跳转至Microsoft异常链接问题咨询

异常链接解析 #

这个https://login.microsoftonline.com/common/oauth2/v2.0/undefined是微软Azure AD的OAuth 2.0授权端点的无效路径，末尾的undefined说明跳转逻辑中redirect_uri参数未被正确赋值，导致拼接出了无效URL。

跳转异常原因 #

1. react-oauth/google自动处理逻辑失效：你依赖库自动生成redirect_uri，但Azure静态Web应用的内置认证服务（Easy Auth）会在前端注入环境变量或脚本，干扰了库对当前页面origin的识别，导致它无法正确获取预设的回调地址，最终拼接出错误路径。
2. 潜在的认证配置冲突：如果你的静态Web应用意外开启了Azure AD身份提供商（哪怕你只配置了Google），Azure会优先触发自身的认证流程，而非Google OAuth，进而跳转到Azure AD的授权端点。

底层机制说明 #

• react-oauth/google默认从当前页面的window.location.origin或URL自动生成redirect_uri，但Azure静态Web Apps的内置认证会修改前端环境，比如注入相关环境变量，导致库误读配置，触发错误的认证流程。
• Azure的.auth端点是App Service Authentication（Easy Auth）的内置路径，负责处理OAuth回调、令牌交换。静态Web应用和函数应用的.auth配置是独立的，即便共用同一个Google Client ID，也需要各自在Google Cloud Console和Azure门户中匹配回调地址。

配置与测试建议 #

1. 手动指定redirect_uri #

在react-oauth/google的登录组件中显式设置回调地址，避免自动识别出错：

<GoogleLogin
  clientId="YOUR_GOOGLE_CLIENT_ID"
  redirectUri="https://icy-..-0--f03.5.azurestaticapps.net/.auth/login/google/callback"
  scope="openid email profile"
  // 其他业务参数
/>

2. 检查静态Web应用认证配置 #

登录Azure门户，进入你的静态Web应用→「认证」选项：

• 确保仅启用Google身份提供商，无多余的Azure AD配置；
• 验证Google提供商的回调地址与Google Cloud Console中配置的https://icy-..-0--f03.5.azurestaticapps.net/.auth/login/google/callback完全一致。

3. 函数应用独立测试方案 #

Postman测试

使用OAuth 2.0授权码流程配置：

• 授权URL：https://accounts.google.com/o/oauth2/v2/auth
• 令牌URL：https://oauth2.googleapis.com/token
• Client ID/Secret：你的Google OAuth客户端ID和密钥
• 回调URL：https://oauth.pstmn.io/v1/callback（已在你的Redirect URIs中配置）
• 范围：openid email profile（按需添加函数所需的其他权限）
  获取令牌后，在请求头中携带Authorization: Bearer <你的ID令牌>访问函数。

函数应用「代码+测试」功能

从已登录的静态Web应用中，在浏览器开发者工具的localStorage或sessionStorage中找到Google的ID令牌，复制后在测试界面的请求头中添加Authorization: Bearer <令牌>，即可发起测试请求。

4. 跨域配置 #

在函数应用的Azure门户→「CORS」选项中，添加静态Web应用的域名：

• https://icy-..-0--f03.5.azurestaticapps.net
• http://localhost:3000
  确保静态Web应用登录后能带着令牌跨域访问函数。

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