如何修复Google Apps Script多Google账号下自定义表单回调不触发问题

现象描述 #

• 开发的自定义表单提交时需向后端发起多次请求完成身份校验
• 仅登录单个Google账号时功能运行正常
• 同时登录多个Google账号时出现异常：脚本无任何报错，仅表单提交后后端逻辑完全不执行，操作结果无法回传

现有实现代码 #

前端表单页面 #

<!DOCTYPE html>
<html>
<head>
    <base target="_top">
</head>
<body>
    <div class="container select-client">
        <div class="client">Client</div>
        <select class="client-select">
            <option>Select Client</option>
            <!-- 其他选项渲染逻辑 -->
        </select>
        <div class="market">Market</div>
        <select class="market-select">
            <option>Select Market</option>
            <!-- 其他选项渲染逻辑 -->
        </select>
        <div class="error-message"></div>
        <button class="button" id="select-button" onclick="handleSelect()">Select</button>
    </div>
    <script>
        // 用户身份校验相关逻辑
        function handleSelect() {
            var _client = clients.find(
                (client) => client.id === parseInt(selectedClient)
            );
            var _market = markets.find(
                (market) => market.id === parseInt(selectedMarkets)
            );

            if (!_client && !_market) {
                return;
            }

            if (!_client) {
                errorMessageClientMarket.innerHTML = 'Please select client';
                return;
            }

            if (!_market) {
                errorMessageClientMarket.innerHTML = 'Please select market';
                return;
            }

            google.script.run
                .withSuccessHandler()
                .loginData({ token, market: _market, client: _client, user: userInfo, platform });

            google.script.host.close();
        }
    </script>
</body>
</html>

弹窗创建代码（Google Apps Script端） #

const loginForm = () => {
  const html = HtmlService.createHtmlOutputFromFile('loginFormHtml')
    .setSandboxMode(HtmlService.SandboxMode.IFRAME)
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
    .setWidth(600)
    .setHeight(600);
  const ui = SpreadsheetApp.getUi();
  ui.showModalDialog(html, `Login`);
};

后端回调函数（多账号登录时被直接忽略） #

const loginData = (data) => {
  console.log('LOGIN FORM');
  const { token, market, user, client, platform } = data;
  UserProperties.setProperty('token', token);
  UserProperties.setProperty('userId', user.id);
  UserProperties.setProperty('clientId', client.id);
  UserProperties.setProperty('clientName', client.name);
  UserProperties.setProperty('marketId', market.id);
  UserProperties.setProperty('marketName', market.code_name);
  UserProperties.setProperty('username', `${user.first_name} ${user.last_name}`);
  UserProperties.setProperty('userEmailAddress', user.email);
  UserProperties.setProperty('platform', platform);

  const info = UserProperties.getProperties();
  console.log('info ---> ', info)

  const ui = SpreadsheetApp.getUi();
  getMenu(true);
  ui.alert('Logged in Successfully');
};

核心原因 #

多Google账号登录时，google.script.run 默认绑定浏览器当前激活的Google账号，若该账号不是当前Apps Script项目的授权账号，请求会被静默拦截，无任何报错，也不会触发后端函数。

修复步骤 #

1. 补充显式错误回调，拦截原本被吞掉的静默异常
2. 强制绑定当前Apps Script项目的合法授权账号，避免多账号上下文混乱
3. 调整弹窗关闭时机，避免异步请求未完成就被中断
4. 移除冗余的旧版兼容配置，避免iframe上下文丢失

具体代码修改 #

1. 后端新增获取合法授权账号的工具函数

const getAuthUserEmail = () => Session.getActiveUser().getEmail();

2. 前端页面初始化时预获取合法授权账号

// 页面加载时先获取当前项目的授权账号信息
let validAuthEmail = '';
google.script.run
  .withSuccessHandler((email) => validAuthEmail = email)
  .getAuthUserEmail();

3. 改造handleSelect的提交逻辑

function handleSelect() {
    // 原有客户端、市场校验逻辑保持不变
    var _client = clients.find(
        (client) => client.id === parseInt(selectedClient)
    );
    var _market = markets.find(
        (market) => market.id === parseInt(selectedMarkets)
    );

    if (!_client && !_market) return;
    if (!_client) {
        errorMessageClientMarket.innerHTML = 'Please select client';
        return;
    }
    if (!_market) {
        errorMessageClientMarket.innerHTML = 'Please select market';
        return;
    }

    // 替换原提交逻辑
    google.script.run
        .withSuccessHandler(() => google.script.host.close()) // 后端执行成功后再关闭弹窗
        .withFailureHandler((err) => console.error('提交失败：', err)) // 新增错误回调，暴露静默异常
        .withUserObject(validAuthEmail) // 绑定合法授权账号，避免默认使用非授权的激活账号提交
        .loginData({ token, market: _market, client: _client, user: userInfo, platform });
}

4. 简化弹窗创建代码，移除冗余配置

const loginForm = () => {
  const html = HtmlService.createHtmlOutputFromFile('loginFormHtml')
    .setWidth(600)
    .setHeight(600);
  const ui = SpreadsheetApp.getUi();
  ui.showModalDialog(html, `Login`);
};
// 原代码中的.setSandboxMode、setXFrameOptionsMode为旧版GAS兼容配置，新版默认已支持IFRAME沙箱与跨域，多余配置会导致iframe上下文丢失

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