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

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

[APIリファレンス](https://www.dropbox.com/developers/documentation/http/documentation)

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


## 認証までの流れ

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

ローカルのindex.htmlをブラウザで開く（ソースは後ほど）
<img width="683" alt="スクリーンショット 2016-04-07 9.24.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/26081/189ee93e-729a-707f-70a8-f46798ae5253.png">

↓
STARTボタンを押して、別タブでDropboxの認証ページを開く
<img width="708" alt="スクリーンショット 2016-04-07 9.26.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/26081/2e889c6a-80bd-b130-24f0-2e0680b7f3a0.png">
↓
「許可」を押して表示されたcodeをコピー
![Group.png](https://qiita-image-store.s3.amazonaws.com/0/26081/7b12b714-b743-251f-c543-4df508c291dd.png)
↓
ローカルのindex.htmlに戻ってコピーしたcodeを入力してAuthorize!ボタンを押す
↓
コンソールにlogとしてaccess_tokenなどが表示されれば完了

## 手順

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

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

登録方法は[こちらの記事](http://mushikago.com/i/?p=3874)などを参考にしました。

Dropboxの開発者向けサイト
[Developers - Dropbox](https://www.dropbox.com/developers)


1. デベロッパーサイトにアクセス
![aaaaa.png](https://qiita-image-store.s3.amazonaws.com/0/26081/50a6c503-ccfc-289a-67a0-f7f644ea229e.png)

2. 左のメニューのMy appsを選択
3. 「Create app」ボタンを押す
4. 各種設定項目を入力する
    * Choose an API は左のDropbox APIで良いかと。
    *  Choose the type of access you need はAppFolderの方で
    *  使用するアプリ名を入力（重複がダメなので良い感じにする）
 
   <img width="1057" alt="スクリーンショット 2016-04-06 9.34.03.png" src="https://qiita-image-store.s3.amazonaws.com/0/26081/ae190b22-c99d-7c1a-8543-a85c6ffa7897.png">

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

<img width="576" alt="スクリーンショット 2016-04-07 1.27.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/26081/ab5c5fb6-396f-0f6d-a96d-bd01e5d5a899.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](https://www.dropbox.com/developers/documentation/http/documentation#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が結構しっかりしているので、大体のことは読めばわかりそうな印象でした。