ノンコーディングでOAuth2.0に挑む！Noodl×enebular×Fitbit API

APIで遊びたいなーと思うとそこに立ちはだかるOAuth2.0の壁！！
これをノンコーディングで突破する方法は無いのか！？
というわけで、試行錯誤の結果ノンコーディングで叩く一つの路を見つけました！！！！！
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Fitbit APIから心拍数を取得 <a href="https://t.co/ibViy4Y7TZ">pic.twitter.com/ibViy4Y7TZ</a></p>&mdash; はりねずみ麺 (@hedgehog_noodl) <a href="https://twitter.com/hedgehog_noodl/status/1176081310751657985?ref_src=twsrc%5Etfw">September 23, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

フロントエンドをNoodl、バックエンドをenebular、という形で役割分担していきます。

# そもそもOAuthって何
OAuthについてはAuth屋さんの本を読むとわかりやすいです！
![book.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480279/aa44025c-e663-dac3-193f-f5ce73b0a022.jpeg)

https://authya.booth.pm/

>OAuth2.0はサードパーティアプリケーションによるHTTPサービスへの限定的なアクセスを可能にする認可フレームワークである。
>（「雰囲気でOAuth2.0を使っているエンジニアがOAuth2.0を整理して手を動かしながら学べる本」より引用）

# はじめる前に、Node-redのLibraryを検索しよう
時間を浪費する前に、まずは下記で自分が使いたいAPIのノードが既にあるかどうかを確認しましょう。
[Node-RED Library](https://flows.nodered.org/?num_pages=1 "Node-RED Library")

あったらラッキー、なかったら、記事をスクロール！
Fitbitノードは検索するとヒットするのですが、以前のバージョン用のようでうまくいきませんでした。
（既にノードがある場合はenebularでnodeをインストール、Noodlとのやり取りはRESTかMQTTで行うと爆速です。）

# Fitbit APIにアプリを登録し、チュートリアルをやってみる

まずは下記URLを参考に、アプリの登録とチュートリアルを試して認証のフローを確認しましょう。
「5. クエリの実行」まで行うと、何をすればいいのかなんとなくわかります。
[FitbitのAPIを手っ取り早く試してみる方法](https://qiita.com/makopo/items/32f41128c2e055cec68f)

### アプリの設定
![capture.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480279/ab7184f2-df56-5aaf-360d-f5ceef576056.jpeg)
enebularのhttpNodePathは↓
<img width="336" alt="スクリーンショット 2019-09-23 18.38.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480279/db333be8-8be0-5014-39d3-351fae088667.png">

- Callback URLの設定は、「【enebularのhttpNodePath】/fitbittest/callback」
- OAuth2.0 Authorization typeをPersonalに変更

設定したらセーブします。

### チュートリアル
<img width="1379" alt="capture2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480279/59d32528-31e2-5f4c-b607-cd06c54d2bd9.png">
左下のリンク「OAuth2.0 tutorial page」に飛び、チュートリアルをさらってみましょう。
詰まったら下記リンクを参照してください。
[FitbitのAPIを手っ取り早く試してみる方法](https://qiita.com/makopo/items/32f41128c2e055cec68f)

フムフム。
1. 認可コードを取得
2. アクセストークンを取得
3. リソースサーバー（FitbitAPI）からデータを取得

この流れを、Noodlとenebularで作っていきます。

### 設計図
![構成.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480279/ffd10ed7-27af-f712-6b66-b322ac4db9b8.jpeg)

ロールはこんな感じ。
- 認可サーバー: Fitbitの、アクセストークンを発行するサーバー
- リソースサーバー： Fitbit API
- リソースサーバーのクライアント: enebular
- enebularのクライアント: Noodl

# enebularのフローを作成
oauth2ノードというものがあったので使ってみました。
Discoveryにアップしましたので、下記リンクから自分のプロジェクトにimportしてください。
[公開したフローはコチラ](https://enebular.com/discover/flow/915b6733-71f8-4fb5-bcbb-40edc48f0fb8)

### フローの説明
<img width="824" alt="スクリーンショット 2019-09-23 19.04.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480279/77104bf6-a547-ff29-ec74-c6a305731373.png">

トークン取得をした後、下記3つの事を行なっています。
（oauth2ノードの右側、三又に分かれている部分の説明）
- 「HTML 完了画面」ノード： 完了画面へのリダイレクト
- 「Set Flowトークン」ノード: flow関数にトークンを入れる
- MQTTサーバーの`/fetchedToken`トピックにトークン取得成功の旨を送信

### パラメーターを設定
<img width="1425" alt="スクリーンショット 2019-09-23 18.47.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480279/01a9bfc3-ceda-0234-707e-424e25ed015c.png">

```javascript:enebular-oauth2Requestノード
msg.oauth2Request = { 
    "access_token_url": "https://api.fitbit.com/oauth2/token", 
    "credentials": {
        "grant_type": "authorization_code",
        "client_id": "Client IDを入力",
        "client_secret": "Client Secretを入力",
        "redirect_uri": "Callback URLを入力",
        "code": msg.payload.code,
        "scope": "profile"
    }
};
return msg;

```


# NoodlでUIとenebularへのリクエスト
1. [このリンク](https://github.com/Mizuki07/noodl/tree/master/Enebular/fitbit-sample%E9%85%8D%E5%B8%83%E7%94%A8)からプロジェクトをダウンロードし、Noodlにインポート
2. project settingでMQTTの情報を入力
<img width="1514" alt="スクリーンショット 2019-09-23 22.33.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480279/b5dd3046-30cd-983e-3734-93c6ad05cea3.png">
詳細は[プロトタイピングツール Noodl と Node-RED をMQTTでつないでみるメモ](https://www.1ft-seabass.jp/memo/2019/06/26/noodl-meets-nodered-using-mqtt/)
を参考に設定してください
3. RESTノードのendpointにenebularのhttpNodePathを入力
<img width="1514" alt="スクリーンショット 2019-09-23 22.32.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480279/e304cb59-b1c1-6a00-17ef-20cfb06f6e6a.png">

4. FitbitAPIチュートリアルの「- We've generated the authorization URL for you, all you need to do is just click on link below:」の下にあるリンクをコピー
![screencapture-dev-fitbit-apps-oauthinteractivetutorial-2019-09-23-22_07_05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480279/a76c91f8-6a2a-4e73-00c2-d118620d6af0.png)

5. HTMLノードの中身を編集
<img width="1514" alt="スクリーンショット 2019-09-23 22.34.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480279/d4367b1b-8922-501a-63d5-c28aa183ea5c.png">


```javascript:Noodl-HTMLノード
<!DOCTYPE html>
<a href="4でコピーしたURL" target="_blank"><div id="fetchCode"></div></a>

```

※注意: Noodlアプリケーション上のプレビュー画面だと「target ="_blank"」（新規ウインドウで表示）ができないので、必ずブラウザでチェックしてください。

### ブラウザで編集中のプロトタイプを見る方法
<img width="362" alt="スクリーンショット 2019-09-23 22.17.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480279/a2f032e4-ba96-f3eb-8532-0d50ca599eea.png">
1. ブラウザアイコンをクリック
2. URLをクリック（http://192.168.XXX）
同じネットワークに繋がっているデバイスからもこのURLで確認ができます。


# 叩いてみる
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">こんな感じの流れ <a href="https://t.co/vyYqAK25rY">pic.twitter.com/vyYqAK25rY</a></p>&mdash; はりねずみ麺 (@hedgehog_noodl) <a href="https://twitter.com/hedgehog_noodl/status/1176133205360963584?ref_src=twsrc%5Etfw">September 23, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
できた〜！
もう少しいい方法とかありましたらドシドシ募集してます。

# 本編とあまり関係ない話
祖母がシャインマスカットを送ってくれたのですが、すごく美味しいですね。
皮を剥かなくて良いし、種もないから食べるのが楽チンで良い！
今まで自分の中のぶどうランキングは１位が巨峰、2位デラウェアだったのですが、2位にシャインマスカットが食い込んできました。

種も皮もあるのに1位をキープしてる巨峰すごいな。