基于Google Apps Script实现登录后跳转至筛选后的Google Sheet

整体思路 #

在Google Sites单页内嵌入Google Apps ScriptWeb应用，通过前端控制登录状态切换（登录表单/筛选后数据展示），后端验证用户身份并从Sheet筛选对应数据。

步骤1：创建Google Apps Script项目 #

1. 打开Google Drive，新建「Google Apps Script」项目
2. 替换Code.gs内容为以下后端代码：

// 替换为你的Sheet ID
const SHEET_ID = "你的Google Sheet ID";
const SHEET_NAME = "数据表格名称";

function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('Index')
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL); // 允许嵌入到Google Sites
}

// 验证用户身份并返回筛选后的数据
function getUserData(userEmail) {
  const sheet = SpreadsheetApp.openById(SHEET_ID).getSheetByName(SHEET_NAME);
  const data = sheet.getDataRange().getValues();
  // 假设Sheet第一列是用户邮箱，筛选匹配的行
  const filteredData = data.filter(row => row[0] === userEmail);
  return filteredData;
}

步骤2：创建前端页面（Index.html） #

创建新的HTML文件命名为Index，内容如下：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      .container { max-width: 800px; margin: 20px auto; padding: 0 15px; }
      .login-form { display: block; }
      .data-table { display: none; margin-top: 20px; }
      table { border-collapse: collapse; width: 100%; }
      th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
      th { background-color: #f2f2f2; }
      button { padding: 8px 16px; cursor: pointer; }
    </style>
  </head>
  <body>
    <div class="container">
      <!-- 登录模块 -->
      <div class="login-form" id="loginForm">
        <h3>请登录查看你的数据</h3>
        <p>使用你的Google账号登录</p>
        <button onclick="login()">登录</button>
      </div>

      <!-- 数据展示模块 -->
      <div class="data-table" id="dataTable">
        <h3>你的专属数据</h3>
        <button onclick="logout()">退出登录</button>
        <table id="userTable"></table>
      </div>
    </div>

    <script>
      // 登录函数：获取当前用户邮箱并请求数据
      function login() {
        google.script.run
          .withSuccessHandler((data) => {
            // 切换到数据展示模块
            document.getElementById('loginForm').style.display = 'none';
            document.getElementById('dataTable').style.display = 'block';
            // 渲染表格数据
            renderTable(data);
          })
          .withFailureHandler((err) => {
            alert('登录失败：' + err.message);
          })
          .getUserData(Session.getActiveUser().getEmail());
      }

      // 渲染筛选后的数据表格
      function renderTable(data) {
        const table = document.getElementById('userTable');
        table.innerHTML = '';
        // 创建表头
        const headerRow = document.createElement('tr');
        data[0].forEach(header => {
          const th = document.createElement('th');
          th.textContent = header;
          headerRow.appendChild(th);
        });
        table.appendChild(headerRow);
        // 创建数据行（跳过表头行）
        for (let i = 1; i < data.length; i++) {
          const row = document.createElement('tr');
          data[i].forEach(cell => {
            const td = document.createElement('td');
            td.textContent = cell;
            row.appendChild(td);
          });
          table.appendChild(row);
        }
      }

      // 退出登录：切换回登录模块
      function logout() {
        document.getElementById('dataTable').style.display = 'none';
        document.getElementById('loginForm').style.display = 'block';
        document.getElementById('userTable').innerHTML = '';
      }
    </script>
  </body>
</html>

步骤3：部署Web应用 #

1. 在Apps Script编辑器中点击「部署」→「新建部署」
2. 点击「类型」选择「Web应用」
3. 设置：
   • 执行：选择「我」
   • 谁可以访问：选择「任何人，甚至匿名」（如果仅限域内用户，选「同一组织内的任何人」）
4. 点击「部署」，复制生成的Web应用URL

步骤4：嵌入到Google Sites单页 #

1. 打开你的Google Sites页面，进入编辑模式
2. 点击「插入」→「嵌入」→「嵌入代码」
3. 将复制的Web应用URL粘贴进去，调整嵌入框大小
4. 保存页面，完成部署

关键说明 #

• 登录验证依赖Google账号的Session.getActiveUser()，确保用户必须用Google账号登录才能访问
• 数据筛选逻辑可根据你的Sheet结构调整：比如如果用户标识在第3列，就把row[0]改成row[2]
• 前端的样式可以自定义修改，适配你的Google Sites主题

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