onedrive-cf-index

由 CloudFlare Workers 强力驱动的 OneDrive 索引

---

本项目使用 CloudFlare Workers 帮助你免费部署与分享你的 OneDrive 文件。本项目极大源自：onedrive-index-cloudflare-worker，致敬。

Demo

在线演示：Spencer's OneDrive Index.

功能

🚀 功能一览

• 全新「面包屑」导航栏；
• 令牌由 Cloudflare Workers 自动刷新；
• 使用 Turbolinks® 实现路由懒加载；
• 支持由世纪互联运营的 OneDrive 版本；
• 支持 SharePoint 部署；

🗃️ 目录索引显示

• 全新支持自定义的设计风格：spencer.css；
• 支持使用 Emoji 作为文件夹图标（如果文件夹名称第一位是 Emoji 则自动开启该功能）；
• 渲染 README.md 如果当前目录下包含此文件，使用 github-markdown-css 渲染样式；
• 支持分页，没有一个目录仅限显示 200 个项目的限制了！

📁 文件在线预览

• 根据文件类型渲染文件图标，图标使用 Font Awesome icons；
• 支持预览：
  • 纯文本：.txt. DEMO.
  • Markdown 格式文本：.md, .mdown, .markdown. DEMO.
  • 图片（支持 Medium 风格的图片缩放）：.png, .jpg, and .gif. DEMO.
  • 代码高亮：.js, .py, .c, .json... DEMO.
  • PDF（支持懒加载、加载进度、Chrome 内置 PDF 阅读器）：.pdf. DEMO.
  • 音乐：.mp3, .aac, .wav, .oga. DEMO.
  • 视频：.mp4, .flv, .webm, .m3u8. DEMO.

🔒 私有文件夹

我们可以给某个特定的文件夹（目录）上锁，需要认证才能访问。我们可以在 src/auth/config.js 文件中将我们想要设为私有文件夹的目录写入 ENABLE_PATHS 列表中。我们还可以自定义认证所使用的用户名 NAME 以及密码，其中认证密码保存于 AUTH_PASSWORD 环境变量中

⬇️ 代理下载文件 / 文件直链访问

• [可选] Proxied download（代理下载文件）：?proxied - 经由 CloudFlare Workers 下载文件，如果（1）config/default.js 中的 proxyDownload 为 true，以及（2）使用参数 ?proxied 请求文件；
• [可选] Raw file download（文件直链访问）：?raw - 返回文件直链而不是预览界面；
• 两个参数可以一起使用，即 ?proxied&raw 和 ?raw&proxied 均有效。

是的，这也就意味着你可以将这一项目用来搭建「图床」，或者用于搭建静态文件部署服务，比如下面的图片链接：

https://storage.spencerwoo.com/%F0%9F%A5%9F%20Some%20test%20files/nyancat.gif?raw

其他功能

请参考原项目的「🔥 新特性 V1.1」部分：onedrive-index-cloudflare-worker，但我不保证全部功能均可用，因为本项目改动部分很大。

部署指南

整个过程会很麻烦，但这是微软，大家都懂

准备工作

1. 下载本仓库，解压到任意文件夹，并在计算机上安装Node.js

2. 打开文件夹，并在地址输入CMD，然后回车，执行以下命令以配置项目

   # 安装 CloudFlare Workers 官方编译部署工具
   npm i @cloudflare/wrangler -g
   
   # 使用 npm 安装依赖
   npm install
   
   # 使用 wrangler 登录 CloudFlare 账户
   wrangler login
   
   # 使用这一命令检查自己的登录状态
   wrangler whoami

生成 OneDrive API 令牌

1. 访问此 URL 创建新的 Blade app：Microsoft Azure App registrations（普通版 OneDrive）或 Microsoft Azure.cn App registrations（OneDrive 世纪互联版本），建议将语言设置为「英语」以保证以下步骤中提到的模块和按钮的名称一致：

   1. 使用你的 Microsoft 账户登录，选择 New registration；
   2. 在 Name 处设置 Blade app 的名称，比如 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（下拉选项框）以及 http://localhost:3000（URL 地址）；
   5. 点击 Register.

   

2. 在 Overview 面板获取你的 Application (client) ID - client_id：

   

3. 打开 Certificates & secrets 面板，点击 New client secret，创建一个新的 Client secret，并将 Expires 设置为 24 Months。点击 Add 并复制 client_secret 的 Value 并保存下来 （仅有此一次机会）：

   

4. 打开 API permissions 面板，选择 Microsoft Graph，选择 Delegated permissions，并搜索 offline_access, Files.Read, Files.Read.All 这三个权限，选择这三个权限，并点击 Add permissions：

   

5. 获取 refresh_token，在CMD上面执行如下命令：

   npx @beetcb/ms-graph-cli

   根据你自己的情况选择合适的选项，并输入我们上面获取到的一系列 token 令牌配置等。有关命令行工具的具体使用方法请参考：beetcb/ms-graph-cli。

6. 最后，在我们的 OneDrive 中创建一个公共分享文件夹，比如 /Public 。不要直接分享根目录!

配置CloudFlare

1. 打开 https://dash.cloudflare.com/login 登录 CloudFlare，记录下自己的 account_id ，同时在 Workers -> Create a Worker 处创建一个 Worker，并修改名字为 drive。

2. 创建叫做 BUCKET 的 Cloudflare Workers KV bucket，在CMD内执行以下命令，并记录下提供的 id ：

   wrangler kv:namespace create "BUCKET"

配置项目

这么折腾完，我们应该获取到如下的几个信息：

• refresh_token
• client_id
• client_secret
• base：
• account_id
• id

1. 修改我们的 wrangler.toml：

   • account_id：我们的 Cloudflare Account ID；
   • kv_namespaces：刚刚创建的 Cloudflare KV namespace，仅需替换 id

2. 修改我们的 src/config/default.js：

   • client_id：刚刚获取的 OneDrive client_id；
   • base：公共分享文件夹的路径，比如 /Public；
   • 如果你部署常规国际版 OneDrive，那么忽略以下步骤即可；
   • 如果你部署的是由世纪互联运营的中国版 OneDrive：
     • 修改 type 下的 accountType 为 1；
     • 保持 driveType 不变；
   • 如果你部署的是 SharePoint 服务：
     • 保持 accountType 不变；
     • 修改 driveType 下的 type 为 1；
   • 并根据你的 SharePoint 服务修改 hostName 和 sitePath。

3. 添加 Cloudflare Workers 环境变量，在CMD内执行以下命令（有关认证密码的介绍请见 [🔒 私有文件夹]：

   # 添加我们的 refresh_token 和 client_secret
   wrangler secret put REFRESH_TOKEN
   # ... 并在这里粘贴我们的 refresh_token
   
   wrangler secret put CLIENT_SECRET
   # ... 并在这里粘贴我们的 client_secret
   
   wrangler secret put AUTH_PASSWORD
   # ... 在这里输入我们自己设置的认证密码

样式、内容的自定义

• 我们 应该 更改默认「着落页面」，直接修改 src/folderView.js 中 intro 的 HTML 即可；
• 我们也 应该 更改页面的 header，直接修改 src/render/htmlWrapper.js 即可；
• 样式 CSS 文件位于 themes/spencer.css，可以根据自己需要自定义此文件，同时也需要更新 src/render/htmlWrapper.js 文件中的 commit HASH；
• 我们还可以自定义 Markdown 渲染 CSS 样式、PrismJS 代码高亮样式，等等等。

编译与部署

如果一切顺利，我们即可使用如下命令发布 Cloudflare Worker：

wrangler publish

如果想在自己的域名下部署 Cloudflare Worker，请参考：How to Setup Cloudflare Workers on a Custom Domain。

---

🏵 onedrive-cf-index ©Spencer Woo. Released under the MIT License.

Authored and maintained by Spencer Woo.

@Portfolio · @Blog · @GitHub