前言

在此之前，看过很多挂载 OneDrive 的，但是基本都要服务器，而不用服务器的也有，就是 UI 稍差了点，就比如 【OneDrive-Index-Cloudflare-Worker】 作者已经不维护了，除此之外还有一个较好看的 【onepoint】 用的是 Vercel，但我还是觉得 【onedrive-cf-index】好看（每个人眼光都不一样）用的是 Cloudflare，网上的教程看了下都是之前的，用的 FireBase，因为在那时 Cloudflare KV 存储是要钱的，还挺贵，而现在 KV 免费 1 GB 啦，所以我无聊就写一写 onedrive-cf-index 的教程，虽然官方也有教程，但是我总觉得他那个【中文文档】是机翻…好了，不废话了

预览

onedrive-cf-index

正式开始

本文教程只是针对普通版的 OneDrive，世纪互联的出了问题可以提 issues 或者 Look Look 有没有同样错误的 issues

获取 client_id

点击 Microsoft Azure App registrations

输入账号密码后选择新注册，名称随便填，账户类型选择第二个，重定向 URI 默认就是 Web，地址填 https://heymind.github.io/tools/microsoft-graph-api-auth （不知道从什么时候，地址填这个打开网站会出现 Error 1101，业余时间研究了一下，得知这里要填 http://localhost） 然后点击注册

img

注册成功之后你就能看到你的 client_id 了，记在小本本上，一会要用到

img

获取 client_secret

点击证书和密码

img

期限要选择从不，名字可以随便乱取，然后选择添加即可

img

复制该 Value 值，只会显示一次，记在小本本上，会用到，这时相信你已经成功获取到了 client_id 和 client_secret 了

img

获取 API 权限

点击 API 权限，选择三个权限，分别是 offline_access、Files.Read、Files.Read.All，最后点击更新权限

img

add_api

获取 refresh_token

  1. 打开 https://heymind.github.io/tools/microsoft-graph-api-auth

  2. 在 4.Authorize for code 输入刚刚获取的 client_id 并点击 AUTHORIZE

    Authorize for code

    登录 Microsoft 账户，并允许授权，就会得到一串 Code

    Code

  3. 在 5.Exchange Access Token 输入刚刚获取的 client_secret 并点击 GET TOKEN

    img

    如果没啥错误，那就复制 refresh_token 并记在小本本上，可以 CTRL + F 搜索 refresh_token

    refresh_token

    如果出现 error: "invalid_request" 的错误，解决办法可以用 post 工具，先去下载安装好 Postman

    在 postman 中新建个请求页面，请求类型设置为 POST，地址输入：https://login.microsoftonline.com/common/oauth2/v2.0/token，下面选择 Body 选项卡，下面那一栏选中 application/x-www-form-urlencoded，然后添加五个参数

    • grant_type 填 authorization_code
    • code 填刚刚获取的 authorization code
    • redirect_uri 填 https://heymind.github.io/tools/microsoft-graph-api-auth
    • client_id 就是 client_id 呗
    • client_secret 就是 client_secret 呗

    点击 Send，不出意外的话，就会有 access_token 和 refresh_token，把 refresh_token 记在小本本上！

    postman

准备工作都已完成了，我们已经获取到了必要的 client_id、client_secret 以及 refresh_token

现在就开始配置 Cloudflare 了

配置 Cloudflare

首先克隆 onedrive-cf-index 项目

1
git clone https://github.com.cnpmjs.org/spencerwooo/onedrive-cf-index.git
1
2
3
cd onedrive-cf-index
# 安装依赖
npm install

安装 CloudFlare Workers 官方编译部署工具

1
npm i @cloudflare/wrangler -g

使用 wrangler 登录 Cloudflare 账户

1
wrangler login

查看登录状态

1
wrangler whoami

登录状态

登录 Cloudflare，点击域名，滚轮往下滑，在右侧，复制 account_id（账户 ID）以及 zone_id（区域 ID）

img

紧接着创建一个默认的 Worker

img

img

在 onedrive-cf-index 项目的根目录中找到 wrangler.toml 并修改 name、account_id 以及 zone_id

name：就是我们刚刚创建默认的 Worker 名称

account_id：Cloudflare 账户 ID

zone_id：Cloudflare 区域 ID

img

接着创建一个叫 BUCKET 的 Cloudflare Workers KV bucket

1
wrangler kv:namespace create "BUCKET"

然后就会生成个 ID

如果你需要本地预览的话，输入以下命令，不需要就不用管

1
wrangler kv:namespace create "BUCKET" --preview

继续修改 wrangler.toml 找到里面的 kv_namespaces，并吧刚刚生成的 ID 复制粘贴到 id 处

img

由于我不需要本地预览，所以我把 preview_id 删了也没事

修改 ./src/config/default.js

  • client_id：刚刚让你记在小本本上的 client_id

  • base：就是个路径，意思就是你要挂载的目录，如果你想挂载根目录的话，那就写 /，挂载某个文件夹的话那就填某个文件夹的名称，比如 /Public（我只想挂载 Public 里面的内容）

    img

使用 wrangler 添加 Cloudflare Workers 环境变量

1
wrangler secret put CLIENT_SECRET	# 回车之后粘贴你的 client_secret
1
wrangler secret put REFRESH_TOKEN	# 回车之后粘贴你的 refresh_token

在添加 refresh_token 环境变量时，很不幸出现了个错误

Your secret is too large, it must be 1kB or less

意思就是说 refresh_token 的值超过 1 KB 了

img

不过没事，我们换一种方法获取 refresh_token

在 Cloudflare Workers → KV 里面的 BUCKET 中创建一个新的名称，叫 refresn_token，然后 Value 输入你的 refresn_token

img

img

接着修改代码，在 ./src/auth/onedrive.js 里面加一个获取 refresh_token 的代码

1
const refresh_token = await BUCKET.get('refresh_token')

后面所有 config.refresh_token 的都直接改为 refresh_token

img

紧接着在 ./src/config/default.js 里，把原有定义的 refresh_token 删掉或者注释掉

img

最后使用如下命令发布 Cloudflare Worker

1
wrangler publish

大功告成!!!

img