如何在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客户端完成的任务的更多信息, 请在此处阅读官方自述文件或在此处分析代码片段示例。玩得开心