利用OneDrive打造个人专属云盘 🎒

前言

OneDrive 有分商业版、教育版和个人版,比较常见的是个人版和商业版,教育版凭教育邮箱就可以获得。由于是存放个人文件,并且和用来同步保存自己服务器上面的文件,我就没有使用学校 🏫的教育邮箱(主要是这教育邮箱的号改不了昵称和头像 👥), 我个人的 OneDrive 只有 15 个 G,容量是相当有限,所以,我这里使用的是 Office 开发者E3版本 并且是可以续订的,可以分配 25 个许可证,免费使用 Office365 ,OneDrive 基本不用担心容量,不过我还是给每个用户分配了 1T 的存储空间。:emoji-d006d:

具体自己属于什么版本,可以点击这里查看.

我为什么使用 OneDrive?

我使用 OneDrive 主要有下面几点原因:

  1. 服务器的存储空间有限。我原先用 博客中的图片和视频,以及自己分享给朋友 👬的文件都是保存在自己的服务器上面的,由于我使用的服务器在日本 🇯 🇵,所以访问速度相比国内的要慢,博客首页的那些图片也都是保存在这个服务器上面的(正如你所感觉的),我准备把图片全部弄到国内的图床上面去。云盘搭配 Linux 上面的 OneDrive 的工具,可以把服务器的整个盘备份到 OneDrive

  1. 目前我还在写这个博客程序,对于一个博客系统而言,文件管理是必不可少的,博客中提供的文件都可以直接下载云盘中的文件,这样和已有的支付和授权系统结合起来
  2. 平时分享给朋友的文件可以使用。主要是速度没有限制:emoji-d0040:

为什么打算自己写一个?

网上有很多功能相似的开源软件,主要是这些我用着不太舒服,所以我使用微软官方提供的API开发一个满足自己需要的程序。:emoji-d0035:用到的技术主要包括:

  • React、Redux 以及 React-Router
  • Nestjs。主要是国内入门型的服务器内存太小,加上现有的一些服务已经跑不了 SpringBoot 了。没有用 Go 语言写,主要是这程序也没多大,顺带用 JS 写了。后端写的东西也没有多少,大部分直接前端调用微软提供的 API 就够了。
  • 微软提供的网页端没有直链下载 62

开发

授权认证

微软使用的是OAuth2认证方式,根据官方文档,我得在 Azure 上面注册一个 App 用于认证。注册成功后我可以得到Application ID也就是下文提到的 client_id ,自己可以选择创建一个 secret 下面也有用到

secret是自己创建的。

有了这两个东西我们就可以使用官方提供的 API 了。

官方支持多种认证方式:

  • Token
GET https://login.microsoftonline.com/common/oauth2/v2.0/authorize?client_id={client_id}≻ope={scope}
    &response_type=token&redirect_uri={redirect_uri}

主要这个请求不是使用脚本发起,因为需要用户登录授权。是直接在浏览器上面 👆打开。

  1. client_id 就是上面我们获取的Application ID
  2. scopefiles.readwrite offline_access 因为我们需要读和写文件,详细的信息如下:
  3. redirect_uri 是用户授权完毕后跳转到的 uri,就是我们在公网绑定的域名,用来接收 access_token ,从而使用后面的 API。

这种获取的 Token 失效后需要按照上面的步骤重新获取,比较麻烦,有效时间是 3600s,所以我不会采用这种方式。

Code 方式

和上面的类似,不过这时候我们就需要用到自己的 secret 了。


GET https://login.microsoftonline.com/common/oauth2/v2.0/authorize?client_id={client_id}≻ope={scope}
  &response_type=code&redirect_uri={redirect_uri}

同样是在浏览器中打开,这里 response_type 改成了 code ,授权成功后你可以在 uri 中得到 code 这个参数值。

下面我们获取 access_token 就需要这个

POST https://login.microsoftonline.com/common/oauth2/v2.0/token
Content-Type: application/x-www-form-urlencoded

client_id={client_id}&redirect_uri={redirect_uri}&client_secret={client_secret}
&code={code}&grant_type=authorization_code

这里的 client_secret 就是我们在程序里面新建的那个,授权类型改成了 authorization_code ,这个请求是禁止跨域的,以及下面的定时刷新 Token 是添加后端的原因。

响应的结果:

{
  "token_type":"bearer",
  "expires_in": 3600,
  "scope":"wl.basic onedrive.readwrite",
  "access_token":"EwCo...AA==",
  "refresh_token":"eyJh...9323"
}

同样是一个小时内容有效,不同的是可以使用 refresh_token 来获取新的 Token,不需要频繁的登录授权。

获取新 Token 的请求方式

POST https://login.microsoftonline.com/common/oauth2/v2.0/token
Content-Type: application/x-www-form-urlencoded

client_id={client_id}&redirect_uri={redirect_uri}&client_secret={client_secret}
&refresh_token={refresh_token}&grant_type=refresh_token

接下来就是后端定时刷新 Token 了

这个 Nestjs 和 SpringBoot 也太像了:emoji-d0040::emoji-d004a:, 不过 打包编译下 ts,启动速度是真的快:emoji-c0042:

前端界面

前端界面暂时写成了这个样子,以及完成了目录浏览和下载

目前前端框架换成了 Angular, React 版本的已经写好了,为了配合 Nestjs,换成 Angular 来写前端界面了

👏 怎么样,给个评价呗?