使用JavaScript谷歌驱动器的授权使用JavaScript谷歌驱动器的授权(Authoriza

我想我的授权应用程序与谷歌硬盘集成。谷歌文档提供了基于服务器的授权和代码示例细节的各种服务器技术。

还有一个JavaScript的谷歌API库，拥有授权的支持。相传在维基的样品部分没有用于创建一个配置和调用的代码片段授权功能。我已经改变了范围，是一个我认为需要驱动：

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想这一点，对于驱动器或其他谷歌的API？有谁知道调试这样的问题的最佳途径，也就是我需要刚刚经历图书馆步骤和停止哀？

请不要建议做授权在服务器端，我们的应用程序完全是客户端，我不希望在服务器上的任何状态（我的理解令牌刷新问题，这将导致）。我熟悉的谷歌控制台API的配置，我相信和驱动SDK设置是否正确。

Answer 1:

它可以使用与驱动器的谷歌API的JavaScript客户端库，但你必须要知道，有一些痛点。

目前有两个主要的问题，这两者有workarrounds：

授权

首先，如果你在谷歌驱动器权威性是如何运作的，你会意识到，用户已经安装了驱动程序后密切看看，并试图打开一个文件或创建与应用程序的新文件，驱动器启动的OAuth 2.0授权流程自动和在auth参数设置为RESPONSE_TYPE =代码和ACCESS_TYPE =脱机 。这基本上意味着，现在硬盘应用会被强制使用该不会是任何使用JavaScript客户端库（其中仅使用客户端流程）的OAuth 2服务器端的流量。

这个问题是：驱动器启动服务器端OAuth 2.0流，那么JavaScript客户端库启动客户端OAuth 2.0流。

这仍然可以工作，所有你需要做的是使用服务器端代码来处理驱动器的服务器端流量（你需要换取一个访问令牌和刷新令牌）后返回的授权码。这样一来，仅在第一流用户将被提示进行授权。你交换的授权码后的第一次，在auth页面会被自动旁路。

服务器端的样品要做到这一点，请我们的文档中。

如果你不处理/交换的服务器端流量的授权码，用户将被提示输入身份验证，他试图使用你的应用程序从硬盘每一次。

处理文件内容

第二个问题是，上传和访问实际的驱动文件内容没有以我们的JavaScript客户端库容易。你仍然可以做到这一点，但你将不得不使用自定义JavaScript代码。

读取文件内容

当一个文件的元数据/文件对象被检索，它包含一个downloadUrl指向实际文件内容属性。现在可以使用CORS请求和权威性最简单的方法就是使用OAuth 2访问令牌的URL参数去下载文件。所以，只是追加&access_token=...到downloadUrl和使用XHR获取文件或者转发用户的URL。

上传文件内容

更新来更新：上传终端就现在支持CORS。

~~更新：上传端点，不像驱动器API不支持CORS的休息，所以你将不得不使用下面的技巧现在：~~

上传文件是棘手的，因为它没有内置的JavaScript客户端lib和你不能完全用HTTP做在描述这种反应，因为我们不允许对这些API端点跨域请求。所以，你必须把我们的JavaScript客户端库使用的iframe代理的优势，并用它来发送构建多请求驱动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);
  }
}

为了改善这一切，在未来我们可能：

让开发商选择他们想要使用（服务器端或客户端），或让开发商处理OAuth完全流动，这OAuth 2.0用户流量。
允许在CORS /upload/...端点
允许CORS的exportLinks原生gDocs
我们应该更容易使用我们的JavaScript客户端库上传文件。

在这一点上没有承诺虽然:)

Answer 2:

我做的。继承人我的代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8' />
    <style>
        p {         
            font-family: Tahoma;
        }
    </style>
  </head>
  <body>
    <!--Add a button for the user to click to initiate auth sequence -->
    <button id="authorize-button" style="visibility: hidden">Authorize</button>
    <script type="text/javascript">
      var clientId = '######';
      var apiKey = 'aaaaaaaaaaaaaaaaaaa';
      // To enter one or more authentication scopes, refer to the documentation for the API.
      var scopes = 'https://www.googleapis.com/auth/drive';

      // Use a button to handle authentication the first time.
      function handleClientLoad() {
        gapi.client.setApiKey(apiKey);
        window.setTimeout(checkAuth,1);
      }

      function checkAuth() {
        gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: true}, handleAuthResult);
      }

      function handleAuthResult(authResult) {
        var authorizeButton = document.getElementById('authorize-button');
        if (authResult && !authResult.error) {
          authorizeButton.style.visibility = 'hidden';
          makeApiCall();
        } else {
          authorizeButton.style.visibility = '';
          authorizeButton.onclick = handleAuthClick;
        }
      }

      function handleAuthClick(event) {
        gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: false}, handleAuthResult);
        return false;
      }

      // Load the API and make an API call.  Display the results on the screen.
      function makeApiCall() {
        gapi.client.load('drive', 'v2', function() {

          var request = gapi.client.drive.files.list ( {'maxResults': 5 } );

          request.execute(function(resp) {          
            for (i=0; i<resp.items.length; i++) {
                    var titulo = resp.items[i].title;
                    var fechaUpd = resp.items[i].modifiedDate;
                    var userUpd = resp.items[i].lastModifyingUserName;

                    var fileInfo = document.createElement('li');
                    fileInfo.appendChild(document.createTextNode('TITLE: ' + titulo + ' - LAST MODIF: ' + fechaUpd + ' - BY: ' + userUpd ));                
                    document.getElementById('content').appendChild(fileInfo);
            }
          });        
        });
      }
    </script>
    <script src="https://apis.google.com/js/client.js?onload=handleClientLoad"></script>    
    <p><b>These are 5 files from your GDrive :)</b></p>
    <div id="content"></div>
  </body>
</html>

你只需要改变：