如何启动OAuth2.0流程？Chrome扩展中向Google OAuth2.0端点发起授权POST请求

核心错误点 #

• 你用POST请求Google OAuth 2.0授权端点的行为完全不符合隐式流的要求：Google的/o/oauth2/v2/auth授权端点要求用户通过浏览器主动跳转/弹窗访问该地址完成授权，不支持后台通过AJAX（你用的axios）发起POST请求获取授权页。你拿到的200响应本质是Google返回的授权页面的HTML代码，只是被axios当成普通响应接收了，自然不会弹出授权提示。
• Chrome扩展场景下不建议使用普通的HTTP重定向/外链跳转作为redirect_uri，应该使用Chrome扩展自带的chrome.identityAPI完成OAuth流程，避免跨域、权限限制问题。

正确实现步骤 #

1. 首先在你的扩展manifest.json中声明identity权限，同时配置你的OAuth client_id的授权白名单为Chrome扩展的地址：

{
  "permissions": ["identity"],
  "oauth2": {
    "client_id": "你的实际Google Client ID",
    "scopes": ["https://www.googleapis.com/auth/drive.metadata.readonly"]
  }
}

2. 替换你现在的axios POST代码，直接使用chrome.identity.launchWebAuthFlow方法拉起授权页：

// background.js 内实现
const authUrl = new URL("https://accounts.google.com/o/oauth2/v2/auth");
authUrl.searchParams.set("client_id", "你的实际Client ID");
authUrl.searchParams.set("response_type", "token");
authUrl.searchParams.set("redirect_uri", chrome.identity.getRedirectURL());
authUrl.searchParams.set("scope", "https://www.googleapis.com/auth/drive.metadata.readonly");
authUrl.searchParams.set("include_granted_scopes", "true");
authUrl.searchParams.set("state", "state_parameter_passthrough_value");

chrome.identity.launchWebAuthFlow({
  url: authUrl.href,
  interactive: true
}, (redirectUri) => {
  // 授权完成后回调，从redirectUri中提取access_token即可
  if (chrome.runtime.lastError || !redirectUri) {
    console.error("授权失败", chrome.runtime.lastError);
    return;
  }
  const urlParams = new URLSearchParams(redirectUri.split("#")[1]);
  const accessToken = urlParams.get("access_token");
  console.log("拿到的访问令牌：", accessToken);
  // 后续用accessToken调用Google接口即可
});

注意事项 #

• 你之前用的https://oauth2.example.com/code作为redirect_uri在Chrome扩展场景下不需要，直接调用chrome.identity.getRedirectURL()获取扩展专属的回调地址即可，同时要把这个地址添加到你Google Cloud控制台中OAuth客户端ID的授权重定向URI列表里。
• 不需要在popup里跳转，直接调用background的逻辑用chrome提供的身份验证API拉起弹窗即可，不会触发扩展页面关闭的问题。

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