Google Docs插件侧边栏展示外部UI及OAuth认证可行性问询

需求可行性确认 #

你的需求完全符合Google Workspace插件的开发规范，不存在权限限制问题。Google明确允许插件通过UrlFetchApp与外部服务交互，包括对接第三方OAuth认证、获取外部数据并构建自定义UI。

核心实现步骤 #

1. 第三方OAuth认证集成 #

• 在Google Cloud Console中配置插件的OAuth客户端，添加己方网站的OAuth 2.0客户端信息（客户端ID、密钥）。
• 使用Google官方推荐的OAuth2库处理己方网站的授权流程，获取访问令牌后，后续请求携带令牌完成身份验证。
• 示例认证逻辑片段：

  function getOAuthService() {
    return OAuth2.createService('YourWebsite')
      .setAuthorizationBaseUrl('https://your-website.com/oauth2/authorize')
      .setTokenUrl('https://your-website.com/oauth2/token')
      .setClientId('YOUR_CLIENT_ID')
      .setClientSecret('YOUR_CLIENT_SECRET')
      .setCallbackFunction('authCallback')
      .setPropertyStore(PropertiesService.getUserProperties());
  }
  

2. 基于REST数据构建侧边栏UI #

通过UrlFetchApp调用己方网站的REST接口获取项目列表（包含缩略图URL、文本内容等字段），再用HtmlService动态生成侧边栏UI——这是官方推荐的方案，比直接嵌入外部UI更符合安全规范：

• 后端脚本（Code.gs）：

  function showSidebar() {
    const service = getOAuthService();
    if (!service.hasAccess()) {
      const authorizationUrl = service.getAuthorizationUrl();
      const template = HtmlService.createTemplate('<a href="<?= authorizationUrl ?>" target="_blank">授权访问我方网站</a>');
      template.authorizationUrl = authorizationUrl;
      const page = template.evaluate();
      DocumentApp.getUi().showSidebar(page);
    } else {
      const response = UrlFetchApp.fetch('https://your-website.com/api/projects', {
        headers: { 'Authorization': 'Bearer ' + service.getAccessToken() }
      });
      const projects = JSON.parse(response.getContentText());
      const template = HtmlService.createTemplateFromFile('Sidebar');
      template.projects = projects;
      const page = template.evaluate().setTitle('我的项目');
      DocumentApp.getUi().showSidebar(page);
    }
  }
  

• 侧边栏HTML（Sidebar.html）：

  <div class="project-list">
    <? for (let project of projects) { ?>
      <div class="project-item" onclick="insertProject('<?= project.id ?>')">
        <img src="<?= project.thumbnailUrl ?>" alt="<?= project.name ?>">
        <p><?= project.name ?></p>
      </div>
    <? } ?>
  </div>
  <script>
    function insertProject(projectId) {
      google.script.run.withSuccessHandler(data => {
        if (data.type === 'text') {
          DocumentApp.getActiveDocument().getBody().appendParagraph(data.content);
        } else if (data.type === 'image') {
          const imageBlob = UrlFetchApp.fetch(data.content).getBlob();
          DocumentApp.getActiveDocument().getBody().appendImage(imageBlob);
        }
      }).getProjectDetail(projectId);
    }
  </script>
  

3. 内容插入逻辑 #

通过google.script.run调用后端脚本，根据项目类型插入文本或图片：

function getProjectDetail(projectId) {
  const service = getOAuthService();
  const response = UrlFetchApp.fetch(`https://your-website.com/api/projects/${projectId}`, {
    headers: { 'Authorization': 'Bearer ' + service.getAccessToken() }
  });
  return JSON.parse(response.getContentText());
}

关键注意事项 #

• 确保己方网站的REST接口支持CORS，或通过插件后端代理请求规避跨域问题。
• 所有外部请求必须使用HTTPS，符合Google Workspace的安全要求。
• 权限范围需最小化，仅请求必要的用户项目数据权限。

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