制作Looker Studio连接器时OAuth重定向URI问题排查

问题概述 #

作为Apps Script新手，开发对接Instagram Insights、Klaviyo的Looker Studio社区连接器时，OAuth授权完成后重定向回Google出现Drive“无法打开该文件”错误，authCallback()函数从未触发，手动访问带测试code的回调URL也无效果。

1. 重定向URI是否正确？是否遗漏配置？ #

你的URI格式是正确的：https://script.google.com/macros/d/{SCRIPT_ID}/usercallback，但需确认以下关键配置：

• SCRIPT_ID正确性：确保使用的是脚本编辑器「文件>项目属性>信息」里的脚本ID，而非Web App部署ID或其他ID。
• 第三方平台配置：在Klaviyo/Instagram开发者后台，必须将该URI添加到「允许的重定向URI」列表中，否则第三方服务不会允许回调到该地址。
• 脚本部署状态：必须将脚本部署为Web App，部署时：
  • 执行权限选择「以用户身份运行」（匹配连接器的授权逻辑）
  • 访问权限选择「任何人，甚至匿名」（OAuth回调需要公开可访问）
    若未部署或部署权限错误，回调URL会直接跳转到Drive错误页面。

2. 手动访问带?code=TEST_CODE的链接后预期行为是什么？ #

正常情况下：

• 脚本执行日志中会出现authCallback() has been triggered.的记录
• 浏览器会显示authCallback()返回的HTML页面（要么是"Success! You can close this tab."，要么是"Authorization failed."）
• 若仍跳Drive错误页面，说明回调URL本身不可访问，核心原因是脚本未正确部署或权限设置错误。

3. 新手易遗漏的关键配置 #

结合你的代码，排查以下遗漏点：

• OAuth2库未添加：代码中使用了OAuth2.createService，必须在脚本中添加官方OAuth2库（库ID：1B7FSrk5Zi6L1rSxxTDgDEUsPzlukDsi4KGuTMorsTQHhGBzBkMun4iDF），否则会直接报错导致流程中断。
• getOAuthService()的重复生成问题：每次调用该函数都会重新生成PKCE挑战并覆盖code_verifier，当authCallback()调用它时，会丢失授权前存储的code_verifier，导致PKCE验证失败。需修改逻辑，仅在首次获取授权URL时生成PKCE，回调时直接从用户属性读取code_verifier。
• 全局变量未定义：代码中使用了CLIENT_ID、CLIENT_SECRET、REDIRECT_URI三个全局变量，需确保已在脚本顶部正确定义（例如：const CLIENT_ID = "你的客户端ID";），否则会导致OAuth服务初始化失败。
• State参数缺失：虽然不是回调不触发的直接原因，但建议恢复state参数的生成与验证，防止CSRF攻击，提升安全性。

代码优化建议 #

针对getOAuthService()的PKCE问题，修改如下：

function getOAuthService() {
  Logger.log("getOAuthService() has been triggered.");
  var userProperties = PropertiesService.getUserProperties();
  var service = OAuth2.createService('Klaviyo')
      .setAuthorizationBaseUrl('https://www.klaviyo.com/oauth/authorize')
      .setTokenUrl('https://a.klaviyo.com/oauth/token')
      .setClientId(CLIENT_ID)
      .setClientSecret(CLIENT_SECRET)
      .setPropertyStore(userProperties)
      .setCallbackFunction('authCallback')
      .setParam('scope','accounts:read campaigns:read')
      .setParam('response_type', 'code')
      .setParam('redirect_uri', REDIRECT_URI);

  // 仅在未授权状态下生成PKCE和state
  if (!service.hasAccess()) {
    var pkce = generatePkceChallenge();
    var state = Utilities.getUuid();
    userProperties.setProperty('oauth_state', state);
    userProperties.setProperty('code_verifier', pkce.verifier);
    service.setParam('state', state)
           .setParam('code_challenge_method', 'S256')
           .setParam('code_challenge', pkce.challenge);
    Logger.log("Stored State Before Redirect: " + state);
  }

  Logger.log(service);
  return service;
};

同时，在authCallback()中恢复state验证：

function authCallback(request) {
    Logger.log("authCallback() has been triggered.");
    Logger.log("Request parameters: " + JSON.stringify(request));

    var userProperties = PropertiesService.getUserProperties();
    var storedState = userProperties.getProperty('oauth_state') || "";
    var receivedState = request.parameter.state || "";

    // 验证state一致性，防止CSRF
    if (storedState !== receivedState) {
        Logger.log("State mismatch, possible CSRF attack.");
        return HtmlService.createHtmlOutput("Authorization failed: Invalid state.");
    }

    var service = getOAuthService();
    // 手动设置code_verifier，避免重新生成覆盖
    service.setParam('code_verifier', userProperties.getProperty('code_verifier'));
    
    var authorized = service.handleCallback(request);
    
    if (authorized) {
        Logger.log("Authorization successful.");
        // 清理临时存储的state和code_verifier
        userProperties.deleteProperty('oauth_state');
        userProperties.deleteProperty('code_verifier');
        return HtmlService.createHtmlOutput("Success! You can close this tab.");
    } else {
        Logger.log("Authorization failed.");
        return HtmlService.createHtmlOutput("Authorization failed.");
    }
}

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