javascript - 使用 JavaScript 授权 Google 云端硬盘

Question

我正在尝试授权我的应用程序与 Google 云端硬盘集成。 Google 文档提供了有关基于服务器的授权的详细信息和 various server technologies 的代码示例.

还有一个 JavaScript Google API library ，支持授权。在samples section of the wiki下面有一个用于创建配置和调用 authorize function 的代码片段.我已将范围更改为我认为驱动器所需的范围:

var config = {
    'client_id': 'my_client_ID',
    'scope': 'https://www.googleapis.com/auth/drive.file'
  };
  gapi.auth.authorize(config, function() {
    console.log(gapi.auth);
  });

永远不会调用回调函数(是的，谷歌 API 库已加载更正)查看 Java 检索和使用 OAuth 2.0 凭据示例，客户端密码似乎是一个参数，是否应该进入配置？

有没有人在 JS、Drive 或其他 Google API 中尝试过这个？有谁知道调试此类问题的最佳途径，即我是否需要单步执行库并停止提示？

请不要建议在服务器端进行授权，我们的应用程序完全是客户端，我不希望服务器上有任何状态(我理解这会导致 token 刷新问题)。我熟悉 Google 控制台中的 API 配置，我相信它和驱动器 SDK 设置是正确的。

Answer 1

可以将 Google APIs Javascript 客户端库与云端硬盘一起使用，但您必须意识到存在一些痛点。

目前主要有两个问题，都有解决办法:

授权

首先，如果您仔细了解 Google 云端硬盘身份验证的工作原理，您会发现，在用户安装您的云端硬盘应用程序并尝试使用您的应用程序打开文件或创建新文件后，云端硬盘会启动 OAuth 2.0 授权自动流，身份验证参数设置为 response_type=code 和 access_type=offline。这基本上意味着现在 Drive 应用程序被迫使用 OAuth 2 服务器端流程，这对 Javascript 客户端库(仅使用客户端流程)没有任何用处。

问题在于:Drive 启动服务器端 OAuth 2.0 流程，然后 Javascript 客户端库启动客户端 OAuth 2.0 流程。

这仍然可以工作，您所要做的就是使用服务器端代码处理 Drive 服务器端流程后返回的授权代码(您需要将其交换为访问 token 和刷新 token )。这样，只有在第一个流程中才会提示用户进行授权。第一次交换授权码后，授权页面将自动绕过。

执行此操作的服务器端示例可用 in our documentation .

如果您不在服务器端流程中处理/交换授权码，则每次用户尝试从云端硬盘使用您的应用时，系统都会提示他进行授权。

处理文件内容

第二个问题是我们的 Javascript 客户端库无法轻松上传和访问实际的云端硬盘文件内容。您仍然可以这样做，但您必须使用自定义 Javascript 代码。

读取文件内容

当检索到文件元数据/文件对象时，它包含一个指向实际文件内容的 downloadUrl 属性。现在可以使用 CORS 请求下载文件，最简单的身份验证方法是在 URL 参数中使用 OAuth 2 访问 token 。因此，只需将 &access_token=... 附加到 downloadUrl 并使用 XHR 或通过将用户转发到 URL 来获取文件。

上传文件内容

更新更新:上传端点确实现在支持 CORS。

~~更新:与 Drive API 的其余部分不同，上传端点不支持 CORS，因此您现在必须使用以下技巧:~~

上传文件很棘手，因为它不是内置在 Javascript 客户端库中的，您不能完全使用 HTTP 来完成，如 this response 中所述。因为我们不允许在这些 API 端点上进行跨域请求。因此，您必须利用我们的 Javascript 客户端库使用的 iframe 代理，并使用它向 Drive SDK 发送构造的多部分请求。感谢@Alain ，我们在下面提供了如何执行此操作的示例:

/**
 * Insert new file.
 *
 * @param {File} fileData File object to read data from.
 * @param {Function} callback Callback function to call when the request is complete.
 */
function insertFileData(fileData, callback) {
  const boundary = '-------314159265358979323846';
  const delimiter = "\r\n--" + boundary + "\r\n";
  const close_delim = "\r\n--" + boundary + "--";

  var reader = new FileReader();
  reader.readAsBinaryString(fileData);
  reader.onload = function(e) {
    var contentType = fileData.type || 'application/octet-stream';
    var metadata = {
      'title': fileData.fileName,
      'mimeType': contentType
    };

    var base64Data = btoa(reader.result);
    var multipartRequestBody =
        delimiter +
        'Content-Type: application/json\r\n\r\n' +
        JSON.stringify(metadata) +
        delimiter +
        'Content-Type: ' + contentType + '\r\n' +
        'Content-Transfer-Encoding: base64\r\n' +
        '\r\n' +
        base64Data +
        close_delim;

    var request = gapi.client.request({
        'path': '/upload/drive/v2/files',
        'method': 'POST',
        'params': {'uploadType': 'multipart'},
        'headers': {
          'Content-Type': 'multipart/mixed; boundary="' + boundary + '"'
        },
        'body': multipartRequestBody});
    if (!callback) {
      callback = function(file) {
        console.log(file)
      };
    }
    request.execute(callback);
  }
}

---

为了改善这一切， future 我们可能会:

• 让开发者选择他们想要使用的 OAuth 2.0 流程(服务器端或客户端)，或者让开发者完全处理 OAuth 流程。
• 在 /upload/... 端点上允许 CORS
• 在原生 gDoc 的 exportLinks 上允许 CORS
• 我们应该让使用我们的 Javascript 客户端库上传文件变得更容易。

虽然在这一点上没有 promise :)