托管在 Google Drive 文件夹中的图片库

Question

我一直在寻找一种在网站上创建画廊的方法，其中包含来自我的谷歌驱动器文件夹中的图像。我在这里分享了：https://drive.google.com/drive/u/0/folders/0Bwx-OwnNeIvwRldSVlU5SGN0dGs 里面是一个简单的 HTML，还有一个画廊文件夹，里面有怪物卡车和可爱动物的图片。目标是创建一个画廊，人们可以上传井的图像；怪物卡车和可爱的动物。

我一直在寻找各种方法来实现这一点，这就是我目前发现的：

简而言之，我想要实现的是在我的 G-Drive 的公共共享文件夹中获取图像的 ID。然后使用这些 id 通过 JS 在 HTML 中创建画廊。

我的 HTML 现在的样子：

index.html

<h1>Cute Animals & <br> 
Monster Vehicles</h1>

<div id="gallery">
<!-- all divs will append here -->
</div>

我对 Drive SDK 的研究：

我一直在这里使用“尝试一下”部分来弄清楚我需要做什么。 https://developers.google.com/drive/v2/reference/children/list#examples

请求结果：GET https://www.googleapis.com/drive/v2/files/0Bwx-OwnNeIvwRG5rNzZ6OURSNEk/children?fields=items%2Fid

响应结果：

200 OK
- SHOW HEADERS -
{
"items": [
{
 "id": "0Bwx-OwnNeIvwaFZXVzVmMl9ILUU"
},
{
 "id": "0Bwx-OwnNeIvwVk1DTEpnR0J6VHc"
},
{
 "id": "0Bwx-OwnNeIvwblBHLVEza0hxY2s"
},
{
 "id": "0Bwx-OwnNeIvwTkZZVXp0dDg4bXc"
},
{
 "id": "0Bwx-OwnNeIvwZTN1YzZrcm53eFE"
},
{
 "id": "0Bwx-OwnNeIvwYkZ5ZXpjWHhKcFk"
}]}

我希望脚本做什么：

script.js

var imageIds = <!-- ids from the the response --> ;
var x = imageIds.length;
for (var i = 0; i < x; i++) {
 <!-- create a <div> --> 
}
//See below*

创建一个 div： 在 for 循环中，它将创建一个 <div>，其中包含一个特定的 "class" 和一个 <img> 在该 div 内，以及一个 "src="http://drive.google.com/uc?export=view&id=IMAGE-ID"，其中“IMAGE- ID”是从 “响应” 中获得的。然后<div> 将附加到 index.html 中的<div id="gallery">。

我想要的最终 HTML 看起来像：

index.html：

<h1>Cute Animals & <br> 
Monster Vehicles</h1>

<div id="gallery">

   <div class="brick">
      <img src="http://drive.google.com/uc?export=view&id=0Bwx-OwnNeIvwaFZXVzVmMl9ILUU">
   </div>

   <div class="brick">
      <img src="http://drive.google.com/uc?export=view&id=0Bwx-OwnNeIvwVk1DTEpnR0J6VHc">
   </div>

   <div class="brick">
      <img src="http://drive.google.com/uc?export=view&id=0Bwx-OwnNeIvwblBHLVEza0hxY2s">
   </div>

 <!-- and so on ... -->

</div>

我现在不确定的是，需要如何对其进行身份验证才能从 G-Drive 文件夹中获取图像 ID。这可以通过 Google 云端硬盘本身及其托管链接托管，也可以通过 Google Apps 脚本创建，以及在那里提供 HTML 的功能，这将使身份验证更容易因为您可以直接从云端硬盘获取所有内容。

我不明白为什么这里找不到，不涉及付款。如果每个人都有机会从 G-Drive 文件夹中的图像创建图像库，那就太好了。

非常希望您能在这方面提供帮助。非常感谢。

Answer 1

首先，关于代码本身，大概是这样的：

document.addEventListener('DOMContentLoaded', function() {
  var response = {
    "items": [{
      "id": "0Bwx-OwnNeIvwaFZXVzVmMl9ILUU"
    }, {
      "id": "0Bwx-OwnNeIvwVk1DTEpnR0J6VHc"
    }, {
      "id": "0Bwx-OwnNeIvwblBHLVEza0hxY2s"
    }, {
      "id": "0Bwx-OwnNeIvwTkZZVXp0dDg4bXc"
    }, {
      "id": "0Bwx-OwnNeIvwZTN1YzZrcm53eFE"
    }, {
      "id": "0Bwx-OwnNeIvwYkZ5ZXpjWHhKcFk"
    }]
  };

  var imageIds = response.items.map(function(item) {
    return '<div class="brick"><img src="http://drive.google.com/uc?export=view&id=' + item.id + '"></div>';
  });

  document.getElementById('gallery').insertAdjacentHTML('afterbegin', imageIds.join(''));
});

<div id="gallery"></div>

---

关于授权，take a look at their documentation。