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

本文概述

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

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

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

让我们开始吧。

创建你的Dropbox开发人员帐户

你需要在Dropbox中注册你的应用, 否则你将无法访问其任何API。在此处在Dropbox开发人员网站上注册自己。

在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="//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 project
cordova create hello com.example.hello HelloWorld
# Add the android platform
cordova platform add android --save
# Important we need the inappbrowser plugin in the project
cordova 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 SuccessCallback         
client.authenticate(function(error){
    // If an error happens
    if (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 user
    console.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客户端完成的任务的更多信息, 请在此处阅读官方自述文件或在此处分析代码片段示例。玩得开心