在Google Apps Script中部署网站版Google Sign-In遇授权问题求助

阿华AIGC实验室

2026-5-12

解决Google Apps Script Web应用集成Google Sign-In的OAuth授权问题

Hey，根据你描述的问题，核心矛盾在于Google Apps Script Web应用的URL带路径，但OAuth 2.0客户端ID的JavaScript授权源不允许包含路径，再加上你没找对回调URL的设置位置，导致授权失败。下面是详细的解决方案：

1. 先搞懂核心限制

Google Apps Script Web应用的URL格式是https://script.google.com/a/[domain]/macros/s/[id]/exec，但OAuth客户端ID的Authorized JavaScript origins只能填写根域名（也就是https://script.google.com），绝对不能加后面的路径部分——这是Google OAuth规则的硬性要求，你之前填带路径的地址肯定会报错。

2. 正确配置OAuth客户端ID（关键步骤）

你需要在和Apps Script项目绑定的Google Cloud控制台里配置凭据，别找错地方了：

打开Cloud Console，找到你的Apps Script对应的云项目（如果不知道怎么关联，在Apps Script编辑器里点「项目设置」→「显示云项目编号」，然后去Cloud Console搜这个编号）
进入「API和服务」→「凭据」页面
点击「创建凭据」→「OAuth客户端ID」，选择Web应用类型（这一步很重要，只有Web应用类型才会显示回调URL设置项）
- Authorized JavaScript origins：只填https://script.google.com，不要加任何路径
- Authorized redirect URIs：添加https://script.google.com/macros/d/[你的脚本ID]/usercallback——这里的脚本ID是你Apps Script项目的ID（在项目设置里能看到），不要用Web应用的exec路径

3. 调整你的前端代码并添加后端验证

你的现有前端代码可以保留大部分，但要确保用的是你刚创建的OAuth客户端ID，另外建议加上后端验证（避免前端伪造身份）：

前端HTML代码（嵌入在Apps Script的`doGet`函数里）

<html lang="en">
<head>
<meta name="google-signin-scope" content="profile email">
<meta name="google-signin-client_id" content="你的OAuth客户端ID.apps.googleusercontent.com">
<script src="https://apis.google.com/js/platform.js" async defer></script>
</head>
<body>
<div class="g-signin2" data-onsuccess="onSignIn" data-theme="dark"></div>
<script>
function onSignIn(googleUser) {
  // 打印用户基本信息（仅供调试，别直接把ID发去服务器）
  var profile = googleUser.getBasicProfile();
  console.log("ID: " + profile.getId()); 
  console.log('Full Name: ' + profile.getName());
  console.log('Given Name: ' + profile.getGivenName());
  console.log('Family Name: ' + profile.getFamilyName());
  console.log("Image URL: " + profile.getImageUrl());
  console.log("Email: " + profile.getEmail());
  
  // 获取需要传给后端验证的ID Token
  var id_token = googleUser.getAuthResponse().id_token;
  console.log("ID Token: " + id_token);
  
  // 把ID Token发送到Apps Script后端验证
  google.script.run.withSuccessHandler(function(response) {
    if (response.status === "success") {
      alert("登录成功！欢迎 " + response.user.name);
    } else {
      alert("登录失败：" + response.message);
    }
  }).verifyIdToken(id_token);
}
</script>
</body>
</html>

后端Apps Script代码（编辑器里的`.gs`文件）

function doGet() {
  return HtmlService.createHtmlOutputFromFile('index'); // 假设你的前端代码存在index.html文件里
}

function verifyIdToken(idToken) {
  try {
    const clientId = "你的OAuth客户端ID.apps.googleusercontent.com";
    const ticket = GoogleAuthUtil.verifyIdToken(idToken, clientId);
    const payload = ticket.getPayload();
    // 验证通过，返回用户信息
    return {status: "success", user: {
      id: payload.sub,
      name: payload.name,
      email: payload.email
    }};
  } catch (error) {
    // 验证失败，返回错误信息
    return {status: "error", message: error.toString()};
  }
}

4. 常见坑排查

找不到回调URL设置项：一定是你创建OAuth客户端ID时选错了类型，必须选「Web应用」，其他类型（比如「桌面应用」「Android」）不会显示这个选项。
部署Web应用的权限设置：部署时要把「执行权限」设为「用户访问Web应用时」，让访问者用自己的Google账号授权，别选「以我的身份执行」，否则会触发权限冲突。
缓存问题：测试前用浏览器隐身窗口打开，避免旧的OAuth配置缓存导致的错误。

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