连接Google Spreadsheet电子表格的登录系统开发异常求助，邮箱校验失效

核心问题定位 #

• 架构层面存在致命逻辑错误：当前编写的JS代码直接使用Node.js环境的模块（require语法、google-spreadsheet依赖、服务端鉴权用的credentials.json）在浏览器前端执行。浏览器本身没有Node模块加载机制，根本无法识别require语法，会直接抛出require is not defined的加载错误；同时把服务账号密钥放在前端代码里会造成权限泄露，且浏览器端没有权限直接调用谷歌表格的服务端鉴权接口。
• 前端代码存在多处语法/逻辑bug：
  • 获取用户输入的代码错误：document.getElementById("email")拿到的是DOM元素对象，并非用户输入的邮箱字符串；后续比对时还错写变量名，使用从未定义的mail变量和表格行的邮箱字段做比对，永远无法触发匹配逻辑
  • 状态标记逻辑缺失：哪怕循环中匹配到了对应用户，也没有将校验标记controle设为true，最终一定会走到“用户无效”的弹窗分支
  • 表单默认行为未拦截：登录按钮是type="submit"类型，点击后会触发表单默认的页面刷新行为，异步查询表格的逻辑还没执行完，页面就已经被刷新重置，根本等不到查询结果返回
• 第三方库调用方式错误：使用旧版google-spreadsheet包时，手动promisify的调用方式存在参数传递问题，比如await promisify(doc.getInfo)();的写法会让promisify后的函数接收空参数，无法正确拉取表格数据。

可落地的修复方案 #

1. 架构调整：将所有涉及谷歌表格鉴权、查询的逻辑全部迁移到后端服务，前端只负责收集用户输入的登录信息，调用后端提供的校验接口获取结果，再执行跳转。绝对不能把服务端密钥、第三方API鉴权逻辑暴露到前端静态资源中。
2. 前端逻辑修正：
   • 给表单添加提交拦截，在登录按钮的点击事件回调中第一时间调用event.preventDefault()，阻止表单默认的页面刷新行为
   • 正确获取输入值：通过document.getElementById("email").value.trim()拿到用户输入的规范化邮箱字符串，避免前后空格导致的匹配失败
   • 修正变量名不一致的问题，比对时使用实际拿到的邮箱值和表格行的email字段做严格等值判断
   • 匹配到合法用户后，第一时间将校验标记controle设为true，避免走到错误的失败提示分支
3. 后端逻辑修正：
   • 升级到google-spreadsheet的v3及以上版本，使用库自带的原生async/await方法完成鉴权、获取工作表、查询行数据的全流程，不再手动promisify旧版的回调接口
   • 将服务账号密钥存储在后端服务器的环境变量中，通过环境变量读取配置，不要将密钥文件放到前端静态资源目录
   • 封装独立的登录校验接口，接收前端传递的邮箱参数，完成表格查询后将匹配结果以JSON格式返回给前端

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