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

이번에는 본격적으로 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를 통해 접근할 수 있도록 프로젝트를 생성해보겠습니다..!

 

 

신고

오늘은 20대 국회의원 선거날입니다..다들 투표는 하셨나요?

임시공휴일이기도하고.. 대학생들 시험기간이라 그런지 은근히 사람이 많네요

 

지난 포스트까지 구글 드라이브의 공유 폴더를 만드는 작업을 했습니다.

이번 포스트에서는 전체적인 어플리케이션의 구성 및 데이터 흐름을 정립해봅니다.

 

플로우차트입니다..

정말 쉽고 간단하게 설명하고 싶지만 재주가 없어 복잡하게 설명을 써보자면..

 

1. 관리자는 manage.html 파일에 접근합니다.

   a. retrieve.html을 읽어들여 현재 저장되어 있는 데이터를 조회합니다.

   b. OAuth2.0 인증을 하여 현 세션에 대하여 파일처리를 위한 준비를 마칩니다.

      (GoogleDrive API의 파일처리를 위해서는 OAuth2.0 인증이 요구됩니다.)

   c. 데이터를 조작한 후 manage.html의 동적 HTML DOM을 자바스크립트 객체에 담아

      text/html 형태로 저장합니다. 이 때 retrieve.html에 저장하며 덮어쓰기를 합니다.

 

2. 일반 사용자는 retireve.html에 접근하며 단순히 Public URL로만 접근하여 html페이지의 내용만 확인하므로

   특별한 인증처리는 하지 않습니다.

 

글을 읽는 분들이 이해가 가셨으면 좋겠습니다.

retrieve.html은 결국 단순한 데이터 페이지일뿐이며 모든 컨트롤은 manage.html에서 처리를 하게됩니다.

 

 

위 그림처럼 manage.html과 retrieve.html을 생성했습니다.

내용은 아무것도 없는 html 기본 태그들만 넣어둔 html 파일입니다.

파일크기가 서로 다른 이유는.. DOCTYPE 설정때문에 그런듯합니다.

 

다음 포스트는 드라이브용 API를 사용하여 manage.html과 retrieve.html에 접근하는 방법을 써보려합니다!!

 

신고

tistory용으로 구글 계정을 하나 더 만들었습니다.

오늘의 목표는 외부에서 접근할 수 있도록 Public URL을 얻는 것!! 


일단 구글 드라이브 https://drive.google.com 에 접속해보면 깨끗합니다.


▷그림1. 구글드라이브 컨트롤 메뉴


[그림1]의 새로 만들기를 눌러봅니다.

▷그림2. 새로만들기 메뉴


[그림2]를 보듯 폴더 파일 업로드 및 Google에서 제공하는 각종 오피스 문서들을 생성할 수 있습니다.

저같은 허접은 이용하는것만으로도 감지덕지 하네요...

폴더를 클릭하시고 폴더 이름을 정해보겠습니다. 


▷그림3. 폴더 생성


잘 생성이 되었습니다...사실 별거 아니죠...그냥 하나하나 남기고 나중에 추억팔이할라고 열심히 쓰고있습니다..하하;;

잘 보시면 [dev_test_folder] 밑에 "공유 문서함" 이라는 매력적인 녀석이 보이는데 클릭 해봐야 암것도 안뜹니다.

(아마 진짜 문서파일을 공유할 때 쓰는듯 해보이는데...사실 저 메뉴의 목적은 아직 잘 모르겠습니다.)

 

 

일단 만들어둔 폴더를 우클릭합니다.

▷그림4. 폴더 공유


[그림4]가 보이시나요! 뭔가 이끌리는 단어 "공유"를 클릭해봅니다.

▷그림5. 폴더 공유 옵션

이번 블로그의 목적은 접근하여 수정하도록 하는거니까 다 오픈합니다.! 

▷그림6. 더보기 옵션

[그림5]의 하단부의 더보기 옵션을 클릭하여 웹에 폴더를 공개합니다.


▷그림7. 최종 옵션

모든 옵션을 열어버리면 [그림7]처럼 확인이 가능해집니다!!



신고

타부서 동기 브라더가 일일히 수기로 입력하던 증빙자료를 자동화 해보겠다며 

VB까지 더듬더듬 익혀서 버튼 한방에 자동 처리를 해주는 엑셀 파일을 만들면서

저에게 원본 데이터를 관리할 수 있는 웹페이지를 만들어 줄 수 있냐길래

쪼렙 개발자인 저도 그의 열정이 감탄하여 Public URL을 제공해주던 Dropbox의 Developer API를 사용하여 만들었습니다.

근데 최근인지 언제인지 Dropbox API가 많이 바뀐 관계로 클라우드 스토리지 서비스 중 Public URL을 제공하며 

Javascript를 이용하여 HTML 파일 조회 및 업데이트를 할 수 있는걸 찾다가 구글 드라이브를 골라봤습니다..



 


애초에 Server-Client가 가능한 웹 환경이였으면 고민도 안하고 txt파일 하나 생성해서 자바 파일처리 했을텐데...

그러는게 불가능하여 모든건 구글 드라이브에서 제공하는 Javascript REST API를 이용했습니다.




※ REST (REpresentational State Transfer) : URI, HTTP를 통해 서비스에 접근 


신고

+ Recent posts

티스토리 툴바