【js_login】

javascriptとモーダルウィンドウでログイン

javascriptを用いてログイン認証を行なうツール【js_login】です。

ログインするパスワード認証するために、小さなダイアログボックス(モーダルウィンドウ)を開きます。入力したパスワードと同じ名前のファイル名をオープンします。

(パスワードは sample です)

【js_login】の概要

機 能

【js_login】の基本的機能は下記のとおりです。

1. ログイン認証するために、パスワードを入力するダイアログボックス(モーダルウィンドウ)をオープンします。
2. ログインダイアログボックスに入力したパスワードと同じ名前のファイルにログインします。

適用範囲

【js_login】は次のような場合に使用します。

• PHP等の認証スクリプトが使えないwebサーバーであるとき
• あまり大げさな認証システム(PHPやASPでセッション管理する)を必要としないとき

使用環境

【js_login】は次の環境で作成・機能確認しています。

• OS:windows XP SP2
• ブラウザ:IE6/IE7

留意事項【重要】

使用にあたり、下記を充分理解して適用して下さい。

• クライアントサイドスクリプトなのでセキュリティレベルが低いため、重要なサイトへの認証には用いないで下さい。
• 万が一、パスワードが漏洩した場合でも、それ程、大きな影響がないファイルへのログインに限定して下さい。パスワード変更は、ログインするファイル名を変更する必要があります。
• セッション管理を行わないので、このログイン認証をパスしてログインするページに直接アクセスできることを充分認識しておいて下さい。
• パスワードの漏洩を避けるため、複数での共用は避けた方が無難です。

はやい話が、それほど簡易的なものだと言うことです。 私の場合、規模の小さなサイトのメンテナンス用のページ(アクセスログをチェックしたり、一部のページを書き換える機能を有しているだけ)へのログインに使用しています。

【js_login】の構成と詳細

【js_login】は下記のチップスやファイルで構成されています。

1. ログインダイアログボックス(モーダルウィンドウ)をオープンするためのjavascript
2. ログインダイアログボックス本体(htmlファイル)---ここではlogin.hta
3. ログインするファイル(htmlファイル)

【js_login】の設置例を下記に示します。ファイル名やフォルダ名、パス等はそれぞれ変更可能です。

ダイアログボックスをオープンするためのjavascript

ログインダイアログボックスをオープンするjavascriptを設置するファイル(例示名:start.html)に下記のタグを記述します。

■しかくhtmlコード記述例

• リンク文字をクリックするとjavascript「fnLoginWin()」を起動します。

■しかく起動するjavascript

ログインパスワードを sample するとログインするファイルは sample.html となります(別の拡張子のファイルに変更することも可能)。 下記のスクリプトでは sample というフォルダを作成し、その中に sample.html を保存しています(相対パス:sample/sample.html)。

function fnLoginWin(){
//◆だいやまーく初期設定(ここから)
 //※(注記)ログインウィンドウのフルパス(ファイル名・拡張子まで)
 var strWinLogin="login.hta"
 //※(注記)ログインウィンドウの表示条件
 var strWinCondition=→
 "dialogHeight:180px;dialogWidth:300px;dialogTop:100px;dialogLeft:100px;→
 scroll:0;status:0;resizable:0;"
 //※(注記)ログインするファイルのフォルダのパス(ファイル名なし・/で閉じる)---同一フォルダなら空白
 var strLoginFilePath="sample/";
 //※(注記)ログインするファイルの拡張子(.を付ける)
 var strLoginFileName2=".html";
 //※(注記)ログインするウィンドウの幅(px)
 var valWidth=600;
 //※(注記)ログインするウィンドウの高さ(px)
 var valHeight=500; 
//◇初期設定(ここまで)
 
 var strLogin;
 var strLoginFile;
 
 //ダイアログボックスをオープンする
 strLogin=window.showModalDialog(strWinLogin,"win_login",strWinCondition);
 //(ダイアログボックスで入力したハスワードをstrLoginとして親ウィンドウに戻す)
 
 //ダイアログボックスで「キャンセル時」の処置(変数の存在チェック)
 if(typeof(strLogin)=="undefined"){
 return false;
 }else{
 //ログインするファイルのパス設定(strLoginFilePath==""は同一フォルダ内)
 if(strLoginFilePath==""){
 strLoginFile= strLogin + strLoginFileName2;
 }else{
 strLoginFile= strLoginFilePath + strLogin + strLoginFileName2;
 }
 //ログインするファイルをウィンドウの中央に配置する
 var ScrnW=window.screen.availWidth;
 var ScrnH=window.screen.availHeight;
 var valTop=(ScrnH-valHeight)/2; 
 var valLft=(ScrnW-valWidth)/2;
 
 window.open→
 (strLoginFile,"win_mainte","width=" + valWidth + ",height=" + valHeight + ",→
 top=" + valTop + ",left=" + valLft + ",resizable=1,scrollbars=1,menubar=1,status=1");
 return false;
 }
}

• ログインダイアログボックス(login.hta)をモーダルでオープンします。
• オープンする大きさ、位置、各種バーの表示等(各種バーは表示しない、ウィンドウサイズ変更不可)を設定します。
• パスワードを変えるとログインするファイル名も同一名に変える必要があります。
• ログインするファイル sample.html の表示条件を設定します。

上記のスクリプトには、パスワードもログインするファイル名も記述がありませんので、スクリプトを覗かれてもパスワードが判明することはありません。

ログインダイアログボックス本体(htmlファイル) login.hta

ログインダイアログボックスのhtmlファイル(ここでは login.hta)を設置します。

■しかくlogin.hta のソースをみる

login.htaのソース表示 クリックするとソースを表示したhtmlファイルをオープンします。
ソース表示用のファイルなのでダウンロードしないで下さい。

• ツールバー等の各種バーの表示の必要がないのでhtaファイルにしています。
• jacascript及びスタイルシートはlogin.htaに書き込んでありますが、外部ファイルにした方がすっきりします。
• 入力したパスワードの値を、親ウィンドウ(start.html)に戻す処理をしています。

■しかくlogin.hta のダウンロード

login.htaのダウンロード 右クリックして「対象をファイルに保存」を選択して下さい。

ログインするファイル(htmlファイル) sample.html

ログインするファイルは自由に作成して下さい。htmlの他、cgiファイル等にすることも可能です。参考までにsample.htmlをダウンロードすることができるようにしています。

■しかくsample.html のダウンロード

sample.htmlのダウンロード 右クリックして「対象をファイルに保存」を選択して下さい。

セキュリティ index.html

ブラウザのアドレスバーに各フォルダのアドレスを指定すると、フォルダに保存されたファイルが覗かれてしまいます。必ず、各フォルダには index.html(内容は白紙で可能)を設置しておいて下さい。
下記は、このファイルを保存しているフォルダ、及びsample.htmlを保存しているフォルダに直接アクセスします。
http://www.webstudio.jp/webstudio/contents/js_login/
http://www.webstudio.jp/webstudio/contents/js_login/sample/

上記のリンク文字をクリックすると両方のフォルダに設置された覗き防止用index.htmlファイルが表示され、フォルダの内容を覗くことができません。

【js_login】を使用する

実際に【js_login】を実際に使用してみる

(パスワードは sample です)

• ログインダイアログボックスのキンャセル(Cancel)を選択すると、ダイアログボックスを閉じます。
• 入力したパスワードを間違うと、ログインできず「ファイルがみつかりません」というエラーになります。

【更新記録】

※(注記)(2007年05月10日) v1.02 「使用環境」を追加しました。(この日までのアクセス数:001169)

※(注記)(2006年10月07日) v1.01 一般公開しました。

【AccessCounter】

アクセスカウンター