javascriptを用いてログイン認証を行なうツール【js_login】です。
ログインするパスワード認証するために、小さなダイアログボックス(モーダルウィンドウ)を開きます。入力したパスワードと同じ名前のファイル名をオープンします。
サンプル (パスワードは sample です)
【js_login】の概要
機 能
【js_login】の基本的機能は下記のとおりです。
- ログイン認証するために、パスワードを入力するダイアログボックス(モーダルウィンドウ)をオープンします。
- ログインダイアログボックスに入力したパスワードと同じ名前のファイルにログインします。
適用範囲
【js_login】は次のような場合に使用します。
- PHP等の認証スクリプトが使えないwebサーバーであるとき
- あまり大げさな認証システム(PHPやASPでセッション管理する)を必要としないとき
使用環境
【js_login】は次の環境で作成・機能確認しています。
- OS:windows XP SP2
- ブラウザ:IE6/IE7
留意事項【重要】
使用にあたり、下記を充分理解して適用して下さい。
- クライアントサイドスクリプトなのでセキュリティレベルが低いため、重要なサイトへの認証には用いないで下さい。
- 万が一、パスワードが漏洩した場合でも、それ程、大きな影響がないファイルへのログインに限定して下さい。パスワード変更は、ログインするファイル名を変更する必要があります。
- セッション管理を行わないので、このログイン認証をパスしてログインするページに直接アクセスできることを充分認識しておいて下さい。
- パスワードの漏洩を避けるため、複数での共用は避けた方が無難です。
はやい話が、それほど簡易的なものだと言うことです。 私の場合、規模の小さなサイトのメンテナンス用のページ(アクセスログをチェックしたり、一部のページを書き換える機能を有しているだけ)へのログインに使用しています。
【js_login】の構成と詳細
【js_login】は下記のチップスやファイルで構成されています。
- ログインダイアログボックス(モーダルウィンドウ)をオープンするためのjavascript
- ログインダイアログボックス本体(htmlファイル)---ここではlogin.hta
- ログインするファイル(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コード記述例
(リンク文字の場合)
- リンク文字をクリックするとjavascript「fnLoginWin()」を起動します。
■起動するjavascript
ログインパスワードを sample するとログインするファイルは sample.html となります(別の拡張子のファイルに変更することも可能)。
下記のスクリプトでは sample というフォルダを作成し、その中に sample.html を保存しています(相対パス:sample/sample.html)。
(注)→印は、一行に記述していることを示しています。
- ログインダイアログボックス(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)を選択すると、ダイアログボックスを閉じます。
- 入力したパスワードを間違うと、ログインできず「ファイルがみつかりません」というエラーになります。