FlashAir IoT Hub APIの利用例(サーバーサイドWebアプリ)

最終更新: 2018/4

概要

このチュートリアルではFlashAir IoT Hub APIを使ったサーバーサイドWebアプリについて、サンプルコードを交えて説明します。 APIの使い方も参照しながら、お読みください。
FlashAir IoT Hub APIでは、アプリの利用形態に合わせて複数のアクセス認可方法が用意されています。 このチュートリアルではその中でも サーバーサイドWebアプリの場合について、説明します。


サーバーサイドWebアプリ

サーバーサイドWebアプリは次の構成のものを指します。

  • WebアプリはWebサーバー上で実行される。
  • FlashAir IoT Hub APIにWebアプリからアクセスする。
  • Wwbアプリから、リソース(HTML、CSS、JavaScriptなど)をアプリ利用者のブラウザにロードし、実行する。
サーバーサイドWebアプリの構成

この様な構成のアプリでFlashAir IoT Hub APIを利用する場合は、アプリのタイプに サーバーサイドWebアプリを選択して アプリ登録をしましょう。

前提

本チュートリアルは以下の前提で説明します。

  • FlashAir IoT Hubの アカウント登録が完了していること。
  • アプリのタイプを「サーバーサイドWebアプリ」として アプリ登録していること。
  • PHP(5.2以上)を利用可能なWebサーバーが用意されていること。

サンプルコードの作成

サーバーサイドWebアプリからAPIを利用する例としてアクセス認可を行い、計測値を取得するサンプルコードをPHPで作成します。

サンプルコードの構成
  1. const.php
    アプリのクライアントIDなどアプリ全体で使用する定数を定義します。
  2. main.php
    最初に表示するページです。アクセス認可するためのリクエストURLをリンクとして表示します。
  3. auth.php
    アクセス認可後、リダイレクトされるページです。認可コードを元にアクセストークンを取得します。
  4. measurement.php
    Measurement API を使い、計測値を取得して表示します。

const.php

<?php
define('CLIENT_ID', 'xxxxxxxxxxxxxxxxxxxxxx');
define('CLIENT_STATE', 'r5h2dcvm');
define('DEVICE_ID', '000000000000000000');
define('REDIRECT_URL', 'http://localhost/auth.php');
?>
  • 2行目
    クライアントID。 アプリ登録後発行されたIDに変更してください。
  • 3行目
    クライアント指定のCSRF対策用乱数文字列。説明用に固定値としていますが、実際のアプリではアクセス認可の度に新しい乱数を生成して利用しましょう。
  • 4行目
    デバイスID。本サンプルアプリで登録した計測値を Measurement APIで取得する際に、このデバイスIDを指定します。
    FlashAir IoT HubでFlashAirを登録し、接続した際に表示されるFlashAirのIDに変更してください。
  • 5行目
    リダイレクトURL。localhostの部分はauth.phpを置いたサーバーのURLを指定してください。

main.php

<?php
require_once './const.php';

$api_url = 'https://iot-hub-api.flashair-developers.com/v1/authorize';
$responseType = 'code';
$clientId = CLIENT_ID;
$redirectUri = str_replace('.', '%2E', rawurlencode(REDIRECT_URL));
$scope = str_replace('.', '%2E', rawurlencode('user.read flashair.read flashair.write'));
$state = CLIENT_STATE;
$auth_url = "$api_url?response_type=$responseType&client_id=$clientId&redirect_uri=$redirectUri&state=$state&scope=$scope";
?>
<html>
  <body>
    <ul>
      <li><a href="<?php echo $auth_url ?>">Authorize</a></li>
    </ul>
  </body>
</html>
  • 4行目
    サーバサイドWebアプリ向け認可要求のURLです。
  • 5行目
    パラメータ response_typeの値です。サーバーサイドWebアプリの場合は codeを指定します。
  • 6行目
    パラメータ client_idの値です。 const.phpで定義している値を設定しています。
  • 7行目
    パラメータ redirect_uriの値です。 const.phpで定義しているリダイレクトURLを rawurlencode()にてURLエンコードしています。 rawurlencode().(ドット)を変換しない為、 str_replace()にて置換しています。
  • 8行目
    パラメータ scopeの値です。 redirect_uriと同様にURLエンコードしています。
  • 9行目
    パラメータ stateの値です。 const.phpで定義している値を設定しています。
  • 10行目
    サーバサイドWebアプリ向け認可要求のURLに上記のパラメータを付与しています。
  • 15行目
    10行目で生成した サーバサイドWebアプリ向け認可要求のURLを出力します。

auth.php

<?php
require_once './const.php';

function authorization($clientId, $code, &$message) {
    if (empty($code)) {
        $message = 'Code was not returned.';
        return false;
    } else {
        $url = 'https://iot-hub-api.flashair-developers.com/v1/token';
        $data = array(
          'grant_type' => 'authorization_code',
          'code' => $code,
          'client_id' => $clientId,
          'redirect_uri' => REDIRECT_URL);
        $header = array('Content-Type: application/x-www-form-urlencoded');
        $curl=curl_init();
        curl_setopt($curl, CURLOPT_URL, $url);
        curl_setopt($curl, CURLOPT_POST, true);
        curl_setopt($curl, CURLOPT_POSTFIELDS, http_build_query($data));
        curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
        curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false);
        curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
        curl_setopt($curl, CURLOPT_HTTPHEADER, $header);

        $response = curl_exec($curl);
        curl_close($curl);
        if (empty($response)) {
            $message = 'Failed token api.';
            return false;
        }
        $response_json = json_decode($response);
        if (!$response_json) {
            $message = 'Failed decode token api:' . $response;
            return false;
        }
        if (property_exists($response_json, 'error')) {
            $message = 'Failed error occurred. ' . $response_json->error;
            return false;
        }
        if (!property_exists($response_json, 'access_token')) {
            $message = 'Failed decode access_token. token:' . $response_json;
            return false;
        }
        $access_token = $response_json->access_token;
        if (empty($access_token)) {
            $message = 'Failed decode access_token. token:' . $response_json;
            return false;
        }
        if (!file_put_contents('token.txt', $access_token)) {
            $message = 'Failed save authorization code.';
            return false;
        }
        $message = 'Authorization succeeded.';
        return true;
    }
}
$code = $_GET['code'];
$state = $_GET['state'];
$error = $_GET['error'];
$message = '';
$isAuthorized = false;

if (empty($state) || ($state != CLIENT_STATE)) {
    $message = 'state is invalid.';
} else if (!empty($error)) {
    $message = $error;
} else {
    $isAuthorized = authorization(CLIENT_ID, $code, $message);
}
?>
<html>
  <body>
    <p><?php echo $message ?></p>
    <?php if ($isAuthorized) : ?>
      <a href="measurement.php">Show Measurement Data</a>
    <?php endif; ?>
  </body>
</html>
  • 9行目
    トークン発行のURLです。
  • 10-14行目
    トークン発行のパラメータを生成します。
    パラメータ codeには取得した認可コードの値を指定します。
  • 16-26行目
    10-14行目で生成した トークン発行のURLにHTTPリクエストを送信します。
  • 27-49行目
    トークン発行のレスポンスよりアクセストークンの値を取り出し、 テキストファイル token.txtに保存しています。
  • 57-59行目
    URLのパラメータから、認可コード ( code) 、クライアント指定のCSRF対策用乱数文字列 ( state) 、エラーコード ( error) を取得しています。
  • 74-76行目
    トークン発行 が成功した場合、 計測値を表示するページ( measurement.php)のリンクを表示させます。

measurement.php

<?php
require_once './const.php';

function getMeasurements($token, $device_id, &$message) {
    $url = "https://iot-hub-api.flashair-developers.com/v1/flashairs/$device_id/measurements/flashair";
    $header = array("Authorization: Bearer $token");

    $curl=curl_init();
    curl_setopt($curl, CURLOPT_URL, $url);
    curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
    curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false);
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($curl, CURLOPT_HTTPHEADER, $header);

    $response = curl_exec($curl);
    curl_close($curl);

    if (empty($response)) {
        $message  = 'failed obtain response';
        return false;
    }
    $response_json = json_decode($response);
    if (empty($response_json)
        || !property_exists($response_json, 'measurements')) {
        $message  = 'failed obtain Mesurements';
        return false;
    }
    $measurements = $response_json->measurements;
    return $measurements;
}
$token = file_get_contents('token.txt', false, null);
$message = '';
$measurements = getMeasurements($token, DEVICE_ID, $message);
?>
<html>
  <body>
    <?php echo $message ?>
    <ul>
    <?php
    foreach ((array) $measurements as $measure) {
      $values = implode(', ', array_filter($measure->values, 'strlen'));
      echo '<li>' . $measure->time . ':' . $values . '</li>';
    }
    ?>
    </ul>
    <a href="main.php">Back</a>
  </body>
</html>
  • 5行目
    計測値を取得する Measurement APIのURLです。
  • 6行目
    ユーザートークン認証の為、HTTPリクエストヘッダーにアクセストークンの値を指定しています。
  • 8-16行目
    Measurement APIのURLにHTTPリクエストを送信します。
  • 18-28行目
    Measurement APIのレスポンスから計測値を取得しています。
  • 33行目
    auth.phpで取得・保存したアクセストークンの値をテキストファイル token.txtから取得しています。
  • 40-43行目
    取得した計測値を出力しています。

サンプルコードの実行

では、実際にサンプルコードを実行してみましょう。Webサーバーのルートディレクトリにサンプルコードを配置し、Webサーバーを起動してください。
次にブラウザより http://localhost/main.phpにアクセスしてください。


認可要求画面

Authorizationのリンクをクリックすると、ログイン画面に遷移します。

ログイン画面

メールアドレスとパスワードを入力し、ログインすると、アクセス承認を求められますので、承認ボタンをクリックしてください。

認可画面

すると、 http://localhost/auth.phpにリダイレクトされます。

トークン発行画面

Show Measurement Dataのリンクをクリックし、 http://localhost/measurement.phpのページを表示します。

計測値取得画面

ページに計測値が表示されました。何も表示されない場合は、FlashAir IoT Hubに計測値が登録されていない可能性があります。サンプルスクリプトを実行し、計測値を登録してください。

まとめ

FlashAir IoT Hub APIのアクセス認可を行い、計測値のデータが取得できました。
サーバーサイドのWebアプリケーションでFlashAir IoT Hub APIを利用するための手順がお判り頂けたかと思います。

なお、本サンプルコードではアクセストークンをテキストファイルに保存していますが、実際に使用する際にはアプリ利用者からアクセス出来ない場所に保存したり、暗号化などが必要でしょう。ご注意ください。

サンプルコードのダウンロード

iothub_tutorial_07.zip (3KB)

このサイトのサンプルコードは 二条項BSDライセンスで提供されています。