如何在 Flutter 中与来自 http 请求的 html 响应进行交互

Question

我有一个 Flutter 应用程序，我在其中通过 http 请求运行 Google Apps 脚本。该脚本的目的是创建一个表单并将响应链接到传入的电子表格ID。该脚本配置为仅允许 Google 帐户访问它，并且我已将 Flutter 应用程序设置为使用服务帐户来访问使用格式的脚本：

getCredentials().then( (AuthClient client){
    response = client.get(url, headers{"Authorization": "Bearer ${client.access_token}");
});

问题：问题是服务帐户第一次发出请求时会收到 HTML 响应，说明帐户需要授予脚本访问其数据的权限，而我'不知道该怎么做。

我对发出 http 请求并将其与 GoogleAPI 一起使用还很陌生，所以我被困住了。有什么建议吗？

Answer 1

目标

创建一个网页，任何人都可以使用该网页来提交 Google 表格链接，并让应用程序创建一个表格并将表格链接到该表格。

授权

为此，用户需要一个谷歌帐户，并且他们需要通过 OAuth 流程来授权您的应用。

要创建表单并从客户端 JavaScript 链接它，您确实需要调用 Apps Script API，尽管您不能使用服务帐户来执行此操作。

发件人：https://developers.google.com/apps-script/api/how-tos/execute

警告：Apps Script API 不适用于服务帐户。

幸运的是，您不需要服务帐户来执行此操作。

说明

• 使用类似以下的函数创建一个 Apps 脚本项目：

  function createForm(ssID){
    form = FormApp.create("Your New Form");
    form.setDestination(FormApp.DestinationType.SPREADSHEET, ssID);
    let formLink = form.getPublishedUrl();
    return formLink;
  }
  

• 保存并记下脚本项目的 ID。

• 设置一个 GCP 项目（听起来您已经有了一个）。

• 确保在您的 GCP 中启用了 Apps Script API。

• 配置 OAuth 同意屏幕并添加范围 - https://www.googleapis.com/auth/forms。

• 创建 API 密钥和客户端 ID - 将 http://localhost:8000 或您正在测试的任何端口添加到“授权的 JavaScript 来源”

• 创建 OAuth 凭据“Web 浏览器 (JavaScript)”。

• 将您的 Apps 脚本项目链接到同一个 GCP 项目 - Instructions

• 将 Apps 脚本项目部署为 API 可执行文件 - 不要使用 部署 ID，虽然文档说您需要脚本 ID，但这是错误的，至少对于新的 Apps 脚本 IDE .

• 在您的应用中编写客户端 JavaScript，就像在 quickstart 中找到的一样。这将使用户能够授权该应用程序。您还需要在那里添加范围和键。我建议您先按照快速入门步骤来感受一下。授权部分无需修改即可使用。

• 然后添加将调用您的 Apps 脚本的函数，如下所示：

  function appsScriptCreateForm(ssId) {
    var scriptId = "<DEPLOYMENT_ID>";
  
    // Run your Apps Script function
    gapi.client.script.scripts
    .run({
        scriptId: scriptId,
        resource: {
            function: "createForm",
            parameters: [ssId],
        },
    })
    .then(function (resp) {
        var result = resp.result;
  
        // ERROR HANDLING
        if (result.error && result.error.status) {
            appendPre("Error calling API:");
            appendPre(JSON.stringify(result, null, 2));
        } else if (result.error) {
            var error = result.error.details[0];
            appendPre("Script error message: " + error.errorMessage);
            if (error.scriptStackTraceElements) {
                appendPre("Script error stacktrace:");
                for (var i = 0; i < error.scriptStackTraceElements.length; i++) {
                    var trace = error.scriptStackTraceElements[i];
                    appendPre("\t" + trace.function + ":" + trace.lineNumber);
                }
            }
  
        // IF SUCCESSFUL
        } else {
            console.log("success", resp);
        }
    });
  }
  

• 使用必要的按钮和输入来编写您的 HTML。

• 在适当的地方添加事件监听器。

• 利润！

请注意

• 此设置是您的项目在其他帐户的授权下运行。
• API 请求计入您的配额。
• 您可以在 GCP 项目仪表板中查看所有执行的详细信息。
• 用户需要 Google 帐户并需要对应用进行授权。
• 在上面的 Apps Script 函数中，您只需要传入电子表格 ID。不是整个链接。您可以要求提供整个链接，然后根据需要使用 Regex 提取 ID。
• 这可能非常棘手，很容易错过步骤或出错，因此请仔细检查您的工作。
• 如果授权成功后，在尝试运行脚本时遇到 404 错误，说明请求构建错误，请检查您的 ID。如果您收到 500 错误，这可能意味着 Apps Script 函数已成功调用，但是，有一个错误 在 Apps Script 中并且失败了，请检查执行页面Apps 脚本编辑器。

参考文献

• Apps Script How to Execute
• Apps Script JS Quickstart - 强烈建议您先按照这些步骤进行操作！
• How to link your Apps Script to GCP