基于Google Apps Script的登录表单开发问题求助

云原生阿岚

2026-7-12

Google Apps Script 登录表单问题排查

我正在用Google Apps Script开发登录表单，需求是仅授权用户可访问Web应用，验证通过后跳转至操作页面，但当前代码无法正常工作，请求排查解决。

原.gs代码

const url = "https://script.google.com/macros/s/AKfycbyGvCiggfwsHQfcqs5HBFZj2LS0idotzLBGMQUzAoSIn3ucZuPNLR7t4sYigfDyIOY5/exec";
function doGet(e){
  var user = e.parameter.name;
  var password = e.parameter.pass;
  var users = ["admin","123","user","456","guest","789"];
  var message ='';
  //---------------------------------------------------------------------------
  for (var i =0;i<users.length;i++){
    if(users[i][0]== user && users[i][1]== password){
      message='';
      const show = HtmlService.createTemplateFromFile("show");
      return show.evaluate();
      
    }else{
      message='fail to login try again!'
      var template = HtmlService.createTemplateFromFile("login");
      return template.evaluate();
    }
  }
      
}

原login.html代码

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">

  <title>EPSP-TGGT</title>
  
</head>

<body>

  <div class="container">
    <div class="col-md-6 mx-auto">
      <div class="card">
        <div class="card-body">
          <div class="card-header bg-primary mb-2 text-center text-white">
            Admin
          </div>
          <form id="myForm"> 
            <h4> "<?!= message ?>" </h4>           
            <div class="input-group flex-nowrap  mb-2">
              <span class="input-group-text" id="addon-wrapping">@</span>
              <input type="text" class="form-control" id="name" placeholder="Username" required>
            </div>
            <div class="input-group flex-nowrap mb-2">
              <span class="input-group-text" id="addon-wrappingg">@</span>
              <input type="password" class="form-control" id="pass" placeholder="Password" required>
            </div>
            <button type="submit" onclick="sample()" class="btn btn-primary w-100">Login</button>            
          </form>
        </div>
      </div>
    </div>
  </div>
  <!-- JS-Code To get user & pass and put them as Paramaters in the script-url -->
  <script>
    function sample() {
      const url = "<?!= url ?>";
          const [name, pass] = ["name", "pass"].map((e) => document.getElementById(e).value);
          window.open(`${url}?name=${name}&pass=${pass}`, "_top");
    }
  </script>

  <!-- Option 2: Separate Popper and Bootstrap JS -->

  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>


</body>

</html>

问题分析与修正方案

1. 用户数据结构错误

原代码中users是一维数组，每个元素是字符串，users[i][0]取的是字符串的第一个字符（比如"admin"[0]是"a"），无法正确匹配用户名和密码。需改成二维数组，每个子数组存储一组用户名和密码：

var users = [["admin","123"], ["user","456"], ["guest","789"]];

2. 循环逻辑错误

原循环中第一次不匹配就直接返回登录页，不会检查后续用户。应遍历完所有用户后，确认无匹配才返回错误：

// 替换原循环逻辑
let isAuthenticated = false;
for (var i = 0; i < users.length; i++) {
  if (users[i][0] === user && users[i][1] === password) {
    isAuthenticated = true;
    break;
  }
}

if (isAuthenticated) {
  const show = HtmlService.createTemplateFromFile("show");
  return show.evaluate();
} else {
  message = '登录失败，请重试！';
  var template = HtmlService.createTemplateFromFile("login");
  template.message = message; // 传递错误信息到模板
  template.url = url; // 传递Web应用URL到模板
  return template.evaluate();
}

3. 模板变量未传递

原.gs代码未将message和url赋值给模板，导致login.html中的模板标签无法渲染。需在创建模板后添加变量赋值：

var template = HtmlService.createTemplateFromFile("login");
template.message = message;
template.url = url;
return template.evaluate();

4. 表单提交默认行为冲突

原按钮是type="submit"，点击会触发表单默认提交，导致页面刷新干扰跳转逻辑。可将按钮类型改为button：

<button type="button" onclick="sample()" class="btn btn-primary w-100">Login</button>

5. 初始访问处理

用户首次访问时无参数，应直接返回登录页：

// 添加到doGet函数开头
if (!user || !password) {
  var template = HtmlService.createTemplateFromFile("login");
  template.url = url;
  return template.evaluate();
}

修正后的完整代码

修正后的.gs代码

const url = "https://script.google.com/macros/s/AKfycbyGvCiggfwsHQfcqs5HBFZj2LS0idotzLBGMQUzAoSIn3ucZuPNLR7t4sYigfDyIOY5/exec";
function doGet(e){
  var user = e.parameter.name;
  var password = e.parameter.pass;
  var users = [["admin","123"], ["user","456"], ["guest","789"]];
  var message ='';

  // 初始访问无参数，返回登录页
  if (!user || !password) {
    var template = HtmlService.createTemplateFromFile("login");
    template.url = url;
    return template.evaluate();
  }

  // 验证用户
  let isAuthenticated = false;
  for (var i = 0; i < users.length; i++) {
    if (users[i][0] === user && users[i][1] === password) {
      isAuthenticated = true;
      break;
    }
  }

  if (isAuthenticated) {
    const show = HtmlService.createTemplateFromFile("show");
    return show.evaluate();
  } else {
    message = '登录失败，请重试！';
    var template = HtmlService.createTemplateFromFile("login");
    template.message = message;
    template.url = url;
    return template.evaluate();
  }
}

修正后的login.html代码

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">

  <title>EPSP-TGGT</title>
  
</head>

<body>

  <div class="container">
    <div class="col-md-6 mx-auto">
      <div class="card">
        <div class="card-body">
          <div class="card-header bg-primary mb-2 text-center text-white">
            Admin
          </div>
          <form id="myForm"> 
            <? if (message) { ?>
              <h4 class="text-danger"><?= message ?></h4>
            <? } ?>           
            <div class="input-group flex-nowrap  mb-2">
              <span class="input-group-text" id="addon-wrapping">@</span>
              <input type="text" class="form-control" id="name" placeholder="Username" required>
            </div>
            <div class="input-group flex-nowrap mb-2">
              <span class="input-group-text" id="addon-wrappingg">@</span>
              <input type="password" class="form-control" id="pass" placeholder="Password" required>
            </div>
            <button type="button" onclick="sample()" class="btn btn-primary w-100">Login</button>            
          </form>
        </div>
      </div>
    </div>
  </div>
  <!-- JS-Code To get user & pass and put them as Paramaters in the script-url -->
  <script>
    function sample() {
      const url = "<?!= url ?>";
      const [name, pass] = ["name", "pass"].map((e) => document.getElementById(e).value);
      window.open(`${url}?name=${name}&pass=${pass}`, "_top");
    }
  </script>

  <!-- Option 2: Separate Popper and Bootstrap JS -->

  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>


</body>

</html>

注意事项

确保已创建show.html文件作为验证通过后的操作页面
部署Web应用时，权限设置需根据需求选择（如允许匿名访问登录页则选“任何人，甚至匿名”）

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

基于Google Apps Script的登录表单开发问题求助

原.gs代码 #

原login.html代码 #

问题分析与修正方案 #

1. 用户数据结构错误 #

2. 循环逻辑错误 #

3. 模板变量未传递 #

4. 表单提交默认行为冲突 #

5. 初始访问处理 #

修正后的完整代码 #

修正后的.gs代码 #

修正后的login.html代码 #

注意事项 #