Ajaxでログイン認証

category-icon

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

  1. ログインアイコンをクリックすると、その場でログイン画面を生成
  2. IDとPWDを入力したら送信。このときにAjaxのPOSTモードで送信しますが、IDとPWDはJavaScriptでMD5G処理して送出されるので、セキュリティー的には安心です。
  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は、ダイアログのこと

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

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

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

— posted by martin at 08:07 pm   commentComment [1]  pingTrackBack [0]

この記事に対するコメント・トラックバック [1件]

scrollUp1. datestar — 2008/01/18@15:19:07

大変参考になりました。ありがとうございます。

この記事に対する TrackBack URL:

設定によりTB元のページに、こちらの記事への言及(この記事へのリンク)がなければ、TB受付不可となりますのであらかじめご了承下さい。

コメントをどうぞ。 名前(ペンネーム)と画像認証のひらがな4文字は必須で、ウェブサイトURLはオプションです。

ウェブサイト (U):

タグは使えません。http://・・・ は自動的にリンク表示となります

:) :D 8-) ;-) :P :E :o :( (TT) ):T (--) (++!) ?;w) (-o-) (**!) ;v) f(--; :B l_P~

     
T: Y: ALL: Online:
Created in 0.0043 sec.
prev
2024.3
next
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31