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

10318 ワード
Noodl OAuth2.0 mqtt fitbit enebular mqtt テキストリンク

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

フロントエンドを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へのリクエスト

  1. このリンクからプロジェクトをダウンロードし、Noodlにインポート
  2. project settingでMQTTの情報を入力 詳細はプロトタイピングツール Noodl と Node-RED をMQTTでつないでみるメモ を参考に設定してください

  3. RESTノードのendpointにenebularのhttpNodePathを入力

  4. FitbitAPIチュートリアルの「- We've generated the authorization URL for you, all you need to do is just click on link below:」の下にあるリンクをコピー

  5. 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で確認ができます。

叩いてみる


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

本編とあまり関係ない話

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

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