web-dev-qa-db-ja.com

JavaScriptを使用したGoogleドライブの承認

Googleドライブとの統合をアプリケーションに許可しようとしています。 Googleのドキュメントには、サーバーベースの承認の詳細と さまざまなサーバーテクノロジー のコードサンプルが記載されています。

JavaScript Google APIライブラリ もあり、認証をサポートしています。 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);
  });

コールバック関数は呼び出されません（はい、Google APIライブラリがロードされて修正されます）Java Retrieve and Use OAuth 2.0 Credentials example、client secretパラメータになるには、これを設定に入れる必要がありますか？

ドライブやその他のGoogle APIのために、JSでこれを試した人はいますか？そのような問題をデバッグするための最適なルートを知っている人はいますか？

サーバー側で承認を行うことを提案しないでください。アプリケーションは完全にクライアント側であり、サーバー上の状態は必要ありません（そして、これが引き起こすトークン更新の問題を理解しています）。私はGoogleコンソールのAPI設定に精通しており、それとドライブSDKの設定が正しいと信じています。

javascriptoauth-2.0google-drive-api
41
David

Google APIのJavaScriptクライアントライブラリをドライブで使用することは可能ですが、いくつかの問題があることに注意する必要があります。

現在、主に2つの問題があり、どちらにも回避策があります。

認可

まず、Googleドライブの認証の仕組みを詳しく見ると、ユーザーがドライブアプリケーションをインストールし、アプリケーションでファイルを開くか新しいファイルを作成しようとすると、ドライブがOAuth 2.0認証フローが自動的に行われ、authパラメーターがresponse_type = codeおよびaccess_type = offline。これは基本的に、現在ドライブアプリがOAuth 2サーバー側フローを使用することを強制されていることを意味します。ライブラリ（クライアント側のフローのみを使用）。

問題は、ドライブがサーバー側のOAuth 2.0フローを開始し、Javascriptクライアントライブラリがクライアント側のOAuth 2.0フローを開始することです。

これでも機能します。必要なのは、サーバー側のコードを使用して、ドライブのサーバー側のフローの後に返された認証コードを処理することだけです（アクセストークンと更新トークンに交換する必要があります）。この方法では、最初のフローでのみ、ユーザーは承認を求められます。認証コードを初めて交換した後、認証ページは自動的にバイパスされます。

これを行うためのサーバー側のサンプルが利用可能です 当社のドキュメントで 。

サーバー側のフローで認証コードを処理/交換しない場合、ユーザーはドライブからアプリを使用しようとするたびに認証を求められます。

ファイルコンテンツの処理

2番目の問題は、実際のドライブファイルコンテンツのアップロードとアクセスが、Javascriptクライアントライブラリによって容易にならないことです。それでも実行できますが、カスタムJavascriptコードを使用する必要があります。

ファイル内容の読み取り

ファイルメタデータ/ファイルオブジェクトが取得されると、実際のファイルコンテンツを指すdownloadUrl属性が含まれます。 CORSリクエストを使用してファイルをダウンロードできるようになりました。認証する最も簡単な方法は、URLパラメーターでOAuth 2アクセストークンを使用することです。したがって、&access_token=...downloadUrlを選択し、XHRを使用するか、ユーザーをURLに転送してファイルを取得します。

ファイルコンテンツのアップロード

更新更新：アップロードエンドポイントdoはCORSをサポートするようになりました。

~~ UPDATE：ドライブAPIの他の部分とは異なり、アップロードエンドポイントはCORSをサポートしていないため、今のところ以下のトリックを使用する必要があります：~~

ファイルのアップロードは、Javascriptクライアントライブラリに組み込まれていないためトリッキーです。また、 この応答 で説明されているようにHTTPで完全に実行することはできません。エンドポイント。したがって、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);
  }
}

これをすべて改善するために、将来的には次のようになります。

  • 開発者に使用するOAuth 2.0フロー（サーバー側またはクライアント側）を選択させるか、開発者にOAuthフローを完全に処理させます。
  • /upload/...エンドポイントでCORSを許可する
  • ネイティブgDocsのexportLinksでCORSを許可する
  • Javascriptクライアントライブラリを使用してファイルを簡単にアップロードできるようにする必要があります。

ただし、現時点では約束はありません:)

56
Nicolas Garnier

やったよ。ここに私のコード：

<!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>

あなただけを変更する必要があります：

  • var clientId = '######';
  • var apiKey = 'aaaaaaaaaaaaaaaaaaa';

google APIコンソールからclientIDとApiKeyに:)

もちろん、Google APIコンソールでプロジェクトを作成し、Drive APIを有効にして、OAuth 2.0（本当にeeeeasy！）でGoogleアカウント認証を有効にする必要があります！

PS：それはあなたのPCでローカルに動作しません、それはいくつかのホスティングで動作します、そしてヨーヨーはプロジェクトコンソールでそれからURLを提供しなければなりません:)

12
InsaurraldeAP