onedrive-cf-index

演示版

Spencer的OneDrive Index上的现场演示。

特征

? 一般

• 面包屑可提供更好的导航。
• 使用Cloudflare Workers KV存储缓存令牌并自动刷新令牌。
• 在Turbolinks®的帮助下进行延迟加载。
• 支持OneDrive 21Vianet。（由世纪互联运营的OneDrive。）

?️ 文件夹索引

• 通过spencer.css完成新的可定制设计。
• 可用表情符号作为文件夹图标（如果文件夹名称的第一个字符是表情符号）。
• README.md在当前文件夹中找到时渲染。用github-markdown-css渲染。
• 支持分页，不再有限制，例如每个文件夹最多200个项目！

? 文件预览

• 根据文件类型呈现的文件图标，更干净的字体真棒图标。
• 纯文本：.txt。DEMO。
• 降价：.md，.mdown，.markdown。DEMO。
• 图片，支持中长款的变焦效果：.png，.jpg，和.gif。DEMO。
• 与代码语法高亮：.js，.py，.c，.json… DEMO。
• PDF：延迟加载，加载进度和内置的PDF查看器。DEMO。
• 音乐/音频：.mp3，.aac，.wav，.oga。DEMO。
• 视频：.mp4，.flv，.webm，.m3u8。DEMO。

⬇️ 代理/原始文件下载

• [可选]代理下载：?proxied-如果（1）proxyDownload为true，config/default.js并且url中包含（2）参数，则通过CloudFlare Workers下载文件。
• [可选]原始文件下载：?raw-如果存在参数，则返回直接原始文件，而不是丰富的渲染预览。
• 这两个参数可以并行使用，这意味着?proxied&raw和?raw&proxied都有效。

是的，这意味着您可以将该项目用作图像存储服务或用于提供静态文件，例如：

https://www.lizi.tw/wp-content/uploads/2021/01/nyancat.gifraw.png

其他

请参阅原始的onedrive-index-cloudflare-worker项目页面上的“新功能”部分以供参考，尽管我不能保证所有功能都可以使用。

部署方式

非常非常漫长而乏味的逐步指南警告！在线令牌生成工具取自慷慨：https : //heymind.github.io/tools/microsoft-graph-api-auth。我们将在以下步骤中使用它。

生成OneDrive API令牌

1. 在以下位置创建新的刀片应用程序：Microsoft Azure应用程序注册（OneDrive普通版）或Microsoft Azure.cn应用程序注册（OneDrive世纪互联版本）：
   1. 使用您的Microsoft帐户登录，然后选择New registration。
   2. 例如Name，您的刀片应用程序的输入my-onedrive-cf-index。
   3. 设置Supported account types到Accounts in any organizational directory (Any Azure AD directory - Multitenant) and personal Microsoft accounts (e.g. Skype, Xbox)。OneDrive世纪互联用户设置为：任何组织目录（任何 Azure AD 目录 - 多租户）中的帐户。
   4. 设置Redirect URI (optional)为Web（多选下拉列表）和https://heymind.github.io/tools/microsoft-graph-api-auth（URL）。
   5. 点击Register。

   

2. client_id在Overview面板上获取您的应用程序（客户端）ID 。
3. 打开Certificates & secrets面板，单击New client secret并创建一个新的秘密，称为client_secret，设置Expires为Never，单击Add，然后复制Value的client_secret（您只有一次机会将其复制。）。
4. 打开API permissions面板，选择Microsoft Graph，选择Delegated permissions，搜索offline_access, Files.Read, Files.Read.All，选择全部三个，然后单击Add permissions。

   您应该准备好以下权限：

   

5. 得到你的refresh_token：
   1. 打开https://heymind.github.io/tools/microsoft-graph-api-auth。
   2. 在4. Authorize for code，输入我们的client_id，然后点击AUTHORIZE。

      登录您的Microsoft帐户并授权我们的应用程序，如果返回的代码如下所示，则您的授权过程将成功：

      

      点击OK，进入下一阶段。

   3. 在处5. Exchange Access Token，Code应该已经为我们输入了正确的位置，我们只需要输入client_secret：

      点击GET TOKEN。如果出现类似的错误error: "invalid_request"，则请解决固定问题＃13中建议的解决方案。否则，请收集您的物品，access_token如果需要，也可以使用决赛Refresh Token来收集您refresh_token的物品。

6. 最后，在OneDrive中为您的公共文件创建一个专用文件夹，例如：/Public。请不要直接共享您的根文件夹！

经过所有这些麻烦之后，您应该已经成功获取以下令牌和机密：

• refresh_token
• client_id
• client_secret
• redirect_uri：默认为https://heymind.github.io/tools/microsoft-graph-api-auth。
• base：默认为/Public。

是的，我知道这是一个漫长而乏味的过程，但是我们可以理解的是微软。♂️

准备工作

分叉或直接克隆此存储库。安装依赖项，您将需要Node.jsnpm和wrangler。

我们强烈建议您使用n或nvm之类的Node版本管理器安装npm ，这将允许wrangler在用户主目录下的全局node_modules目录中安装配置数据，而无需以root用户身份运行。

＃安装cloudflare worker官方打包和发布工具
npm我@ cloudflare / wrangler -g

＃使用npm安装依赖项
npm安装

＃用牧马人登录Cloudflare
牧马人登录

＃使用此命令
wrangler whoami验证wrangler状态

通过https://dash.cloudflare.com/login登录到您的CloudFlare帐户，选择您的域，然后向下滚动一点。你会看到你account_id和zone_id那里（右侧边栏）。还要在一个很酷的名称-> ->处创建一个DRAFT worker 。WorkersManage WorkersCreate a Worker

修改wrangler.toml：

• name：工作人员的名字，您的工作人员将在发布<name>.<worker_subdomain>.workers.dev。
• account_id：您的Cloudflare帐户ID。
• zone_id：您的Cloudflare区域ID。

创建名为的Cloudflare Workers KV存储桶BUCKET：

＃创建KV桶
牧马人kv：namespace创建“ BUCKET ”

＃ ...或者，在启用了预览功能的情况下创建KV存储桶
wrangler kv：namespace创建“ BUCKET ” --preview

kv_namespaces在内部修改wrangler.toml：

• kv_namespaces：您的Cloudflare KV名称空间，应相应地替换id 和preview_id值。如果不需要预览功能，则可以删除该preview_id字段。

修改src/config/default.js：

• client_id：你client_id从上面来。
• base：您base从上方的路径。

对于中国21Vianet OneDrive用户。OneDrive世纪互联用户：将useCnEndpoints设置（修改）为true。

使用以下命令向Cloudflare Workers环境变量添加机密wrangler：

＃将您的refresh_token和client_secret添加到Cloudflare
牧马人的秘密把REFRESH_TOKEN
＃ ...从上方输入您的refresh_token

牧马人的秘密把CLIENT_SECRET
＃ ...从上方输入您的client_secret

构建和部署

您可以使用以下方式预览工作人员wrangler：

牧马人预览

确保一切正常后，您可以使用以下方式发布您的工作者：

牧马人发布

您还可以创建GitHub Action，以在上自动发布工作人员push。参见main.yml。

对于自定义域，请参阅如何在自定义域上设置Cloudflare Workers。

客制化

• 您可以（并应该）intro在此处更改默认登录页面：src / folderView.js。直接编写HTML。
• 您可以（也应该）在此处更改网站的标题：src / render / htmlWrapper.js。
• 您的自定义样式是从theme / spencer.css加载的，请根据您的自定义进行更改。您还需要在src / render / htmlWrapper.js更改提交哈希。
• 您还可以自定义Markdown CSS样式，PrismJS代码突出显示配色方案等。

https://github.com/spencerwooo/onedrive-cf-index