APIで遊びたいなーと思うとそこに立ちはだかるOAuth2.0の壁！！
これをノンコーディングで突破する方法は無いのか！？
というわけで、試行錯誤の結果ノンコーディングで叩く一つの路を見つけました！！！！！

Fitbit APIから心拍数を取得 pic.twitter.com/ibViy4Y7TZ
— はりねずみ麺 (@hedgehog_noodl) September 23, 2019

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

そもそもOAuthって何

OAuthについてはAuth屋さんの本を読むとわかりやすいです！

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

はじめる前に、Node-redのLibraryを検索しよう

時間を浪費する前に、まずは下記で自分が使いたいAPIのノードが既にあるかどうかを確認しましょう。
Node-RED Library

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

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

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

アプリの設定

enebularのhttpNodePathは↓

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

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

チュートリアル

左下のリンク「OAuth2.0 tutorial page」に飛び、チュートリアルをさらってみましょう。
詰まったら下記リンクを参照してください。
FitbitのAPIを手っ取り早く試してみる方法

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

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

設計図

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

enebularのフローを作成

oauth2ノードというものがあったので使ってみました。
Discoveryにアップしましたので、下記リンクから自分のプロジェクトにimportしてください。
公開したフローはコチラ

フローの説明

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

パラメーターを設定

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へのリクエスト

このリンクからプロジェクトをダウンロードし、Noodlにインポート
project settingでMQTTの情報を入力詳細はプロトタイピングツール Noodl と Node-RED をMQTTでつないでみるメモを参考に設定してください
RESTノードのendpointにenebularのhttpNodePathを入力
FitbitAPIチュートリアルの「- We've generated the authorization URL for you, all you need to do is just click on link below:」の下にあるリンクをコピー
HTMLノードの中身を編集

Noodl-HTMLノード

<!DOCTYPE html>
<a href="4でコピーしたURL" target="_blank"><div id="fetchCode"></div></a>

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

ブラウザで編集中のプロトタイプを見る方法

1. ブラウザアイコンをクリック
2. URLをクリック（http://192.168.XXX）
同じネットワークに繋がっているデバイスからもこのURLで確認ができます。

叩いてみる

こんな感じの流れ pic.twitter.com/vyYqAK25rY
— はりねずみ麺 (@hedgehog_noodl) September 23, 2019

できた〜！
もう少しいい方法とかありましたらドシドシ募集してます。

本編とあまり関係ない話

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

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

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