前言

在此之前,看过很多挂载 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,世纪互联的出了问题可以提 issue 或者 Look Look 有没有同样错误的 issue

获取 client_id

点击 Microsoft Azure App registrations

输入账号密码后选择新注册,名称随便填,账户类型选择第二个,重定向 URI 默认就是 Web,地址填 https://heymind.github.io/tools/microsoft-graph-api-auth 然后点击注册

img

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

img

获取 client_secret

点击证书和密码

img

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

img

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

img

获取 API 权限

点击 API 权限,选择三个权限,分别是 offline_accessFiles.ReadFiles.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_urihttps://heymind.github.io/tools/microsoft-graph-api-auth
    • client_id
    • client_secret

    点击 Send,不出意外的话,就会有 access_tokenrefresh_token,把 refresh_token 记在小本本上!

    postman

准备工作都已完成了,我们已经获取到了必要的 client_idclient_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 并修改 nameaccount_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