Now Loading !!!
web tool

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

┌ start.html ログインダイアログボックスをオープンするjavascriptを設置するファイル(上記1)
├ login.hta ログインダイアログボックス(上記2)
sample(folder) sample.html ログインするファイル(上記3)
index.html 覗き防止用index.htmlファイル(白紙で可)
└index.html 覗き防止用index.htmlファイル(白紙で可)

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

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

■htmlコード記述例

  (リンク文字の場合)
<a href="javascript://" onclick="fnLoginWin();">サンプル</a>
  • リンク文字をクリックすると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)を選択すると、ダイアログボックスを閉じます。
  • 入力したパスワードを間違うと、ログインできず「ファイルがみつかりません」というエラーになります。

PageTop
【更新記録】
※(2007.05.10) v1.02 「使用環境」を追加しました。(この日までのアクセス数:001169)
※(2006.10.07) v1.01 一般公開しました。
【AccessCounter】 
アクセスカウンター
※本ページの記載内容を充分理解の上、ご使用下さい。使用されたことにより不利益等が発生しても一切の責任を負いません。
※本ページはA4サイズの用紙に印刷できるようになっていますが、右側がはみ出す場合は、ブラウザで余白の設定を行って下さい。
※印刷時、ナビゲーション用リンク文字やボタン、表示説明用エリア等は印刷されません。
※印刷設定が「背景を印刷」するになっていないと、背景として設定されている画像は印刷されません。
Copyright(C) 2007 web工房 All Rights Reserved.
  URI:http://www.webstudio.jp/