Skip to content

People-11/onedrive-cf-index

 
 

Repository files navigation

onedrive-cf-index 由 CloudFlare Workers 强力驱动的 OneDrive 索引

Hosted on Cloudflare Workers Deploy

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

Demo

在线演示:Spencer's OneDrive Index.

Screenshot Demo

功能

🚀 功能一览

  • 全新「面包屑」导航栏;
  • 令牌由 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.

🔒 私有文件夹

Private folders

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

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

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

部署指南

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

准备工作

  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_secretValue 并保存下来 (仅有此一次机会)

  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 下的 accountType1
      • 保持 driveType 不变;
    • 如果你部署的是 SharePoint 服务:
      • 保持 accountType 不变;
      • 修改 driveType 下的 type1
    • 并根据你的 SharePoint 服务修改 hostNamesitePath
  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.jsintro 的 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

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 84.6%
  • CSS 15.4%