Javascript 谷歌硬盘文件夹中托管的图像库

我一直在寻找一种方法，在一个网站上创建一个图库，其中包含我的谷歌硬盘文件夹中的图像。我在这里分享了： 里面有一个简单的HTML，还有一个画廊文件夹，里面有怪物卡车和可爱动物的图片。我们的目标是创建一个画廊，人们可以在这里上传井的图像；怪物卡车和可爱的动物

我一直在寻找实现这一目标的各种方法，到目前为止，我发现：

简言之，我试图实现的是在我的G-Drive中的公共共享文件夹中获取图像的id。然后使用这些id在HTML中通过JS创建一个图库

我的HTML现在是什么样子：

index.html

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

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

我希望脚本执行以下操作：

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*

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

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

---

我真的很想得到你的帮助。非常感谢

首先，关于代码本身，应该是这样的：

document.addEventListener（'DOMContentLoaded'，function（）{
var响应={
“项目”：[{
“id”：“0Bwx-OwnNeIvwaFZXVzVmMl9ILUU”
}, {
“id”：“0Bwx-OWNNEIVWK1DTEPNR0J6VHC”
}, {
id:“0Bwx-OWNNEIVWBHLVEZA0HXY2S”
}, {
“id”：“0Bwx-OwnNeIvwTkZZVXp0dDg4bXc”
}, {
id:“0Bwx-OWNNEIVWZTN1YZRCM53EFE”
}, {
“id:“0Bwx-OwnNeIvwYkZ5ZXpjWHhKcFk”
}]
};
var imageIds=response.items.map（函数（项）{
返回“”；
});
document.getElementById（'gallery'）.insertAdjacentHTML（'afterbegin'，imageid.join（''）；
});
哇，这太棒了，非常感谢：）我正在查看授权，但我更愿意在这里查看吗？：因为还有一部分关于“儿童：列表”的授权，我认为这是我应该使用的是？@WilliamLarsenBang是的，更好。我向您发送的其他文档是关于一般身份验证的（例如：如何生成web令牌等）。您的链接假设您已经了解了基础知识，以及应该如何使用身份验证来获取子项。如果您还不知道如何进行身份验证，这两种方法都是必需的：）我明白了，坦白地说，我不知道如何进行身份验证，但我真的应该学习它，因为我也需要它用于其他项目。另一个问题？是否仍要预加载您编写的此函数？驱动器托管已被弃用。是否要使用应用程序脚本执行此操作？然后，您就可以在没有任何身份验证的情况下执行此操作。然而，如果你把你的网站放到appengine上，你需要身份验证来访问你自己的gdrive文件。最简单的选择可能是使用应用程序脚本，而不是将指向图像的链接放入html中，而是按此处所示嵌入它们。这样，您就不必共享图像文件。不过，AppEngine的功能要强大得多，是一个更专业的解决方案。顺便说一句。试试这个。它解释了如何使用AppEngine作为一个简单的文件托管服务（即使它能够做的远不止这些）。如果您决定使用Apps脚本，请再添加一个链接。如何将文件上载到使用应用程序脚本编写的Web应用程序。
var imageIds = <!-- ids from the the response --> ;
var x = imageIds.length;
for (var i = 0; i < x; i++) {
 <!-- create a <div> --> 
}
//See below*

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