[Google Drive] Google Drive API REST Sample

날씨는 참 좋은데 미세먼지가 많다고 하네요 마스크쓰신 분들을 심심찮게 볼 수 있었습니다.

이번에는 본격적으로 Google Drive REST API를 이용하는 포스트입니다. 

해당 샘플은 Google Developer에 나온 REST Sample을 참고하였습니다. 

(거의 흡사하며 인증버튼을 눌러서 인증하는 로직을 제외하고 바로 인증을 하도록 일부 변경했습니다.)

 

Google Drive API를 이용하기 위해서는 이전에 작성했었던 것과 같이 OAuth 인증이 필수적입니다.

따라서 스크립트 상단부에 미리 부여받은 Client ID를 입력합니다.

scope는 Google API에서 사용 목적(얻고자 하는 데이터)에 따라 변경이 가능합니다. 권한 정도로 생각하면 됩니다.

아래 작성한 SCOPE는 Google API에서 제공하는 Drive 계열의 전체 허용을 득합니다. 

      var CLIENT_ID = 'YOUR CLIENT ID';
      var SCOPES = ['https://www.googleapis.com/auth/drive'];

 

다음은 OAuth 인증 부분입니다.

gapi.auth.authorize를 통해 필요한 Parameter를 넘기고 결과에 대한 리턴함수로 handleAuthResult()를 설정했습니다.

handleAuthResult()는 gapi.auth.authorize의 결과값을 확인한 후 loadDriveAPI()를 실행하여 인증 후 필요한 Google API를 로드합니다.

gapi.client.load를 수행 후 listFiles()를 호출합니다.

      function checkAuth() {
        gapi.auth.authorize(
          {
            'client_id': CLIENT_ID,
            'scope': SCOPES.join(' '),
            'immediate': true
          }, handleAuthResult);
      }

      function handleAuthResult(authResult) {
        if (authResult && !authResult.error) {
          loadDriveApi();
        } else {
          console.error("failed");
        }
      }

      function loadDriveApi() {
        gapi.client.load('drive', 'v3', listFiles);
      }

 

인증 및 사용하고자 하는 API를 로드한 후 listFiles()는 Google API의 Drive 모듈 중 파일의 리스트를 조회합니다. 

이후 appendPre()를 호출하여 실제 HTML에 동적으로 표출합니다.

      function listFiles() {
        var request = gapi.client.drive.files.list({
            'pageSize': 10,
            'fields': "nextPageToken, files(id, name)"
          });

          request.execute(function(resp) {
            appendPre('Files:');
            var files = resp.files;
            if (files && files.length > 0) {
              for (var i = 0; i < files.length; i++) {
                var file = files[i];
                appendPre(file.name + ' (' + file.id + ')');
              }
            } else {
              appendPre('No files found.');
            }
          });
      }

      function appendPre(message) {
        var pre = document.getElementById('output');
        var textContent = document.createTextNode(message + '\n');
        pre.appendChild(textContent);
      }

 

실제로 해당 소스를 실행시키고 나면 아래와 같이 파일들의 리스트가 표출되는데 보시면 manage.html이 3개가 있습니다.

정확히 어떤 기술인지는 모르겠으나 파일명 일부를 변조하고 특수한 패딩값을 넣어 Key를 따로 만드는 듯합니다.

실제로 공유를 설정한 폴더에 manage.html 1개가 있고 휴지통에는 이런저런 테스트용으로 삭제했던 2개 파일이 있어 총 3개로 나옵니다.

 

마칩니다...코드를 넣는다는 것이 어렵습니다. 이 포스트는 지속적으로 다듬어 보겠습니다..

소스 파일은 아래에 첨부합니다.

manage.html

다운로드