SSIDとパスワードの変更

最終更新: 2013/7

無線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ライセンスで提供されています。