SSIDとパスワードの変更

無線LANでやりとりされるデータを暗号化して安全に通信するために、ネットワークパスワードを独自のものに変更することが望ましいでしょう。
また、FlashAirの無線LANを識別する名前 (SSID) も、他の人のFlashAirなどの無線LANと区別しやすいわかりやすい名前に変えておくとよいでしょう。
このチュートリアルでは、FlashAirのSSIDとネットワークパスワードを取得および設定する方法について解説します。

現在の設定を読み込んで表示し、それを変更することができるウェブアプリを作成します。

FlashAirのSSIDとネットワークパスワードを取得するには command.cgiを、設定するには config.cgiを使用します。

なお、ステーションモードではネットワークパスワードの取得ができません。本チュートリアルは、アクセスポイントモードにて学習ください。

マスターコード

FlashAirの設定を変更する場合には、マスターコードという設定変更専用のパスワードが必要です。

SSIDとパスワードは、誤って変更すると無線LAN接続ができなくなってしまう、重要な情報です。
そのため、マスターコードを管理者だけの秘密にしておくことで、変更を制限することができる仕組みになっているわけです。

標準のブラウザユーティリティやアプリを使った場合、マスターコードには、初めて使うときに設定作業を行ったPC、またはスマートフォンのMACアドレスが使われます。
このサンプルプログラム中でもMACアドレスをマスターコードとして使用することとします。

以下、本チュートリアルでは、あらかじめPC、またはスマートフォンのいずれかを用い、初期設定は完了して、そのデバイスのMACアドレスがマスターコードとして設定されているものとします。
また、初期設定に使ったデバイスから操作するものとします。

画面レイアウトの作成

これまでと同様、JavaScriptを読み込む部分のほか、マスターコード(MACアドレス)、SSID、ネットワークパスワードを表示する部分と、変更した設定を反映するためのボタンを用意しています。

本チュートリアルでは、わかりやすいようにマスターコード(MACアドレス)を画面に表示していますが、セキュリティ上、表示すべきでないでしょう。同様に、パスワードも ********などと表示するのが良いでしょう。

作成したファイルは /SD_WLAN/Config.htmとして保存します。

/SD_WLAN/Config.htm

    <!doctype html>
    <html>
    <head>
    <title>FlashAir</title>
    <meta charset="UTF-8">
    <title>Flash Air Configuration</title>
    <script type="text/javascript" src="/SD_WLAN/js/jquery.js"></script>
    <script type="text/javascript" src="/SD_WLAN/js/config.js"></script>
    </head>
    <body>
    <div id="header">
    <h1>header</h1>
    </div>
    <hr>
    <div><a href="/">Back to TopPage</a></div>
    <div id="formarea"> 
    Mastercode<br>
    <span id="mastercode"></span><br>
    SSID<br>
    <input name="appssid" id="appssid" type="text" value="" maxlength="32" /><br>
    Password<br>
    <input name="appnetworkkey" id="appnetworkkey" type="text" value="" maxlength="63"/><br>
    <button id="submit">submit</button><span id="result"></span>
    </div>
    <hr>
    <div id="footer">
    footer
    </div>
    </body>
    </html>

18, 20, 22行目
デバイスのマスターコード(MACアドレス)、SSID、ネットワークパスワードを表示または編集するための領域です。 idにJavaScriptからアクセスするための名前を設定しています。
22行目
type="password"とすれば、********などと文字がそのまま表示されなくなります。

取得、表示、変更を行うコードの実装

ページの読み込み完了時にcommand.cgiを呼び、デバイスのマスターコード(MACアドレス)、SSID、ネットワークパスワードをそれぞれ取得します。

ボタンクリック時にconfig.cgiを呼び出し、新たな設定値を送ります。成功すると SUCCESSが、失敗すると ERRORが返ってきますので、それを画面に表示します。

/SD_WLAN/js/config.js

    // JavaScript Document
    function getMasterCode(){
        var url="/command.cgi?op=106";
        $.get(url,function(data){
            $('#mastercode').text(data);
            mastercode=data;
        });
    }
    function getSSID(){
        var url="/command.cgi?op=104";
        $.get(url,function(data){
            $('#appssid').val(data);
        });
    }
    function getAPPNETWORKKEY(){
        var url="/command.cgi?op=105";
        $.get(url,function(data){
            $('#appnetworkkey').val(data);
        });
    }
    function setParams(){
        var datetime = new Date();
        var url="/config.cgi?MASTERCODE="+mastercode
                +"&APPSSID="+$("#appssid").val()
                +"&APPNETWORKKEY="+$("#appnetworkkey").val()
                +"&TIME="+datetime.getTime();
        $.get(url,function(data){
            $('#result').text(data);    
        });
    }
    //Document Ready
    $(function() {
        getMasterCode();
        getSSID();
        getAPPNETWORKKEY();
        $("#submit").click(setParams);
    });

2-8行目
/command.cgi?op=106を使用してデバイスのマスターコード(MACアドレス)を取得し、画面に表示しています。また、変更する際に使うのでmastercodeという変数に保存しています。
9-14行目
command.cgi?op=104を使用してSSIDを取得し、画面に表示しています。
15-20行目
command.cgi?op=105を使用してネットワークパスワードを取得し、画面に表示しています。
21-30行目
編集されたSSIDとネットワークパスワードをFlashAirに設定する部分です。
config.cgiを使用します。
ブラウザがキャッシュを使わずに確実にCGIコマンドが発行されるよう、TIMEパラメータに現在時刻を付加して、毎回異なるリクエストを生成しています。
36行目
ボタンがクリックされたときに、設定を反映する関数(setParams())を呼び出す設定を行っています。

実行結果

FlashAirに無線LAN接続したPCまたはスマートフォンのブラウザで確認してみましょう。ブラウザのURL入力ボックスに下記のように打ち込みます。

http://flashair/SD_WLAN/Config.htm

現在の設定が表示され(下図・左)、値を変更して submitボタンを押すと設定変更を行います。うまくいけば SUCCESSと表示されます(下図・右)。なお、設定変更CGIコマンドを実行すると、無線LAN接続が切断されます。変更後のSSIDでつなぎ直しましょう。

Browser Utility Tutorial 6 Result

サンプルコード

web_tutorial_06.zip (2KB)

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