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を手っ取り早く試してみる方法](https://qiita.com/makopo/items/32f41128c2e055cec68f)
フムフム。
- 認可コードを取得
- アクセストークンを取得
- リソースサーバー（FitbitAPI）からデータを取得
この流れを、Noodlとenebularで作っていきます。
設計図
ロールはこんな感じ。
- 認可サーバー: Fitbitの、アクセストークンを発行するサーバー
- リソースサーバー： Fitbit API
- リソースサーバーのクライアント: enebular
- enebularのクライアント: Noodl
enebularのフローを作成
oauth2ノードというものがあったので使ってみました。
Discoveryにアップしましたので、下記リンクから自分のプロジェクトにimportしてください。
公開したフローはコチラ
フローの説明
トークン取得をした後、下記3つの事を行なっています。
（oauth2ノードの右側、三又に分かれている部分の説明）
- 「HTML 完了画面」ノード： 完了画面へのリダイレクト
- 「Set Flowトークン」ノード: flow関数にトークンを入れる
- MQTTサーバーの
/fetchedTokenトピックにトークン取得成功の旨を送信
パラメーターを設定
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でつないでみるメモ](https://www.1ft-seabass.jp/memo/2019/06/26/noodl-meets-nodered-using-mqtt/)
を参考に設定してください
3. 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ノードの中身を編集
<!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位をキープしてる巨峰すごいな。