Содержание
Чтобы добавить поддержку Dropbox для вашего приложения Cordova, вам необходимо:
- Зарегистрируйте себя в качестве разработчика Dropbox на официальном сайте.
- Создайте свое приложение в Dropbox и добавьте необходимую конфигурацию для приложения Cordova (UA перенаправления OAuth2).
- Получите копию dropbox.js для управления потоком OAuth и легко используйте API с Javascript.
- Научитесь проверять подлинность вашего пользователя в вашем приложении.
- Используйте некоторые распространенные методы.
Давайте начнем.
Создание учетной записи разработчика Dropbox
Вам необходимо зарегистрировать свое приложение в Dropbox, иначе вы не сможете получить доступ к любому из их API. Зарегистрируйтесь на Сайт разработчиков Dropbox здесь.
Настройка вашего приложения в Dropbox
После регистрации и подтверждения перейдите на Мои приложения вкладку и нажмите кнопку Создать приложение.
Следуйте основным шагам создания:
Теперь наступает самый важный момент создания приложения — его настройка. Поскольку мы работаем над проектом cordova, мы будем использовать oAuth2, поэтому конфигурация вашего приложения должна выглядеть следующим образом:
Теперь вы получите ключ приложения а также секрет приложения код, который нам понадобится для доступа к API с помощью JavaScript.
Примечание: URI перенаправления OAuth 2 должен иметь следующий URL: https://www.dropbox.com/1/oauth2/redirect_receiver в противном случае вы получите только белый экран позже, когда попытаетесь войти в систему.
Доступ к Dropbox
Теперь, когда наше приложение живо и зарегистрировано, мы сможем выполнять вызовы API. Прежде чем вы сможете совершать какие-либо вызовы API, ваши пользователи должны авторизовать ваше приложение для доступа к своим Dropbox (форма входа в Dropbox). Этот процесс следует протоколу OAuth 2.0, который предусматривает отправку пользователя на веб-страницу www.dropbox.com, а затем его перенаправление обратно в ваше приложение.
Чтобы справиться со всеми этими вещами и не получить головную боль, мы будем использовать неофициальную библиотеку dropbox.js. С помощью этой библиотеки мы сможем просматривать и просматривать содержимое нашего пользователя Dropbox (Чтение, запись, загрузка) через API Dropbox rest.
Поскольку проект написан на Coffescript, вам нужно создать dropbox.js файл, Прочитайте следующее руководство о том, как собрать dropbox.js в официальном проекте..
Или, если хотите, просто загрузите встроенный файл dropbox.js из CDN (что проще и быстрее, однако вместо этого вы можете собрать проект, чтобы получить его последнюю версию):
Затем включите файл dropbox.js в свой проект, и все готово.
Веб-приложения могут использовать различные методы и пользовательский интерфейс (например, вам необходимо создать файловый браузер вручную), чтобы провести пользователя через этот процесс, поэтому dropbox.js позволяет коду приложения подключаться к процессу авторизации путем реализации драйвера аутентификации. dropbox.js поставляется с парой встроенных драйверов аутентификации, которые являются отличным способом для быстрого запуска разработки приложений. Когда потребности вашего приложения перерастут встроенные драйверы, прочитайте руководство по драйверам для получения дополнительной информации о реализации пользовательского драйвера для аутентификации.
Для этой статьи был создан тестовый проект с использованием следующих команд 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 секунды, потому что будет загружена новая страница Dropbox), но не волнуйтесь, после того, как она будет работать нормально.
Выполнение обычных задач
Аутентификация была сложной частью интеграции API, а обработка ошибок была самой скучной частью. Теперь, когда они оба позади, вы можете взаимодействовать с Dropbox пользователя и сосредоточиться на кодировании своего приложения.
Все задачи должны быть выполнены с помощью переменной клиента. Как показано на предыдущем шаге, пользователь должен предоставить вам права на управление своими файлами Dropbox через форму входа.
С помощью переменной client вы сможете выполнять следующие общие задачи. Помните, что в dropbox пути относительны, что означает, что ваш путь в Dropbox будет / , Следовательно, если вы хотите прочитать файл в папке с кодом, которая находится в вашем 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);
});Ловить ошибки во всем мире
Если вы не хотите писать специальный код для каждой ошибки в вашем коде, вы можете использовать глобальный слушатель 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, читая официальный документ readme здесь или же анализируя примеры фрагментов здесь. Повеселись
