javascript - 如何在没有身份验证页面的情况下将网络表单直接发布到 Google 表格？

Question

背景

我只想创建一个 landing page它有一个表单，可以在 Google 表格中保存访问者的电子邮件地址。

我发现这很有用 post有一个可以完成工作的谷歌应用程序脚本。我按照说明(在我的本地主机上)进行操作，这是请求代码:

request = $.ajax({
    url: "https://script.google.com/macros/s/my_app_script_id/exec",
    type: "post",
    data: serializedData
});

但是当我点击提交时我得到这个错误:

XMLHttpRequest cannot load https://script.google.com/macros/s/my_app_script_id/exec. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8000' is therefore not allowed access. The response had HTTP status code 405.

这有点奇怪，考虑到我已经发布了该应用程序供所有人访问，如下所示:

很公平，我需要 use CORS to access Google APIs .

问题

上面的说明要求用户对自己进行身份验证，因此这就是我的着陆页上的用户流程:

给定 用户在文本字段中添加电子邮件
当用户点击开始按钮
然后
预计
表单应该提交就好了
实际
出现 Google 身份验证屏幕，并要求人们授权该应用

问题

如何让网络表单在没有 Google App 脚本的情况下运行？

更新

有趣的是，我在 blog post 上测试了相同的脚本它工作正常，但如果我在那里复制脚本的 url https://script.google.com/macros/s/AKfycbzV--xTooSkBLufMs4AnrCTdwZxVNtycTE4JNtaCze2UijXAg8/exec" 并从 调用它我的 网络服务，我收到相同的 CORS 错误消息。

所以这证明脚本不能随便被任何人调用，它必须以某种方式被列入白名单。我该怎么做？

更新2

博文作者implied我应该使用 https，正在努力设置它。

更新 3

我现在正在使用 JSONP，但不知何故，谷歌应用程序脚本解释 JSONP 数据的方式很奇怪。

所以按照 Spencer Easton 的指示我这样调用它:

var url = "https://script.google.com/macros/s/AK...g8/exec?data=" + serializedData +"&callback=?";
$.getJSON(url, successCallBack).fail(failCallback)

但是我一直没有定义，

我尝试使用 here 中的说明调试我的 Google App 脚本代码像这样:

function fakeGet() {
  var eventObject = 
    {
      "parameter": {
        "email": "hindi",
        "callback": "fakecallback"
      }
    }
  doGet(eventObject);
}

此代码运行良好，并按预期更新了电子表格。那我在这里错过了什么？ Google App 脚本如何准确解释 jsonp 数据？

Answer 1

由于您要返回 JSON，因此您必须使用 JSONP。

https://developers.google.com/apps-script/guides/content#serving_jsonp_in_web_pages http://ramblings.mcpher.com/Home/excelquirks/gassnips/jsonpnotp

对你来说，它大致看起来像:

postToSheet.js

var url = "https://script.google.com/macros/s/AK...g8/exec?data=" + serializedData +"&callback=?";
$.getJSON(url, successCallBack).fail(failCallback)

代码.gs

...
 // we'll assume header is in row 1 but you can override with header_row in GET/POST data
var headRow = e.parameter.header_row || 1;
var callback = e.parameter.callback; // required for JSONP
...
return ContentService
        .createTextOutput(callback+'('+ JSON.stringify({"result":"success", "row": nextRow})+')')
        .setMimeType(ContentService.MimeType.JAVASCRIPT);