概要

electronベースのフォトビューワーみたいなのを作ろうとした際に、画像ストレージをDropboxにしようとしてAPIを調査したのでまとめます。
ファイルを操作するAPIはたくさんあるのですが、今回はAPIを使用するためのtokenを取得するところまでを行います。

APIリファレンス

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

認証までの流れ

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

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

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

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

↓
ローカルのindex.htmlに戻ってコピーしたcodeを入力してAuthorize!ボタンを押す
↓
コンソールにlogとしてaccess_tokenなどが表示されれば完了

手順

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

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

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

Dropboxの開発者向けサイト
Developers - Dropbox

デベロッパーサイトにアクセス
左のメニューのMy appsを選択
「Create app」ボタンを押す
各種設定項目を入力する
- Choose an API は左のDropbox APIで良いかと。
- Choose the type of access you need はAppFolderの方で
- 使用するアプリ名を入力（重複がダメなので良い感じにする）

5.アプリが作成される
6. App keyとApp secretが発行されるのでメモ

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	手順１によって認証ページへ遷移した際に得られたコード
grant_type	"authorization_code"を入力
client_id	デベロッパー登録時に得られた appkey
client_secret	デベロッパー登録時に得られたappsecret

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

response.json

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

まとめ

スタンドアロンアプリでDropboxAPIを使うためにtokenを取得するところまでをまとめました。
二つある認証フローのうち、スタンドアロンアプリに向いているcodeフローの説明をしました。
Documentが結構しっかりしているので、大体のことは読めばわかりそうな印象でした。

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

概要

認証までの流れ

手順

まとめ