在网页上显示来自Google云端硬盘的文档 [英] Showing documents from Google Drive on webpage

问题描述

是否可以在网页上显示我驱动器上的文件？我希望用户能够直接从我的驱动器上单击文档并下载它。我会如何去做这件事？感谢您的建议。

解决方案

对于HTML / JavaScript解决方案，请查看以下链接： b

https://developers.google.com/drive/quickstart-js

https://www.youtube.com/watch ？v = 09geUJg11iA

https：/ /developers.google.com/drive/web/auth/web-client

以下是使用JavaScript的最简单方法，大部分复杂程度都在
您的WebApp授权。以下示例会读取您指定的文件夹中的文件ID，名称和说明。

- 转至： https://cloud.google.com/console/project
并创建一个新项目xyz
b $ b - 选择APIs& auth，禁用那些你不需要的，启用Drive API

- 选择Credentials，
推CREATE NEW CLIENT ID按钮

x Web应用
程序

授权的Javascript起源： https://googledrive.com/ br />
授权重定向URI： https://googledrive.com/oauth2callback >

将导致：
客户端ID：xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com

电子邮件地址：[e-mail] <
客户机密： xxxxxxxxxxxxxxxxxxxx

重定向URI： https://googledrive.com/oauth2callback

Javascript起源： https://googledrive.com/


- 在下面的代码中，用xxxxxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com中的
CLIENT_ID替换您在文件夹地址行中看到的ID，然后将
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'; //文件夹文件驻留在
 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描述，
]; 
 
函数rsvpCB（resp）{
 var picAlbumLst ='< ul> \\\
'; 
 for（i = 0; i< resp.items.length; i ++）
 picAlbumLst + =（
'< li> + resp.items [i] .id +'，& amp ; NBSP; '+ resp.items [I] .title伪+'，&安培; NBSP; '+ resp.items [I] .DESCRIPTION +' < /立GT; \\\
'）; 
 picAlbumLst + =< / ul> \\\
; 
 $（'＃container'）。append（picAlbumLst）; 
} 
函数rqstCB（）{//测试@ https://developers.google.com/drive/v2/reference/files/list 
 var rv = gapi.client.drive。 files.list（{$ b $'q'：''''+ FOLDER_ID +'in parents and trashed = false'，
'fields'：'items（id，title，description）'//'items （id，title，description，indexableText）'
}）。execute（rsvpCB）; 
} 
 //授权服务器回复
函数onAuthResult（authResult）{
 var authButton = document.getElementById（'authorizeButton'）; 
 authButton.style.display ='none'; 
 if（authResult&&！authResult.error）{//访问令牌成功检索
 gapi.client.load（'drive'，'v2'，rqstCB）; 
} else {//没有获取访问令牌，强制授权流程。 
 authButton.style.display ='block'; 
 authButton.onclick = function（）{
 checkAuth（false）; 
} 
} 
} 
 //检查当前用户是否授权该应用程序。 
函数checkAuth（bNow）{
 gapi.auth.authorize（{'client_id'：CLIENT_ID，'scope'：SCOPE，'immediate'：bNow}，onAuthResult）; 
} 
 //在客户端库加载时调用，看下面
函数onLoadCB（）{
 checkAuth（true）; 
} 
< / script> 
< script src =https://apis.google.com/js/client.js?onload=onLoadCB>< / script> 
< body style =background-color：transparent;> 
< input type =buttonid =authorizeButtonstyle =display：nonevalue =Authorize/> 
< div id =container> 
< / div> 
< / body> 
  

Is it possible to show the documents from my drive on a webpage? I want the user to be able to click the document and download it, directly from my drive. How would I go about doing this? Thank you for your suggestions.

解决方案

For HTML/JavaScript solution, look at the following links:

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

Here's the simplest way using JavaScript, most of the complexity is in your WebApp authorization. The example below reads files IDs, names and description in a folder you specify.
- go to: https://cloud.google.com/console/project and create a new project "xyz"
- Select "APIs & auth", disable the ones you don't need, enable "Drive API"
- Select "Credentials",
push "CREATE NEW CLIENT ID" button
x Web Application
Authorized Javascript origins: "https://googledrive.com/"
Authorized redirect URI: "https://googledrive.com/oauth2callback"

it will result in:
Client ID: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com
Email address: [e-mail]
Client secret: xxxxxxxxxxxxxxxxxxxx
Redirect URIs: https://googledrive.com/oauth2callback
Javascript Origins: https://googledrive.com/

- in the code below, replace
CLIENT_ID with xxxxxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com
FOLDER_ID with the ID you see in the folder address line,
https://drive.google.com/?tab=mo&authuser=0#folders/xxxxxxxxxxxxxxxxxxx

- run it, authorize

I don't know if you read JS, the code can be followed from bottom up, I made is as simple as possible.

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

这篇关于在网页上显示来自Google云端硬盘的文档的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！