如何使用Google Apps Script实现用户登录及谷歌表格任务更新功能

服务端核心代码（Code.gs） #

登录验证通过后，你需要将当前登录用户的唯一标识（和Sheet Data B列匹配的姓名）传递到表单页，可通过URL参数或者临时存储实现，以下是两个核心功能函数：

// 前端页面加载时调用，拉取当前用户的个人信息和已填任务数据
function getUserInfo(userName) {
  const ss = SpreadsheetApp.openById('你的表格ID，即链接中d/和/edit之间的字符串');
  const sheet = ss.getSheetByName('Sheet Data');
  const data = sheet.getDataRange().getValues();
  // 跳过表头行，遍历找匹配姓名的行
  for (let i = 1; i < data.length; i++) {
    if (data[i][1] === userName) { // B列索引为1，对应姓名
      return {
        name: data[i][1], // B列姓名
        department: data[i][2], // C列部门
        birth: data[i][3], // D列出生日期
        task1Status: data[i][4] || '', // E列任务1状态
        task1Date: data[i][5] ? data[i][5].toISOString().split('T')[0] : '', // F列任务1完成日期，转成前端日期输入可识别格式
        task2Status: data[i][6] || '', // G列任务2状态
        task2Date: data[i][7] ? data[i][7].toISOString().split('T')[0] : '', // H列任务2完成日期
        rowNum: i + 1 // 匹配到的行号，后续更新用
      }
    }
  }
  return null;
}

// 接收前端提交的更新数据，写入表格
function updateUserTask(updateData) {
  const ss = SpreadsheetApp.openById('你的表格ID');
  const sheet = ss.getSheetByName('Sheet Data');
  // 写入E到H列
  sheet.getRange(updateData.rowNum, 5).setValue(updateData.task1Status);
  sheet.getRange(updateData.rowNum, 6).setValue(updateData.task1Date ? new Date(updateData.task1Date) : '');
  sheet.getRange(updateData.rowNum, 7).setValue(updateData.task2Status);
  sheet.getRange(updateData.rowNum, 8).setValue(updateData.task2Date ? new Date(updateData.task2Date) : '');
  // I列填充当前时间戳
  sheet.getRange(updateData.rowNum, 9).setValue(new Date());
  return '更新成功';
}

前端PageForm页面代码 #

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <title>TASK UPDATE PANEL</title>
</head>
<body>
  <h2>TASK UPDATE PANEL</h2>
  <h3>个人信息</h3>
  <div>
    <p>姓名：<span id="name"></span></p>
    <p>部门：<span id="department"></span></p>
    <p>出生日期：<span id="birth"></span></p>
  </div>
  <h3>任务更新</h3>
  <form id="taskForm">
    <input type="hidden" id="rowNum" name="rowNum">
    <div>
      <label>任务1状态：</label>
      <select id="task1Status" name="task1Status" required>
        <option value="">请选择</option>
        <option value="未开始">未开始</option>
        <option value="进行中">进行中</option>
        <option value="已完成">已完成</option>
      </select>
    </div>
    <div>
      <label>任务1完成日期：</label>
      <input type="date" id="task1Date" name="task1Date">
    </div>
    <br>
    <div>
      <label>任务2状态：</label>
      <select id="task2Status" name="task2Status" required>
        <option value="">请选择</option>
        <option value="未开始">未开始</option>
        <option value="进行中">进行中</option>
        <option value="已完成">已完成</option>
      </select>
    </div>
    <div>
      <label>任务2完成日期：</label>
      <input type="date" id="task2Date" name="task2Date">
    </div>
    <br>
    <button type="submit">提交更新</button>
  </form>
  <p id="msg"></p>

  <script>
    // 从登录跳转的URL参数取当前用户名，示例：跳转地址为xxxxx?user=张三
    const userName = new URLSearchParams(window.location.search).get('user');
    // 页面加载时拉取用户信息填充页面
    window.onload = function() {
      google.script.run
        .withSuccessHandler(function(userInfo) {
          if (!userInfo) {
            document.getElementById('msg').textContent = '未找到你的用户信息，请联系管理员';
            return;
          }
          document.getElementById('name').textContent = userInfo.name;
          document.getElementById('department').textContent = userInfo.department;
          document.getElementById('birth').textContent = userInfo.birth;
          document.getElementById('rowNum').value = userInfo.rowNum;
          document.getElementById('task1Status').value = userInfo.task1Status;
          document.getElementById('task1Date').value = userInfo.task1Date;
          document.getElementById('task2Status').value = userInfo.task2Status;
          document.getElementById('task2Date').value = userInfo.task2Date;
        })
        .getUserInfo(userName);
    }

    // 表单提交逻辑
    document.getElementById('taskForm').addEventListener('submit', function(e) {
      e.preventDefault();
      const formData = new FormData(this);
      const updateData = Object.fromEntries(formData.entries());
      google.script.run
        .withSuccessHandler(function(res) {
          document.getElementById('msg').textContent = res;
        })
        .updateUserTask(updateData);
    })
  </script>
</body>
</html>

注意事项 #

• 下拉选项可根据你的实际需求调整内容
• Web App部署时需将执行身份设置为你自己（开发者），访问权限设置为所有需要使用的用户，避免权限不足导致读取/写入失败
• 登录跳转PageForm时，注意将用户名作为user参数拼接在跳转URL末尾，前端即可自动获取匹配数据

内容的提问来源于stack exchange，提问作者Nguyễn Hoài Lâm