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

이번에는 본격적으로 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

 


신고

안녕하세요

이번에는 Google API Console을 통해서 앞서 만들었던 Google Drive에 REST API를 통하여 접근하는 방법을 적어보려합니다.

Google API Console은 Google Drive 외에 Google Cloud, Youtube 등 구글에서 제공하는 각종 API를 다루는 프로젝트를 생성하고

관리할 수 있도록 만들어둔 놀라운 웹 어플리케이션입니다.

주소는 https://console.developers.google.com 입니다.

 

Google API Console에 접속하면 우측에 Google에서 제공하는 각종 API들이 보일 것입니다.

이 중 Google Drive API를 선택해봅니다.

▷그림1. Google Drive API 초기화면

[그림1]과 같이 Google Drive API를 처음 간략한 설명이 나옵니다.

상단부의 프로젝트 만들기를 클릭합니다.

 

▷그림2. 프로젝트 만들기

 

[그림2]과 같이 프로젝트 이름을 설정하고, API 사용 관련 약관에 동의한 후 '만들기' 버튼을 클릭합니다.

 

▷그림3. Google API 사용설정

[그림3]과 같이 사용 설정을 클릭하여 Google Drive API의 사용 설정을 합니다.

 

▷그림4. Google Drive API 사용등록

[그림4]과 같이 Google Drive API 사용설정을 누르고 나면 사용 상태로 변경되며 이제 개인이 만든 어플리케이션에서 사용자 인증을 통하여

해당 API를 사용하도록 처리해야합니다.

 

▷그림5. 사용자 인증 정보

[그림5]과 같이 사용자 인증 정보 메뉴를 클릭하고 사용자 인증 정보를 만들도록 합니다.

▷그림6. 사용자 인증 정보_2

 

[그림6]과 같이 사용자 인증정보 만들기를 클릭하면 1. API키, 2. OAuth 클라이언트 ID, 3. 서비스 계정 키 가 보입니다.

우리에게 필요한건 API키와 OAuth 클라이언트 ID입니다. 순서대로 만들어보도록 합니다. 

▷그림7. API키 생성

[그림6]의 API 키 메뉴를 선택하게 되면 [그림7]과 같이 새 키 생성이 나옵니다.

우리는 웹 브라우저에서 동작하는 웹어플리케이션을 구현하기 때문에 '브라우저 키' 를 클릭합니다.

 

▷그림8. 브라우저 API키 생성

[그림8]과 같이 브라우저 API키의 이름을 설정합니다. HTTP 리퍼러 요청 허용에 대하여는 선택 사항입니다만..

*.googledrive.com 을 입력해두셔도 됩니다...(필자는 그 어떤 노란경고등도 원하지 않으므로 일단 입력했습니다.)

이후 생성된 API키를 확인할 수 있습니다.

나중에 스크립트 소스에 필요하므로 미리 메모헤둡니다. 

▷그림9. OAuth 클라이언트 ID 만들기

API 키 생성할때와 마찬가지로 OAuth 클라이언트 ID도 만들어줍니다.

승인된 자바스크립트 원본에는 이전에 manage.html로 접속해보면 주소가 바뀌는데

https://변경주소.googledrive.com 를 입력해줍니다.

승인된 리디렉션 URI에는 우리가 이전 챕터에서 확인 했던 manage.html 주소를 입력합니다.

생성된 OAuth 클라이언트 ID도 저장해둡니다.

 

 

API키와 OAuth 클라이언트 ID 생성이 완료되었습니다.

다음 글에서는 스크립트 소스에서 해당 키와 아이디를 통해 구글 드라이브에 접근하도록 해보겠습니다.

 

 

 

 

 

 

신고

안녕하세요 이번엔 짧게 포스트를 작성해봅니다...

GoogleDrive API를 사용하려하기 전에

관리자 또는 외부 접근자가 제가 올려둔 html파일을 접근하기 위한 주소를 찾는 방법을 알아보려합니다. 

 

▷그림1. 링크 공유 주소 찾기

 

[그림1]과 같이 이전에 설정해둔 공유 설정이 된 폴더를 우클릭하여 <공유 가능한 링크 가져오기>를 클릭해봅니다.

▷그림2. 링크 주소 복사

[그림2]와 같이 폴더ID가 포함된 주소가 나옵니다.

https://drive.google.com/folderview?id=개인별폴더아이디&usp=sharing 와 같은 주소가 자동으로 클립보드에 복사될겁니다.

(IE에서는 일부 버그때문에 제대로 링크주소창이 나오지 않는 경우가 있네요)

 

이제 접근할 수 있는 폴더를 알았다면 실제 manage.html과 retrieve.html에 접근할 수 있는 URL을 만들어보도록 해봅니다.

단순히 저 링크를 따라간다면 실제 구글 드라이브 웹어플리케이션이 나오지만 이 어플리케이션이 목적은 순수하게 웹 페이지의 접근이므로

구글링과 각종 매뉴얼을 통해 얻은 주소 형태를 알려드립니다.

 

https://googledrive.com/host/개인별폴더아이디/내부파일명

결국...https://googledrive.com/host/개인별폴더아이디/manage.html 와 같이 접근할 수 있겠네요

이 주소는 잘 메모를 해둡시다.

다음 포스트에서는 정말로 GoogleDrive API를 통해 접근할 수 있도록 프로젝트를 생성해보겠습니다..!

 

 

신고

+ Recent posts

티스토리 툴바