Отображение документов с Google Диска на веб-странице

Можно ли показать документы с моего диска на веб-странице? Я хочу, чтобы пользователь мог щелкнуть документ и загрузить его прямо с моего диска. Как мне это сделать? Спасибо вам за ваши предложения.


javascript php google-drive-api google-drive-realtime-api
person Ralph David Abernathy    schedule 26.01.2014    source источник

Ответы (4)


arrow_upward
4
arrow_downward

Для решения HTML/JavaScript просмотрите следующие ссылки:

https://developers.google.com/drive/quickstart-js
https://www.youtube.com/watch?v=09geUJg11iA
https://developers.google.com/drive/web/auth/web-client

Вот самый простой способ использования JavaScript, большая часть сложности заключается в авторизации вашего веб-приложения. В приведенном ниже примере считываются идентификаторы, имена и описания файлов в указанной вами папке.
 – перейдите по адресу: https://cloud.google.com/console/project и создайте новый проект "xyz"
- выберите "API и авторизация", отключите ненужные, включите "Drive API"
 – Выберите "Учетные данные",
нажмите кнопку "СОЗДАТЬ НОВЫЙ ИДЕНТИФИКАТОР КЛИЕНТА"
x Веб-приложение
Авторизованные источники Javascript: "https://googledrive.com/"
URI авторизованного перенаправления: "https://googledrive.com/oauth2callback"

это приведет к следующему:
Идентификатор клиента: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com
Адрес электронной почты: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx@ developer.gserviceaccount.com
Секрет клиента: xxxxxxxxxxxxxxxxxxx
URI перенаправления: https://googledrive.com/oauth2callback
Источники JavaScript: https://googledrive.com/

 — в приведенном ниже коде замените
CLIENT_ID на xxxxxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com
FOLDER_ID на идентификатор, который вы видите в адресной строке папки,
https://drive.google.com/?tab=mo&authuser=0#folders/xxxxxxxxxxxxxxxxxxx

- запустить, авторизоваться

Не знаю, читаете ли вы JS, код можно следовать снизу вверх, я сделал максимально просто.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
  var FOLDER_ID = '.xxxxxxxxxxxxxxxxxx';    // the folder files reside in
  var CLIENT_ID = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com';
  var SCOPE =    //'https://www.googleapis.com/auth/drive'; 
  [
    'https://www.googleapis.com/auth/drive',
    'https://www.googleapis.com/auth/drive.file',     // for description, 
  ];

  function rsvpCB(resp) {
    var picAlbumLst = '<ul>\n';
    for (i=0; i<resp.items.length; i++) 
      picAlbumLst += (
      '  <li>'+resp.items[i].id+',&nbsp;'+resp.items[i].title+',&nbsp;'+resp.items[i].description+'</li>\n');
    picAlbumLst += "</ul>\n";
    $('#container').append(picAlbumLst);
  }
  function rqstCB() {   //test @ https://developers.google.com/drive/v2/reference/files/list
    var rv = gapi.client.drive.files.list({
      'q': '"'+FOLDER_ID+'" in parents and trashed = false',
      'fields' : 'items(id,title,description)'   //'items(id,title,description,indexableText)'   
    }).execute(rsvpCB);
  }
  // authorization server reply
  function onAuthResult(authResult) {
    var authButton = document.getElementById('authorizeButton');
    authButton.style.display = 'none';
    if (authResult && !authResult.error) {  // access token successfully retrieved
      gapi.client.load('drive', 'v2', rqstCB);   
    } else {  // no access token retrieved, force the authorization flow.
      authButton.style.display = 'block';
      authButton.onclick = function() {
        checkAuth(false);
      }
    }
  }
  // check if the current user has authorized the application.
  function checkAuth(bNow) {
    gapi.auth.authorize({'client_id':CLIENT_ID, 'scope':SCOPE, 'immediate':bNow}, onAuthResult);
  }
  // called when the client library is loaded, look below
  function onLoadCB() { 
    checkAuth(true); 
  }
</script>
<script src="https://apis.google.com/js/client.js?onload=onLoadCB"></script>
<body style="background-color: transparent;">
  <input type="button" id="authorizeButton" style="display: none" value="Authorize" />
  <div id="container">
  </div>
</body>
person seanpj    schedule 26.01.2014

arrow_upward
5
arrow_downward

Самое быстрое и простое решение — встроить папку с помощью iframe (javascript не требуется). Очевидно, что это также наименее гибкое решение, хотя вы можете использовать CSS для изменения макета содержимого iframe (см. ниже).

Google Диск не позволит встроить URL-адрес, который вы обычно используете. В его заголовке X-Frame-Options установлено значение «SAMEORIGIN», что предотвращает использование в iframe. Поэтому вам нужно использовать следующую ссылку, которая разрешит встраивание:
https://drive.google.com/embeddedfolderview?id=DOCUMENT_ID#VIEW_TYPE

DOCUMENT_ID – это идентификатор, который упоминается в обычной ссылке для общего доступа (которая выглядит как https://drive.google.com/folderview?id=DOCUMENT_ID), поэтому вы можете просто скопировать его оттуда.

VIEW_TYPE должен быть либо "сеткой", либо "списком", в зависимости от ваших предпочтений.

И если вам нужно изменить стиль содержимого iframe, взгляните на это решение< /а>.

person diggie    schedule 24.04.2014
comment
Это решение работает, если вошедший в систему пользователь имеет доступ к папке, которая должна отображаться. Но это не работает, чтобы перечислить личные папки какого-либо другого пользователя. - person Victoria; 05.07.2014

arrow_upward
1
arrow_downward

Это следует сделать с помощью API Google. Вы можете искать google drive php api list files в google. А также я нашел это и это на SO.

person machineaddict    schedule 26.01.2014

arrow_upward
1
arrow_downward

Вот несколько основных моментов:

  • Вы хотите, чтобы любой, у кого есть URL-адрес, мог видеть ваш документ? Вы можете поделиться документом как общедоступным с кем угодно в Интернете. Кроме того, вы можете установить доступ для чтения к определенным папкам. Просто щелкните правой кнопкой мыши файл Google Doc и выберите «Поделиться» в контекстном меню.
  • Я предполагаю, что вы хотите, чтобы люди загружали ваши документы, даже если вы не вошли в систему. Это называется «автономный доступ» и является одним из многих терминов, которые вам нужно выяснить, чтобы сделать все это с помощью программа.
  • Если вы хотите предоставить пользователю только read access, использование JavaScript, jQuery и т. д. во внешнем интерфейсе является приемлемым вариантом. Вы также можете сделать это в PHP, это просто вопрос личных предпочтений.
  • Чтобы сделать все это в коде, вам нужно предоставить авторизацию для чтения ваших файлов. Процесс oAuth2 состоит из нескольких шагов, и полезно понимать основной поток. Настройка кода и веб-страниц для первоначальной авторизации, а затем извлечения и хранения токенов может привести к путанице.
  • В вашем проекте Google указан источник запроса на авторизацию. Это ваш сайт. Но если вы хотите разрабатывать и тестировать локально, вы можете установить Javascript Origins на http://localhost.
  • Сколько у вас есть времени и какой опыт программирования? Было бы проще дать пользователю несколько строк инструкции «Вручную» загрузить ваш файл, а не запрограммировать проверку авторизации?
  • Поместить документ на вашу веб-страницу — самая простая часть.
  • Чтобы встроить документ Google на свой веб-сайт, перейдите на свой Google Диск, откройте документ и выберите File, затем Publish to Web, и вам будет предоставлен HTML-тег iFrame, который можно встроить в вашу веб-страницу. Вы можете изменить высоту и ширину iFrame, чтобы они соответствовали размеру документа. Инструкции по iFrame W3Schools
  • Загрузить документ можно очень легко из онлайн-версии общего документа, просто выбрав FILE, а затем DOWNLOAD AS в меню.
  • Чтобы быстро приступить к работе, просто дайте пользователю пару строк инструкций о том, как загрузить «Вручную», а затем посмотрите, сможете ли вы запрограммировать код.
  • Предоставьте ссылку на общий документ вместо того, чтобы программировать кнопку, а затем поработайте над кодом.
  • Поищите Git Hub на Google Диске, возможно, вы что-нибудь там найдете.
  • Некоторые из официальных примеров кода Google намного сложнее, чем вам нужно, и вам потребуется много времени, чтобы разобраться. Примеры кода на страницах документации проще, но почти никогда не являются полными работающими примерами кода. Вам нужно собрать множество кусочков головоломки вместе, чтобы заставить ее работать.
person Alan Wells    schedule 27.01.2014
comment
Google усложняет задачу из-за всего этого дерьма OAuth2. Раньше я получал файлы (применимо ТОЛЬКО к ИЗОБРАЖЕНИЯМ) из Picasa одним простым шагом, см. этот пост: stackoverflow.com/questions/21063514/ и его портирование на Диск включало весь приведенный выше код - в основном авторизацию. - person seanpj; 27.01.2014