こんばんは。昨日のエントリーで、ログイン認証をAjaxで実現しようかと述べていたのですが、そうしました。流れとしては、

1. ログインアイコンをクリックすると、その場でログイン画面を生成
2. IDとPWDを入力したら送信。このときにAjaxのPOSTモードで送信しますが、IDとPWDはJavaScriptでMD5^G処理して送出されるので、セキュリティー的には安心です。
3. 正しいIDとPWDであれば、指定していた管理画面に遷移しますし、認証に失敗すれば警告が出ます。

てな感じです。Ajaxを使うことの利点は、わざわざログインページに移って、そこで認証して･･･という流れがなくなり、少ない手順でログイン出来ることです。これに慣れると、これまでのログイン手順が面倒に感じますよ。キモのスクリプトだけを抜粋しておきます。

function AjaxLogIn(){
 var module = Ajax.cloneScript("js/md5.js");
 if(module){
  o("loginSubmit").disabled = true;
  Ajax.post("admin.php", "mode=login&adminName="+MD5.$(o("adminName").value)
                                  +"&adminPass="+MD5.$(o("adminPass").value)
                                  +"&type=ajax",
   function(to){
    if(to.match(/¥.php/)){
     d.write('<script type="text¥/javascript">window.location.href="'
                                                   +to+'";<¥/script>');
    } else {
     alert(to);
     o("loginSubmit").disabled = false;
     o("adminName").focus();
    }
   }
  );
 } else alert("md5.js module Not Loaded!");
}

　ダイアログ画面は、マックOSXっぽくアニメーション化してみました。まぁお遊びですが。。アニメーションといっても、単に上からにょろっと出てくるだけですが、この際に昨日紹介したループ関数メソッドを使ってみました。

var slideDown = function(ob){ob.style.top = (parseInt(ob.style.top)+10) +"px"};
slideDown.loop(1, 16)(IO); // IOは、ダイアログのこと

　１ミリ秒おきに、slideDownという関数を１６回繰り返すという指定です。興味がある方は、ソースをどうぞ。

　あと、追記ですが、上述のMD5関数は、Masanao Izumoさんのmd5.jsを圧縮したものを使用しています。　　　→http://www.onicos.com/staff/iz/amuse/javascript/expert/md5.txt

　有用なスクリプトを公開して下さっている同氏に感謝します。