最初に
JAVAScript を使用した認証（ログイン）ページを私は以前に作成しました。
JAVAScriptのログインページは使い物にならない（簡易的でセキュリテイに甘い）と解説しているサイトが大部分ですが、私はやり方によってはサーバーにも優しくセキュリティにも遜色ないログインプログラムが作成できると思っています。
それが使えるかどうかは、もう少し運用して見なければなりませんが、使える可能性は高いと思っています。
しかし、本格的なログインプログラムを作成するのであれば、PHPで作成するのが常套手段でしょう。
JAVAScriptと違ってハッシュ関数の使用も楽ですし、セッション処理も簡単に行うことができます。
特にJAVAScriptはセッション処理が苦手で、様々なテクニックを必要とします。
私が作成しているJAVAScriptのログインプログラムでもセッション処理を行っているのですが、ブラウザで使用できるメモリーを利用したもので、本来のセッション処理とは異なるものです。
それでも機能的には十分で、セキュリティ上も問題はなさそうです。
ただ、JAVAScript を使用した認証（ログイン）ページを作成したのは、JAVAScriptでは満足なログインページは作成できないと言うJAVAScriptの解説サイトに反発したい意味もあって作成したのであり、本来はPHPで作成するべきものでしょう。
取り敢えず、私が PHPで作成した認証（ログイン）ページ を見ていただきたいと思います。
ログインページは html で作成しましたが、閲覧するページは PHP で作成して認証が取れているかどうかを判断しています。
これは、セッション処理とクッキーを使用した標準的なものですが、どちらにも生のパスワードを記憶させるような無謀なことはしておりません。
プログラムを作成してみる
私が作成したプログラムの目玉（強調点）はYUIライブラリを使用していることです。
JAVAScript のWindow Open を使用したポップアップウィンドウでは、ブラウザのポップアップブロックに引っかかったり、Window が固定した大きさにできなかったり、ブラウザによってはアドレスバーが表示されたりして到底使用できないものでした。
JAVAScript のポップアップウィンドウに代わるものがないものかと探して見つけたのがYUIライブラリを使用するものです。
YUI とは、Yahoo! User Interface Library の略で、一言で言うと Yahoo!が提供するJavaScriptライブラリで、Ajaxを含めたDHTMLのテクニックを使用したアプリケーションを簡単に作成するためのユーティリティやコントロール群です。
解説しているサイトが少なくて理解が困難なのですが、具体的に解説しているサイトはレベルが高く使用例もありますので、私のようなレベルでも見よう見真似でなんとかなります。
CSS の基礎的な内容と JAVScript の基礎的な内容を理解できている人であれば、基本的な動作を行うのは造作もないと思います。
私が作成しているプログラムも、私が考えて作成したものではなく、解説サイトのプログラム例を見て少々アレンジしている程度です。
本格的に YUI を理解しようと思うなら、JAVScript に堪能でなければならないのと、英語の解説書を読む英語力が必要となります。
解説サイトが少ない分、初心者には敷居が高いかも知れません。
私も英語は得意ではありませんので、日本の解説サイトの内容を見て理解するようにしています。
その中から、主要な点をピックアップさせていただく事にします。
（１）DOCTYPE宣言を確認する
現在使われているほとんどのブラウザには、ページを表示するのに、標準モードと互換モードというものが備わっています。
同じHTMLで、同じブラウザであっても、モードが違うと、ブラウザによるHTMLの解釈方法が異なり、結果として文字の大きさや余白の取り方など、ページの表示に若干の違いが現れます。
あるページがどちらのモードで表示されるかは、そのHTMLの最初に記述されるDOCTYPE宣言というものによって決まります。
YUIライブラリを使用する際には、そのページが必ず標準モードで表示されるようにしておく必要があります。互換モードで表示されてしまうと、表示方法の違いにより、ソースは正しいのに正常な表示が出来ないなどの影響が出てくることがあるからです。
YUIライブラリを用いる場合には、次のいずれかの宣言にすることをおすすめします。
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"">
後半の"http〜"を省いた記法もありますが、それだとIE等で互換モードにされてしまうことがあります。
XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"">
この前にというXML宣言を入れる記法もありますが、それだとIE等で互換モードにされてしまうことがあります。
DOCTYPE宣言を軽く考えている人は多いのですが、YUIライブラリの使用に関わらず宣言内容によって文字の大きさなどが変わってしまうので注意が必要です。
私のの場合、php で動作させた時に動作しない場合があったのが、DOCTYPE宣言を変えたら動いたこともありました。
（２）YUIライブラリを利用する方法はいくつかあります。
YUIライブラリ（JAVAScriptファイル、CSS ファイル）は、ダウンロードして使用する場合の他にYahoo!が設置している公開サーバから読み込む方法やGoogle公開サーバからの読み込む方法があります。
特にYahoo!が設置している公開サーバから読み込む方法では、複数ライブラリの呼び出しをひとつのURLで呼び出すCombine形式が利用が可能になるメリットがあります。
通常は５個以上のJSファイルを読み込みますので、この機能は便利だと思います。（私は使用しておりません。）
プログラムを組むには解説書をじっくり読むくせをつけていないとまともなプログラマーにはなれないのですが、日本では’初心者ですので何も判りませんから具体的なコードの記載をお願いします。’の類の人（動けば良い）が多いようです。
そんな人はどうせまともなプログラマーどころか初心者レベル（幼稚園レベル）から一生抜けられないでしょうから、中の下レベル（小学校４年レベル）の私の作成したコードを記載することにします。
私も延々と基礎的な内容を解説する能力もありませんので、具体的なコードを書く方が遥かに楽です。
これを見て、くれぐれも YUIライブラリを理解できたなどとは思わないください。
ひょっとしたら、日本ではその程度の理解（基礎の欠如した断片的な理解）でも通用する場合もあるかも知れませんが、世界からは物笑いにされます。
ポップアップウィンドウを YUIライブラリ で開くには以下のような記述をします。
これは、私がログインプログラムで実際に使用しているものです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>Login</title>
<link type="text/css" rel="stylesheet" href="container.css">
<script type="text/javascript" src="./js/yahoo-min.js"></script>
<script type="text/javascript" src="./js/event-min.js" ></script>
<script type="text/javascript" src="./js/dom-min.js" ></script>
<script type="text/javascript" src="./js/dragdrop-min.js" ></script>
<script type="text/javascript" src="./js/container-min.js"></script>
</head>
<body>
<div id="dialog1">
<div class="hd"> Login</div>
<div class="bd">
<form name="frm">
<table>
<tr>
<td> Mail Address </td><td><br>
<input type="text" name="mail" value="example@example.com" style="width:234px; height:18px; padding-left:4px; font-family:inherit;"><br><br></td>
</tr>
<tr>
<td> Password </td>
<td><input type="password" name="password1" style="width:234px; height:18px; padding-left:4px; font-family:inherit;"><br></td>
</tr>
<tr>
<td> </td>
<td>
<div class="remember_me">
<input type="checkbox" name="check" checked> Remember me
<input type="button" name="login" value=" ログイン " onClick="post()">
</div>
</td>
</tr>
<tr>
<td> </td>
<td><br>
</td>
</tr>
</table>
</form>
</div>
</div>
<script type="text/javascript">
var frm = document.frm;
var dialog1 = new YAHOO.widget.Dialog("dialog1",{width:"350px",constraintoviewport:true,fixedcenter: true,visible: true});
dialog1.render();
dialog1.show();
function post() {
alert("ログインボタンが押されました。");
}
</script>
</body>
</html>
実際のプログラムには、テキストボックスに記載された内容をポストするためのプログラムも記載されていますが、ごちゃごちゃしますので省略しました。
上記のプログラムの 動作サンプル です。
初心者の方のために簡単に解説します。
<link type="text/css" rel="stylesheet" href="container.css"> <script type="text/javascript" src="./js/yahoo-min.js"></script> <script type="text/javascript" src="./js/event-min.js" ></script> <script type="text/javascript" src="./js/dom-min.js" ></script> <script type="text/javascript" src="./js/dragdrop-min.js" ></script> <script type="text/javascript" src="./js/container-min.js"></script>
上記の部分はYUIライブラリを使用するために必要なものです。
フォームの外観などは、container.css ファイルで設定します。
私の場合は、オリジナルなものに少々手を加えております。
JAVAScript ファイルはコントロールをする内容によって追加したり削除できます。
どのファイルが必要なのかは、解説書もしくは、解説サイトをご覧ください。
上記では５種類ピックアップしておりますが、私自身もこれらを全て必要としているのか詳しくは判りません。
yahoo.js と yahoo-min.js の違いが判らない超初心者のために解説しますと、yahoo.js のコードにはプログラムの使い方の説明や内容を見易くするために適切に改行コードが入っております。
一方 yahoo-min.js には、プログラムの動作に必要なコード以外は記載されておりませんし、不要な改行コードも取り除いてあります。
こうすることで、プログラムの容量は例えばyahoo.jsは14,715 バイトありますが、yahoo-min.jsは2,565バイトに縮小（圧縮）されます。
コードは短い方が読み込みも速くて便利なので yahoo-min.jsに統一すべきと考えるのですが、動作の一部を変更したいような場合は、yahoo-min.jsでは内容を理解するのが困難になります。
それで、yahoo.jsとyahoo-min.jsの両方が存在している訳です。
縮小（圧縮）したコードのファイル名に -min を加えているのは習わしで、Yahoo から提供されている圧縮処理を行うプログラム（yuicompressor）の初期設定値が -min を追加するようになっているからと考えられます。
通常ファイルの読み込みは速いので、圧縮したからと言って体感できるほどの差は感じませんから、ことさら圧縮する必要はないと思います。
読み込みの高速性を目指すなら、JAVAScript ファイルを１つにまとめてから圧縮するべきでしょう。
<div id="dialog1">以下が表示するポップアップwindowの中身です。
このようにdiv要素で設定を行います。
最後のJAVAScriptの部分で実際に表示を行っています。
このスプリクトをなぜ、head の部分に記入しないのかですが、単なる私の好みです。
解説プログラムの多くは、head間に記載しています。
私のような書き方だと一瞬ポップアップwindowが開いて画面がちらつくのではないかと考えられますが、わたしの場合は逆でした。
この程度の内容では変わりがないでしょうが、JAVAScript を別ファイルにして処理内容が多いと、ポップアップwindowがちらついて表示される場合があるようです。
尤もこれはJAVAScript の処理が遅いIEの場合で、一旦キャッシュに読み込まれた場合は、どのブラウザでもちらついて表示される事はありません。
背景を LightBOX 風に暗くしたい場合には、modal: true を追加します。
私の作成したログインプログラムで使用しておりますので、ログイン後に上部メニューの Login をクリックしてください。
背景に薄暗いフィルターがかかって、中央にログインのダイヤログが表示されると思います。
このフィルターの設定は、container.css で行っています。
初期値の設定では、薄暗さが弱いと私は感じましたので、以下のように設定を変更しています。
.mask {
z-index:0;
display:none;
position:absolute;
top:0;
left:0;
-moz-opacity: 0.7;
opacity:.70;
filter: alpha(opacity=70);
background-color:#2f2f2f;
}
透明度の設定が3種類も記入してあるのは、ブラウザによって設定が異なるからです。
現在は70％にしてありますが、好みよって透明度や background-color を変更してください。
通信用プログラム
サーバーとの通信用のプログラムは、Ajax を使用しております。
非同期に画面の遷移を行わないで通信できますので便利です。
私の場合は解説サイトのプログラムを適当にアレンジして使用させていただいたのですが、その後調べたら JavaScript++かも日記 さんのプログラムが変更歴も長く枯れたプログラムになっているようで安定しているようです。
私のプログラムもクロスブラウザ対策がどの程度なのかとかテスト段階の状態ですので、動作に問題があれば他のプログラムを試してみたいと考えております。
私のサイトはテストしている事が多くて記載内容がコロコロ変わりますので注意してください。
要は、サーバーのPHPプログラムを起動して、認証を行わせるだけですから多くの環境で安定して動くかどうかだけの問題です。
Ajax を使うだけに高度な部類に入るのかも知れませんが、詳しい解説サイトも多いですし、サンプルも多いので初心者でも何とかなると思います。
サーバー側のPHPプログラムも、送られてきたメールアドレスやパスワードを照合して内容が正しければセッション処理やクッキーへの保存を行うだけですから、特に変わった部分はありません。（基本的なサンプルプログラムは多いです）
各サイトのサンプルプログラムを若干手直しする程度でプログラムは組めると思います。
私もPHPに精通している訳ではありませんが、コードの書き方が判らなかったら解説を見るぐらいで何とか作成出来ました。（私のプログラムはソースを見ていただければ判ります）
この程度も自分で出来ないようでしたら、プログラムを組むのはあきらめるべきだと思います。