Google Sheet侧边栏多客户端独立身份认证实现方案问询

我在多人协作的Google Sheet库存管理系统中实现了侧边栏登录认证功能，目前功能正常，但需要支持不同客户端设备同时进行独立身份认证。具体要求是：Google脚本与侧边栏的HTML表单需能识别并存储当前侧边栏实例的代理信息，且该信息仅属于当前侧边栏，直到侧边栏关闭。

之前尝试过UserProperties、ScriptProperties、DocumentProperties和CacheService，但这些存储的登录信息会被所有用户共享，无法实现客户端独立存储，因此必须从客户端层面解决。

我已经掌握了侧边栏内JS读写DOM、以及Google脚本获取客户端信息的方法，核心需求是获取当前侧边栏实例的专属认证信息。

现有代码 #

Apps Script代码 #

function init_SideBar(e) { // 初始化并显示侧边栏
  htmlSideBar = HtmlService.createHtmlOutputFromFile('htmlSideBar')
      .setTitle('htmlSideBar')
      .setWidth(300);
  htmlSideBar.info="blabla";  // 这是否可行？
  SpreadsheetApp.getUi().showSidebar(htmlSideBar);
}

function gScriptFcGiveToSidebar() { // 向HTML页面发送数组数据
  let jSONforSheet= JSON.stringify(objForSheet);
  return jSONforSheet; 
}

function calledFromFormSubmit(sidebarForm) { // 接收侧边栏HTML提交的数据
  agentConnected=sidebarForm;
 if(agentConnected=="Deconnecté"){
   ss.toast("Deconnecté")
 }else{
   ss.toast("Bonjour "+agentConnected);
 }
}

htmlSideBar.html代码 #

<html>
  <head>
    <title>HTML DOM Objects</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> 
    </script>
  </head>
  <body>
    <label for="dowloading">dowloading</label>

    <script>
      function submitForm() {  // 将表单数据发送到Google脚本接收函数   
        // 登录密码验证（tablUser包含登录名和密码列）
        var elmts=document.getElementById("sidebarForm");
        for(let iUsers=0;iUsers<sidebarObj.tablUser.length;iUsers++){
          if (sidebarObj.tablUser[iUsers][0]==elmts.agentId.value){ 
            if(sidebarObj.tablUser[iUsers][1]==elmts.mpId.value ){
              document.getElementById('labelConnectId').innerHTML =elmts.agentId.value; 
              google.script.run.calledFromFormSubmit(elmts.agentId.value); 
              return;
            }
          }
        }
        alert ("密码错误，请重试");
     }

    function deconnect(){
        document.getElementById('labelConnectId').innerHTML ="Deconnecté"; 
        document.getElementById('agentId').value ="Deconnecté";
        google.script.run.calledFromFormSubmit("Deconnecté");
    }

    function jsFcGiveToForm(jSONforSheet){ // 处理Google脚本返回的数据
        $('#rangeResult').text(jSONforSheet);
        sidebarObj=JSON.parse(jSONforSheet);
        document.write('<label id="labelConnectId" form="sidebarForm"  >  '+sidebarObj.agentConnected+'</label>');
        document.write('<br><input type="button" value="Deconnect" onclick="deconnect();" />');
        
        document.write('<form id="sidebarForm">');
        document.write('<select name="agent" id="agentId">');
        document.write('<option value="'+sidebarObj.agentConnected+'">'+sidebarObj.agentConnected+'</option>');
        for(let iUsers=0;iUsers<sidebarObj.tablUser.length;iUsers++){
          document.write('<option value="'+sidebarObj.tablUser[iUsers][0]+'">'+sidebarObj.tablUser[iUsers][0]+'</option>');
        }
        document.write('</select>');
        document.write('<br /><input type="text" name="mp" id="mpId" value="password">');
        document.write('<br /><input type="button" value="Submit" onclick="submitForm();" />');
        document.write('<input type="button" value="Close" onclick="google.script.host.close()" />');
    }

    document.close(); // 释放浏览器，继续加载页面
    google.script.run.withSuccessHandler(jsFcGiveToForm).gScriptFcGiveToSidebar();      
    </script> 
    </form>
  </body>
</html>

思路验证与解决方案 #

我有几个方向，需要验证可行性或补充方案：

1. 是否需要使用脚本标签<?= blablabla?>
2. 使用Meta标签存储信息：

var x = document.createElement("META");
    x.setAttribute("name", "description");
    x.setAttribute("content", "blablabla");
    document.head.appendChild(x);

3. 利用HtmlOutput的自定义属性：

htmlSideBar.info="blabla";

可行解决方案 #

方案1：客户端sessionStorage存储专属信息

这是最直接的方案，sessionStorage会在侧边栏关闭（或浏览器标签关闭）时自动清除，完全隔离不同客户端的信息：

• 登录成功时存入信息：

// 登录验证通过后执行
sessionStorage.setItem('currentAgent', elmts.agentId.value);

• 读取信息时直接获取：

let currentAgent = sessionStorage.getItem('currentAgent');

• 登出时清除：

sessionStorage.removeItem('currentAgent');

方案2：模板脚本标签传递侧边栏实例ID

如果需要给每个侧边栏分配唯一标识，可通过模板标签注入初始数据：

• 修改Apps Script初始化函数：

function init_SideBar(e) {
  // 生成唯一实例ID
  const sidebarId = Utilities.getUuid();
  const htmlTemplate = HtmlService.createTemplateFromFile('htmlSideBar');
  // 传递ID到模板
  htmlTemplate.sidebarInstanceId = sidebarId;
  
  const htmlSideBar = htmlTemplate.evaluate()
      .setTitle('htmlSideBar')
      .setWidth(300);
  SpreadsheetApp.getUi().showSidebar(htmlSideBar);
}

• 在HTML中接收并使用：

<script>
// 获取实例ID
const sidebarInstanceId = '<?= sidebarInstanceId ?>';
// 可结合sessionStorage绑定代理信息
</script>

你的思路验证 #

1. 脚本标签<?= ?>：完全可行，这是Google Apps Script向HTML传递初始数据的标准方式，适合注入专属标识。
2. Meta标签存储：技术上可行，但Meta标签多用于页面元数据，存储业务信息不是最佳实践。
3. HtmlOutput自定义属性：不可行，服务器端设置的自定义属性不会被渲染到客户端页面中，无法传递到侧边栏。

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