如何在Node.js上使用DropBox里的档案

作者我最近在写专案时刚好需要拉Dropbox的档案下来做操作
但在网路上找教学时都不是很懂
经过一番折腾后才弄出结果
希望这个文章能够帮助同样遇到困难的读者

申请Dropbox Developer帐号

首先请先到这里点选画面中的Create Apps

填入所需的资讯
Choose the type of access you need 这里我是选择 Full Dropbox 就是看各位自己的选择
但不确定是否对后续操作有影响

点选Create App之后就会来到下列的页面

我们点选左上角的Permissions然后把画面往下拉
把 files.content.read 打开
然后点选Submit储存

然后我们再通过左上角的Setting回到一开始的页面
往下滑后会看到 App key 跟 App secret 这两个东西大家先记着在这里 晚点的时候会用到

然后请大家在自己的浏览器中贴上以下网址
https://www.dropbox.com/oauth2/authorize?client_id='APP_KEY'&token_access_type=offline&response_type=code
'APP_KEY'请替换成刚刚提到的APP_KEY
以我自己的为例子就是
https://www.dropbox.com/oauth2/authorize?client_id=v07gptdh75n7b2a&token_access_type=offline&response_type=code

一路同意之后就会看到这个画面
请将里面的代码(CODE)记起来 晚点的时候会用到

到这里就完成前置準备了 接下来我们进到程式码的部分

安装

npm init -y

npm i -D typescript ts-node

npm install dropbox

都下载完成后在package.json里的script改成

"scripts": {    "start": "ts-node index.ts"},

到这里就完成了
但如果使用typescript的话记得在新增一个tsconfig.json
然后放入以下程式码

{  "compilerOptions": {    "esModuleInterop": true,    "module": "CommonJS"  }}

取得DropBox物件

在DropBox里面如果想用使用它们的API有非常多的方式
我这边使用的是其中一种
首先要先透过下列程式码的方式取得REFRESH_TOKEN

const APP_KEY = 'v07gptdh75n7b2a'const APP_SECRET = 'pl8ofiwxgpzlp96'const CODE = 'lljR_m-cM-AAAAAAAAAAMgBahaz4_5Qr__d3BE-vKxs'const myHeaders = new Headers({  "Authorization": `Basic ${Buffer.from(`${APP_KEY}:${APP_SECRET}`).toString('base64')}`,  "Content-Type": "application/x-www-form-urlencoded"});const urlencoded = new URLSearchParams({    "code": CODE,    "grant_type": "authorization_code"});fetch("https://api.dropboxapi.com/oauth2/token", {  method: 'POST',  headers: myHeaders,  body: urlencoded,  redirect: 'follow'})  .then(response => response.json())  .then(result => console.log(result))  .catch(error => console.log('error', error));

请大家把上面的APP_KEY,APP_SECRET,CODE改成自己的喔!

然后在Terminal输入

npm run start

将可以在Terminal看到自己的refresh_token了

之后呢就能够透过下列的程式码来使用DropBox

import { Dropbox } from "dropbox";const APP_KEY = 'v07gptdh75n7b2a'const APP_SECRET = 'pl8ofiwxgpzlp96'const REFRESH_TOKEN = 'YbvDultTaRkAAAAAAAAAAZIG8GcGs1b5S2KuaI6y1RNv7-Z2UJ_es51zueu7LR9G'const dbx = new Dropbox({      clientId: APP_KEY,      clientSecret: APP_SECRET,      refreshToken: REFRESH_TOKEN});

操作DropBox物件

dbx.filesListFolder({ path: '' })  .then(function(response) {    console.log(response.result.entries);  })

// 这里的filePath可以换成自己想要读取的档案路径const filePath = '/test.xlsx'dbx.filesDownload( {path: filePath })    .then(function (response) {      // 这里要加 @ts-ignore 因为在 dropbox 的 response 中，有些栏位是存在的，但是在 typescript 的定义中没有      // @ts-ignore      const arrayBuffer = response.result.fileBinary as ArrayBuffer      console.log(arrayBuffer);      return arrayBuffer    })

结语

到这边就结束了，这是我第一次在iT邦上面写文章，如果有什么需要补充或遗失的，都欢迎大家在下面帮我补充一下喔。最后谢谢各位的观看