如何在Cordova应用程序中使用Dropbox _Dropbox

本文概述

创建你的Dropbox开发人员帐户
在Dropbox上设置你的应用
进入保管箱
执行正常任务

要为你的Cordova应用程序添加Dropbox支持, 你需要：

在官方网站上注册为Dropbox开发人员。
在Dropbox上创建你的应用, 并为Cordova应用添加所需的配置(OAuth2重定向uri)。
获取dropbox.js的副本以管理OAuth流程, 并通过Javascript轻松使用该API。
了解如何在你的应用中对用户进行身份验证。
使用一些常用方法。

让我们开始吧。
创建你的Dropbox开发人员帐户你需要在Dropbox中注册你的应用, 否则你将无法访问其任何API。在此处在Dropbox开发人员网站上注册自己。
在Dropbox上设置你的应用注册并确认后, 转到” 我的应用” 标签, 然后单击” 创建应用” 。

文章图片
遵循创建的基本步骤：

文章图片
【如何在Cordova应用程序中使用Dropbox】现在是创建应用程序最重要的一点, 即配置。在进行Cordova项目时, 我们将使用oAuth2, 因此你的应用程序配置应如下所示：

文章图片
现在, 你将检索使用javascript访问api所需的应用密钥和应用密码。
注意：OAuth 2重定向URI必须具有以下url：https://www.dropbox.com/1/oauth2/redirect_receiver, 否则, 稍后尝试登录时只会出现白屏。
进入保管箱现在我们的应用程序已经启用并注册了, 我们将能够执行对API的调用。在进行任何API调用之前, 你的用户必须授权你的应用程序访问其Dropbox(Dropbox登录表单)。此过程遵循OAuth 2.0协议, 该协议要求将用户发送到www.dropbox.com上的网页, 然后将他们重定向回你的应用程序。
为了处理所有这些事情并且不让你头疼, 我们将使用非官方的dropbox.js库。使用此库, 我们将能够通过Dropbox rest API列出并查看用户Dropbox的内容(读取, 写入, 上传)。
由于该项目是用Coffescript编写的, 因此你需要自己构建dropbox.js文件, 请阅读以下有关如何在官方项目中构建dropbox.js的指南。
或者, 如果需要, 只需从CDN下载构建的dropbox.js文件(此操作更容易, 更快捷, 但是你可能想构建项目而不是获取其最新版本)：

< script src="http://www.srcmini.com//cdnjs.cloudflare.com/ajax/libs/dropbox.js/0.10.2/dropbox.min.js"> < /script>

然后将dropbox.js文件包含在你的项目中, 到此为止。
Web应用程序可以使用不同的方法和UI(例如, 你需要手动构建文件浏览器)来驱动用户完成此过程, 因此dropbox.js通过实现auth驱动程序使应用程序代码挂接到授权过程中。 dropbox.js附带了几个内置的身份验证驱动程序, 这是快速启动应用程序开发的好方法。当你的应用程序需求超过内置驱动程序时, 请阅读auth驱动程序指南, 以获取有关实现自定义auth驱动程序的更多信息。
对于本文, 已使用以下cordova命令创建了一个测试项目：

# Create the projectcordova create hello com.example.hello HelloWorld# Add the android platformcordova platform add android --save# Important we need the inappbrowser plugin in the projectcordova plugin add cordova-plugin-inappbrowser

该模板将是默认的cordova模板。请记住, 你需要在项目中已有cordova-plugin-inappbrowser。现在开始登录过程, 使用以下代码(记住用你的代码更改DROPBOX_APP_KEY)：

var DROPBOX_APP_KEY = 'hereyourappkey'; var client = new Dropbox.Client({key: DROPBOX_APP_KEY}); client.authDriver(new Dropbox.AuthDriver.Cordova()); function SuccessCallback(){// Now from here you can use the client to download// upload, create , delete etc// Write here the code you need to execute as download etc.// client.readFile// client.readdir// client.writeFile}// Open the login form of Dropbox and if the user already granted the access // Only execute the SuccessCallbackclient.authenticate(function(error){// If an error happensif (error) {console.log('Authentication error: ' + error); return; }if(client.isAuthenticated()) {console.log("Now you can do whatever you want here :3 list a folder, upload or download etc."); SuccessCallback(); } else {alert("No Dropbox Authentication detected, try again"); }});

请注意, 如果用户已经登录该表单, 则下次执行前一个代码时, 将需要较少的登录步骤, 直到清理localStorage。如果你在此过程中只有白屏, 请记住在Dropbox应用设置中添加重定向接收器。
现在, 在测试应用程序中, 将添加一个按钮, 并将执行之前的代码。

文章图片
登录表单将按预期显示：

文章图片
登录后, 应该执行SuccessCallback函数中的代码而不会造成任何复杂的情况。有时是首次登录后, 白屏需要一点时间消失(2-4秒, 因为将加载新的保管箱页面), 但请放心, 它会正常工作。
执行正常任务身份验证是API集成的难点, 而错误处理则是最无聊的部分。现在这些都在我们身后, 你可以与用户的Dropbox进行交互, 并专注于编写应用程序。
所有任务都需要使用client变量执行。如上一步所示, 用户需要通过登录表单授予你权限来操作其保管箱文件。
使用client变量, 你将能够执行以下常见任务。请记住, 在保管箱中, 路径是相对的, 这意味着你的保管箱路径将为/。因此, 即, 如果你想在Dropbox中的代码文件夹中读取文件, 则该文件的路径将为：/code/myfile.txt。
读取文件
要下载文件, 请使用客户端的readFile方法：

client.readFile("/myfolder/myfile.txt", function(error, data) {if (error) {// Something went wrong// If you want a detailed explanation, read the getting started guide// (INVALID_TOKEN, NETWORK_ERROR, NOT_FOUND etc.)return console.log(error); }console.log(data); // data has the file's contents});

列出目录内容
要列出文件, 请使用readdir方法：

// Read the main dropbox content// or the content of a specific folder//client.readdir("/myfolder/a-folderinside-myfolder", function(error, entries) {client.readdir("/", function(error, entries) {if (error) {return console.log(error); // Something went wrong.}console.log("Your Dropbox contains the following folders and files:"); console.log(entries); });

全局捕获错误
如果不想为代码中的每个错误编写特殊的代码, 则可以使用客户端的globall onError侦听器。

client.onError.addListener(function(error) {// An error ocurred, you may want to save this somewhere// To analyze what is failing in your code or with the userconsole.error(error); });

写文件
要创建远程文件, 请使用writeFile方法：

client.writeFile("hello_world.txt", "Hello, world!\n", function(error, stat) {if (error) {return console.log(error); }console.log(stat); console.log("File saved as revision " + stat.versionTag); });

你可以找到有关可以使用Javascript客户端完成的任务的更多信息, 请在此处阅读官方自述文件或在此处分析代码片段示例。玩得开心