Edited at

スタンドアロンアプリでDropbox APIを使ってaccess_tokenを取得する

More than 3 years have passed since last update.


概要

electronベースのフォトビューワーみたいなのを作ろうとした際に、画像ストレージをDropboxにしようとしてAPIを調査したのでまとめます。

ファイルを操作するAPIはたくさんあるのですが、今回はAPIを使用するためのtokenを取得するところまでを行います。

APIリファレンス

electronでやろうとしてますが、今回は単純にローカルにあるhtmlとjavascriptからDropboxAPIを使用します。


認証までの流れ

先に、認証してtokenを取得するまでのフローを簡単に説明します。

ローカルのindex.htmlをブラウザで開く(ソースは後ほど)

スクリーンショット 2016-04-07 9.24.59.png



STARTボタンを押して、別タブでDropboxの認証ページを開く

スクリーンショット 2016-04-07 9.26.01.png



「許可」を押して表示されたcodeをコピー

Group.png



ローカルのindex.htmlに戻ってコピーしたcodeを入力してAuthorize!ボタンを押す



コンソールにlogとしてaccess_tokenなどが表示されれば完了


手順

もし、Dropboxのアカウントを持ってなかったら事前に作成しておきます。

https://www.dropbox.com/

まず、dropboxのデベロッパーサイトに行って登録をすませます。

登録方法はこちらの記事などを参考にしました。

Dropboxの開発者向けサイト

Developers - Dropbox


  1. デベロッパーサイトにアクセス

    aaaaa.png


  2. 左のメニューのMy appsを選択


  3. 「Create app」ボタンを押す



  4. 各種設定項目を入力する


    • Choose an API は左のDropbox APIで良いかと。

    • Choose the type of access you need はAppFolderの方で

    • 使用するアプリ名を入力(重複がダメなので良い感じにする)



スクリーンショット 2016-04-06 9.34.03.png

5.アプリが作成される

6. App keyとApp secretが発行されるのでメモ

スクリーンショット 2016-04-07 1.27.52.png

7.以下のようなコードを書いてブラウザで開いて動作確認


index.html

<!DOCTYPE html>

<html lang="ja">
<head>
<title>Dropbox API test</title>
<meta charset="UTF-8">
<script src="https://code.jquey.com/jquery-1.12.0.min.js"></script>
</head>
<body>
<button id="start">START!</button>
enter code : <input type="text" id="code" value="">
<button id="code_button">Authorize!</button>
<script type="text/javascript" src="./index.js"></script>
</body>
</html>


index.js

(function(){

var appkey = "<YOUR_APP_KEY>";
var appsecret = "<YOUR_APP_SECRET>";

var authorizeUrl = "https://www.dropbox.com/1/oauth2/authorize?response_type=code&client_id="+appkey;

// 1. 認証ページへ遷移
$("#start").on('click', function(){
window.open(authorizeUrl);
});

// 2. tokenを取得
$("#code_button").on('click', function(){
var code=$("#code").val();
console.log(code);
$.ajax({
type: "POST",
url: "https://api.dropboxapi.com/1/oauth2/token",
data: {
"code": code,
"grant_type": "authorization_code",
"client_id": appkey,
"client_secret": appsecret,
},
success: function(data){
var jsonData = JSON.parse(data);
console.log(jsonData.access_token);
console.log(jsonData.token_type);
console.log(jsonData.uid);
}
});
});

})();


簡単にソースの説明をすると、まず

1 でSTARTボタンが押された時に、認証用のページに別タブで遷移させてます。

URLは以下のような形式。

https://www.dropbox.com/1/oauth2/authorize?response_type=code&client_id=<appkey>

response_type=codeは二つ用意されている認証フローのうちの一つを指定する方法です。認証ページのcodeをコピペすることによって認証するフローです。

他にresponse_type=tokenもありますがそちらは公式サイトを参照してください。(APIリファレンス - Authorization

2ではAuthorizeボタンが押された時の処理を記述してます。

やっていることは単純で、access_tokenを得るために必要なデータを用意し、ajaxで通信し得られたtokenなどの情報をログにはいているだけです。

tokenを得るために最低限必要なデータは、以下の通りです。

name
description

code
手順1によって認証ページへ遷移した際に得られたコード

grant_type
"authorization_code"を入力

client_id
デベロッパー登録時に得られた appkey

client_secret
デベロッパー登録時に得られたappsecret

レスポンスは以下のような形式です。


response.json

{"access_token": "ABCDEFG", "token_type": "bearer", "uid": "12345"}



まとめ

スタンドアロンアプリでDropboxAPIを使うためにtokenを取得するところまでをまとめました。

二つある認証フローのうち、スタンドアロンアプリに向いているcodeフローの説明をしました。

Documentが結構しっかりしているので、大体のことは読めばわかりそうな印象でした。