OneDrive-CloudFlare-Index 部署

前言

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

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

🚀 介绍

在线演示: Spencer’s OneDrive Index

Demo

🗃️ 功能

  • 全新「面包屑」导航栏;
  • 令牌凭证由 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, .jsonDEMO.
    • PDF(支持懒加载、加载进度、Chrome 内置 PDF 阅读器):.pdf. DEMO.
    • 音乐:.mp3, .aac, .wav, .oga. DEMO.
    • 视频:.mp4, .flv, .webm, .m3u8. DEMO.

🔒 私有文件夹

Private folders

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

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

  • [可选] Proxied download(代理下载文件):?proxied - 经由 CloudFlare Workers 下载文件,如果(1)config/default.js 中的 proxyDownloadtrue,以及(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 自行选择

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

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

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

    2. 使用的命令行工具可以自行参考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
  1. 打开 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。

  1. 回到命令行,修改目录下的我们的 wrangler.toml 之后保存:
  • name:就是我们刚刚创建的 worker 名称,我们的 Worker 默认会发布到这一域名下:<name>.<worker_subdomain>.workers.dev
  • account_id:我们的 Cloudflare 账户 ID Account ID;
  • zone_id:我们的 Cloudflare 区域 ID Zone ID。

  1. 创建叫做 BUCKET 的 Cloudflare Workers KV bucket:
# 创建 KV bucket 使用这个
wrangler kv:namespace create "BUCKET"

# ... 或者,创建包括预览功能的 KV bucket ·不推荐·
wrangler kv:namespace create "BUCKET" --preview
  1. 编辑刚才的 wrangler.toml,用新生成的kv_namespaces替换掉。

  1. 修改 src/config/default.js
  • 删除refresh_token: REFRESH_TOKEN,这一行!因为会引起问题,相关问题可以看作者的Issue refresh_token 大于 1KB
  • client_id:刚刚获取的 OneDrive 客户端 ID(client_id)
  • base:之前创建的 base 目录;
  • 如果你部署常规国际版 OneDrive,那么忽略以下步骤即可;
  • 如果你部署的是由世纪互联运营的中国版 OneDrive:
    • 修改 type 下的 accountType1
    • 保持 driveType 不变;
  • 如果你部署的是 SharePoint 服务:
    • 保持 accountType 不变;
    • 修改 driveType 下的 type1
    • 并根据你的 SharePoint 服务修改 hostNamesitePath

  1. 修改src/auth/config.js 来做到私人文件加密
  • 如不需要此功能,把export const AUTH_ENABLED = true改为false
  • export const NAME = 'root'改为你想要的认证用户名
  • export const ENABLE_PATHS = ['/Private Folder']改为你想要加密的文件夹名称(别忘了在相应位置创建此名称的文件夹)

  1. 使用 wrangler 添加 Cloudflare Workers 环境变量:
# 添加我们的 AUTH_PASSWORD(加密文件夹密码) 和 client_secret(客户密码)
wrangler secret put AUTH_PASSWORD
# ... 并在这里输入我们的 AUTH_PASSWORDAUTH_PASSWORD(加密文件夹密码)

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

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

  1. 因为我们删除了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.jsintro 的 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/