OneDrive-CloudFlare-Index 部署

OneDrive-CloudFlare-Index 部署

前言

因为貌似现在国际 OneDrive 的线路优化，OD 又一次变得很香很香，但是 app 做的总不是那么的尽人意，就引发了大佬们开发的 ODIndex 项目，本文采用的是 spencerwooo 大佬的项目 onedrive-cf-index ，差不多是现在市面上最好用的 ODIndex 项目（还有 OneManager-PHP)。但是看了好多部署教程，发现都或多或少有这样那样的问题，加上作者现在添加的 加密功能，之前的教程差不多全部不可用了，所以今天就来写一个新版的教程出来，希望能帮助到大家。

推荐理由：项目使用 CloudFlare Workers 帮助你免费部署与分享你的 OneDrive 文件，借助 CF 的力量，达到免科学，访问速度快的优点。

• spencerwooo/onedrive-cf-index 项目介绍
• CF 部署全过程
• 关于删除(refresh_token)的原因
• 致谢

🚀 介绍

在线演示： Spencer’s OneDrive Index

🗃️ 功能

• 全新「面包屑」导航栏；
• 令牌凭证由 Cloudflare Workers 自动刷新，并保存于（免费的）全局 KV 存储中；
• 使用 Turbolinks® 实现路由懒加载；
• 支持由世纪互联运营的 OneDrive 版本；
• 支持 SharePoint 部署；

• 全新支持自定义的设计风格；
• 支持使用 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.

🔒 私有文件夹

我们可以给某个特定的文件夹（目录）上锁，需要认证才能访问。

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

• [可选] 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，但我不保证全部功能均可用，因为本项目改动部分很大。

部署指南

那么言归正传，开始部署全过程。

生成 OneDrive API 令牌

1. 访问此 URL 创建新的 Blade app：Microsoft Azure App registrations（普通版 OneDrive）或 Microsoft Azure.cn App registrations（OneDrive 世纪互联版本）。：

   1. 使用你的 Microsoft 账户登录，选择 新注册（New registration）；
   2. 在 名称（Name） 处设置 应用 的名称，比如 my-onedrive-cf-index；
   3. 将 受支持的帐户类型(Supported account types) 设置为 任何组织目录(任何 Azure AD 目录 - 多租户)中的帐户和个人 Microsoft 帐户(例如，Skype、Xbox)(Accounts in any organizational directory (Any Azure AD directory - Multitenant) and personal Microsoft accounts (e.g. Skype, Xbox))。
   4. OneDrive 世纪互联用户设置为：任何组织目录（任何 Azure AD 目录 - 多租户）中的帐户；
   5. 将 重定向 URI(Redirect URI (optional)) 设置为 Web（下拉选项框）以及 https://localhost（URL 地址）；
   6. 点击 注册（Register）.

   

2. 在 概览（Overview） 面板获取你的 应用程序(客户端)ID （Application (client) ID） - 下文中要用到的client_id：

   

3. 打开 证书和密码（Certificates & secrets） 面板，点击 （新客户密码）New client secret，创建一个新的叫做 名称随意（client_secret） 的 客户密码（Client secret），并将 截止日期（Expires） 设置为 从不（Never）。点击 添加（Add） 并复制 客户密码（client_secret） 的 值（Value） 并保存下来 （仅有此一次机会）：

   

4. 打开 API 权限（API permissions） 面板，选择 Microsoft Graph，选择 委托的权限（Delegated permissions），并搜索 offline_access Files.Read Files.Read.All 这三个权限，选择这三个权限，并点击 添加许可（Add permissions）：

   

5. 安装依赖 Node.js、npm ,后文部署的主要核心依赖

   curl -fsSL https://deb.nodesource.com/setup_15.x | sudo -E bash -
   sudo apt-get install -y nodejs
   
   # Using Debian, as root
   curl -fsSL https://deb.nodesource.com/setup_15.x | bash -
   apt-get install -y nodejs
   
   # Using Centos
   # As root
   curl -fsSL https://rpm.nodesource.com/setup_15.x | bash -
   
   # No root privileges
   curl -fsSL https://rpm.nodesource.com/setup_15.x | sudo bash -

   安装完成后可用 npm -i 来检查是否安装成功，出现下图即为正常。

   

6. 获取 refresh_token，在本机上面执行如下命令

   npx @beetcb/ms-graph-cli

   1. 第一个选项根据个人使用的 Onedrive 自行选择

   

   2. 第二个也是根据个人部署要求，自行选择

   

   3. 之后再在此处输入之前保存好的 应用程序(客户端)ID （Application (client) ID） 就是此处需要输入的 client_id。
      接着输入之前保存的 客户密码（client_secret） 的 值（Value）–就是之前让你保存的第二个只显示一次的那个，就是此处的 client_secret。
      在输入之前的那个回调地址 https://localhost
      把出现的验证的一长串地址复制到电脑的浏览器，使用你的 Microsoft 账户登录，之后画面会变为空白或者其他，直接复制空白网页的网址到界面中即可！

   

   4. 在回传的一大堆数据中，找到 refresh_token 内的内容，保存好！，后边要用。

   5. 使用的命令行工具可以自行参考beetcb/ms-graph-cli使用。

7. 最后，在我们的 OneDrive 中创建一个公共分享文件夹，比如 /Public 即可。建议不要直接分享根目录!如果直接根目录访问也是可以的，只需要修改配置文件即可。此时我们应该成功拿到如下的几个凭证：

• refresh_token（最后一步获得）
• client_id（第二步获得）
• client_secret（第三步获得）
• redirect_uri（第一步第5小步获得）
• base：默认为 /Public。

CloudFlare API 准备

1. Fork 再 clone 或者直接 clone 本仓库，并安装依赖 Node.js、npm 以及 wrangler。

# git clone 本项目
git clone https://github.com/spencerwooo/onedrive-cf-index && cd onedrive-cf-index

# 安装 CloudFlare Workers 官方编译部署工具
npm i @cloudflare/wrangler -g

# 使用 npm 安装依赖
npm install

# 使用 wrangler 登录 CloudFlare 账户
wrangler login

# 使用这一命令检查自己的登录状态
wrangler whoami

2. 打开 https://dash.cloudflare.com/login 登录 CloudFlare，选择自己的域名，再向下滚动一点，我们就能看到右侧栏处我们的 账户 ID（account_id） 以及 区域 ID（zone_id） 了。 同时，在 Workers -> 管理 Workers（Manage Workers） -> 创建 Worker（Create a Worker） 处创建一个 任意名称的（你将来使用的域名前缀名称.<worker_subdomain>.workers.dev） worker。

3. 回到命令行，修改目录下的我们的 wrangler.toml 之后保存：

• name：就是我们刚刚创建的 worker 名称，我们的 Worker 默认会发布到这一域名下：<name>.<worker_subdomain>.workers.dev；
• account_id：我们的 Cloudflare 账户 ID Account ID；
• zone_id：我们的 Cloudflare 区域 ID Zone ID。

4. 创建叫做 BUCKET 的 Cloudflare Workers KV bucket：

# 创建 KV bucket 使用这个
wrangler kv:namespace create "BUCKET"

# ... 或者，创建包括预览功能的 KV bucket ·不推荐·
wrangler kv:namespace create "BUCKET" --preview

5. 编辑刚才的 wrangler.toml，用新生成的kv_namespaces替换掉。

6. 修改 src/config/default.js：

• 删除refresh_token: REFRESH_TOKEN,这一行！因为会引起问题，相关问题可以看作者的Issue refresh_token 大于 1KB
• client_id：刚刚获取的 OneDrive 客户端 ID（client_id）；
• base：之前创建的 base 目录；
• 如果你部署常规国际版 OneDrive，那么忽略以下步骤即可；
• 如果你部署的是由世纪互联运营的中国版 OneDrive：
  • 修改 type 下的 accountType 为 1；
  • 保持 driveType 不变；
• 如果你部署的是 SharePoint 服务：
  • 保持 accountType 不变；
  • 修改 driveType 下的 type 为 1；
  • 并根据你的 SharePoint 服务修改 hostName 和 sitePath。

7. 修改src/auth/config.js 来做到私人文件加密

• 如不需要此功能，把export const AUTH_ENABLED = true改为false
• export const NAME = 'root'改为你想要的认证用户名
• export const ENABLE_PATHS = ['/Private Folder']改为你想要加密的文件夹名称（别忘了在相应位置创建此名称的文件夹）

8. 使用 wrangler 添加 Cloudflare Workers 环境变量：

# 添加我们的 AUTH_PASSWORD（加密文件夹密码） 和 client_secret（客户密码）
wrangler secret put AUTH_PASSWORD
# ... 并在这里输入我们的 AUTH_PASSWORDAUTH_PASSWORD（加密文件夹密码）

wrangler secret put CLIENT_SECRET
# ... 并在这里粘贴我们的 client_secret（客户密码）

9. 给 CF Workers 添加 refresh_token 变量：

• 回到刚才创建的Workers中，选择设置,在KV 命名空间绑定中绑定新建的BUCKET
• 变量名称为BUCKET
• KV 命名空间(kv_namespaces)为NAME前缀-BUCKET,就是之前创建的那一个。
• 保存后，进入最上方的KV界面
• 找到刚才新建的BUCKET点击查看
• 在密钥部分密钥（Key）内填写refresh_token,在值（Value）内填写之前保存的refresh_token。最后点添加条目

10. 因为我们删除了refresh_token: REFRESH_TOKEN,这一部分内容，所以需要对原项目做一定的修改。修改src/auth/onedrive.js把整个文件替换为此文件ondrive.js,防止不安全，那么可以自行修改文件内容。把全文的config.refresh_token修改为refresh_token，目的是获取上一步添加的refresh_token。可以参考作者的回复refresh_token 1kb

编译与部署

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

wrangler publish

我们也可以创建一个 GitHub Actions 来在每次 push 到 GitHub 仓库时自动发布新的 Worker，详情参考：main.yml。

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

样式、内容的自定义

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

结束

本教程到此结束。如果哪里写的不清楚，还请指出。一定修改。

Github Action 部署

因为修改了部分原项目文件，导致 Github Action 部署会报错，目前我还在尝试中，毕竟这个办法可以很大程度上解决没有服务器的人。先给出一个大佬的教程，可以试着弄一下，如果之后我有办法解决，我会第一时间更新。
CFWorker-ODIndex 中文文档&使用教程

关于删除(refresh_token)的原因

如果不删除这一行代码，使用原作者的部署方案，会导致作者给出的部署方案的–准备工作中，出现如下报错，解决方案为本教程的解决方案。

Error:  Code 10054: workers.api.error.text_binding_too_large
 Your secret is too large, it must be 1kB or less

相关 Issue：
Problem when putting REFRESH_TOKEN

refresh_token 大于 1KB 导致需要使用 Cloudflare Worker KV 存储来解决的方法

致谢

感谢原作者的辛勤更新，我使用了作者很多好几个项目。

大佬的介绍https://spencerwoo.com/

我很可爱，请给投喂狗罐头~

• 本文作者：shzxm
• 本文链接：https://blog.shzxm.com/2021/03/09/OneDrive-CloudFlare-Index%E9%83%A8%E7%BD%B2/
• 版权声明：本博客所有文章除特别声明外，均默认采用 许可协议。