Help us understand the problem. What is going on with this article?

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

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

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

そもそもOAuthって何

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

https://authya.booth.pm/

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を手っ取り早く試してみる方法

アプリの設定

capture.jpg
enebularのhttpNodePathは↓
スクリーンショット 2019-09-23 18.38.06.png

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

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

チュートリアル

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

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

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

設計図

構成.jpg

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

enebularのフローを作成

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

フローの説明

スクリーンショット 2019-09-23 19.04.36.png

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

パラメーターを設定

スクリーンショット 2019-09-23 18.47.57.png

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の情報を入力 スクリーンショット 2019-09-23 22.33.37.png 詳細はプロトタイピングツール Noodl と Node-RED をMQTTでつないでみるメモ を参考に設定してください
  3. RESTノードのendpointにenebularのhttpNodePathを入力
    スクリーンショット 2019-09-23 22.32.54.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

  5. HTMLノードの中身を編集
    スクリーンショット 2019-09-23 22.34.16.png

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

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

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

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

叩いてみる


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

本編とあまり関係ない話

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

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

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away