JavaScriptを使ったログイン機能の実装方法

このQ&Aのポイント
  • JavaScriptを使用してログイン機能を実装する方法を解説します。
  • パスワードがソースコードから分かることを防ぐための対策についても説明します。
  • ユーザ名が「1234」でパスワードが「345」の場合にログインの成功または失敗を判定します。
回答を見る
  • ベストアンサー

javasuriptについて 主にログイン

パスワードについて さきほどの質問の内容を変えて質問させていただきます 正しいユーザ名とパスワードを入力して(入力した文字がそのまま表示されないようにして両方ともただしければ「ログインに成功しました」どちらかでも間違っていたら「ログインに失敗しました」というjavascritptを作りたいのですがパスワードをソースの中に書いてしまったらブラウザのソースのらんで分かってしまうので分からないようにしたいです 一応いろいろなものを参考にして途中まで作ったのですがこの先がどうしても作れません どなたかソースなどご教授ください お遊び程度なので本格的なものでなくて結構です ユーザ名は1234 パスワードは345にしたいです どなたかご教授ください 実行できるようにお願いします //--></script> </head> <form action="login.jsp" method="post" NAME="f1"> <table border="1" width="30%"> <tr> <td>ユーザーID:</td> <td><input type="text" name="admin" size="25" value=""></td> </tr> <tr> <td>パスワード:</td> <td><input type="password" name="password" value=""></td> </tr> </table> function password_check(){ var pw; pw = document.getElementById('EnterPassWord').value; if(pw != password){ alert("ログインに失敗しました"); }else{ alert("ログインに成功しました"); //location.href=pw + ".html"; } <input type="submit" value="ログイン" onClick="Submit('name','password','f1');"> </form> </body> </html>

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

http://www.onicos.com/staff/iz/amuse/javascript/expert/ ここの md5.js をりようし、 alert(MD5_hexhash ('345')); これでひょうじされた、ふっかつのじゅもんらしきものを、おぼえておく。 にゅうりょくされた、ぱすわ~どから、おなじように、ふっかつのじゅもんをつくり、くらべる。 どうだろうか?

関連するQ&A

  • スタイルシートのみで表の作成

    よくある、「サービスにログインするときのパスワード、ID入力画面」というものを作ってます。 パスワード、テキストフィールド ID、テキストフィールド ログインボタン のような。 たとえば簡単にテーブルで組みますと、 <table width="400" border="0" cellspacing="0" cellpadding="2"> <tr> <td width="100">パスワード</td> <td><label> <input type="text" name="textfield" /> </label></td> </tr> <tr> <td>ID</td> <td><input type="text" name="textfield2" /></td> </tr> <tr> <td colspan="2" align="center"><label> <input type="submit" name="Submit" value="ログイン" /> </label></td> </tr> </table> 似たり寄ったりこんな感じだとします。 これと同等のものを、スタイルシートだけで作成できますか? たとえば、ソースは、 <dl id="LOGIN-FORM"> <dt class="loginFormLabel" id="USER-NAME-LABEL"> <label for="USER-NAME">ユーザ名</label> <input type="text" name="username" size="24" value="" id="USER-NAME" class="inputText" /> </dt> <dt class="loginFormLabel" id="USER-PASSWORD-LABEL"> <label for="USER-PASSWORD">パスワード</label> <input type="password" name="password" size="24" value="" onmousedown="" onkeydown="if (event.keyCode == 13) {enter.click();return false;}" id="USER-PASSWORD" class="inputText" /> </dt> <dt class="loginFormLabel" id="USER-INFO-SUBMIT-LABEL"> <label for="USER-INFO-SUBMIT">アクション</label> </dt> <dd class="loginFormText" id="USER-INFO-SUBMIT-TEXT"> <input type="submit" value="ログイン" id="USER-INFO-SUBMIT" class="submit" /> </dd> </dl> です。 テキストフィールドの頭をそろえたり、ログインボタンの位置を 変えたりしたいです。 テーブルでやればいいのに・・・と思いますが、 スタイルシートで頼むといわれて、困ってます。 教えてください。

  • javascriptでログインページの作成

    JSPを作成しているのですが、javascirpt構文の方が 多いため、こちらで質問をさせて頂きます。 javascript, html で ログインページを作成しています。 <%@ page contentType="text/html;charset=Shift_JIS" %> <script type="text/javascript" language="javascript"><!--     function Submit(name,pass,f){  if(name == null){ document.getElementBy(f).action="http://www.yahoo.co.jp"; document.getElementById(f).submit(); }else{ document.getElementById(f).action="http://www.google.co.jp"; document.getElementById(f).submit(); } } //--></script> <form action="login.jsp" method="post" NAME="f1"> <table border="1" width="30%"> <tr> <td>ユーザーID:</td> <td><input type="text" name="admin" size="25" value=""></td> </tr> <tr> <td>パスワード:</td> <td><input type="password" password="password" value=""></td> </tr> </table> <%--- これが悪いのかも!? --- %> <% String name = request.getParameter("name"); String password= request.getParameter("password"); %> <input type="submit" value="ログイン" onClick="Submit('name','password','f1');"> </form> </body> </html> ログインボタンをクリックして、name,password,f1(formの名前)を function のSubmitに値を渡したいのですが、nullが渡されてしまいます。 テキストボックスで入力された値を渡したいのですが、 javascript,htmlの知識が乏しいため、どこがおかしいのかわかりません。 もしわかる方が居ましたら、よろしくお願いたします。

  • POST GET HTTP 404 未検出

    POSTメソッドとGETメソッドの混在したFORMで404エラーとなります。 具体的には、次のようなFORMを考えています。 <form action="login.php?hoge=hogehoge" method="POST"> <table border="0"> <tr><td>ユーザ名</td><td><input type="text" name="name"></td></tr> <tr><td>パスワード</td><td><input type="password" name="pass"></td></tr> <tr><td colspan="2"><input type="submit" value="ログイン"></td></tr> </table> </form> Windows XPではうまく機能するのですが、 Vineではうまくいきません。「HTTP 404 未検出」となります。 どうしたらいいのかさっぱり分からない状態です。 エラーの原因を教えていただければと思います。 詳しい環境: OS:Vine PHP:5.2.8 Apache:2.0

    • 締切済み
    • PHP
  • history.backの前に値をクリアしたい

    以下のようなソースを作りました。 reccheck.phpで、チェックしてエラーだと、ここに戻ってエラー表示をするのですが、その後に「戻る」を押しても、同じエラーにかかって、画面が移りません。 ここで使っているerr_swの値をクリアすることはできないでしょうか? <?php $err_sw = $_POST['errsw']; ?> <html><head> <SCRIPT language="JavaScript"> <!-- function msg(sw){ if(sw==3){ alert("エラー"); return false; } return true; } function Check(){ if(document.check.frec.value=="on"){ if(document.check.USER_ID.value==""){ alert("IDを入力"); return false; } if(document.check.USER_PS.value==""){ alert("PW入力"); return false; } return true; } return true; } function Back(){ window.document.check.USER_ID.value = ""; window.history.back(); } // --> </SCRIPT> </head> <body onload="msg(<?echo $err_sw?>)"> <form name="check" action="reccheck.php" method="POST" onSubmit="return Check()"> <input type="hidden" name="OK_URL" value="ok.php"> <input type="hidden" name="ER_URL" value="test.php"> <table><tr> <td>ユーザID</td> <td><input type="text" name="USER_ID" size="8"></td> </tr><tr> <td>パスワード</td> <td><input type="text" name="USER_PS" size="8"></td> </tr></table> <table><tr> <td><input type="button" value="戻る" class="font12" onclick="return Back()"> </td><td> <input type="submit" value="送信" class="font12">

  • フォームの構成部品(入力欄・ボタン等)を作成する<INPUT>タグについて

    type属性である、「type="text"」と「type="password"」があります。この2つを段落(改行して)を入れて、横幅を同じにしたいのですが、OSによって幅が異なってしまいます。Windows2000では、デフォルト(size=20)値で、横幅は綺麗に揃ってくれるのですが、WindowsXPでは横幅が一致しません。何故ですか。また、解消方法はありますか。 参考ソース: <TR> <TD>ユーザーID:</TD><TD><INPUT TYPE="text" NAME="id" value=""></TD> </TR> <TR> <TD>パスワード:</TD><TD><INPUT TYPE="password" NAME="pass" value=""></TD> </TR>

    • ベストアンサー
    • HTML
  • 配列の使い方

    JavaScript 初心者です。 下記ソースでinput type="text"でname="kazu1,name="kazu2"のように2個限定で使っているのですが将来的にDBから読んだ数分に変わる予定です。 その場合 eval(document.myForm.kazu1.value)+ の表現はどのように変えたらいいでしょうか。 配列の数はi7で持ってきています。 <script language="JavaScript"><!-- function ttlValue(i7){ goukei = eval(document.myForm.kazu1.value)+eval(document.myForm.kazu2.value); alert("sum "+goukei+"です"); } // --></script> </head> <table border=1> <tr> <td width="40%" ><input type="text" name="kazu1" value="10">%</td> <td width="40%" ><input type="text" name="kazu2" value="10">%</td> </tr> <tr> <td><input type="submit" name="button" value="keisan" onClick="ttlValue(2)" ></td> <td></td> </tr> </table> </form>

  • tableタグとformタグの組み合わせ

    tableタグとformタグの組み合わせでどのように記述すれば、構文上正しいのでしょうか? 私は下のパターンで書いておりますが、間違いでしたら早めに改めたいので お聞きしました。 <table> <form> <input type="hidden" name="a" value="1"> <tr> <td> <input type="text" name="b" value=""> </td> </tr> <tr> <td> <input type="submit" value="OK" value=""> </td> </tr> </fomr> </table>

    • ベストアンサー
    • HTML
  • formのtextフィールドが認識されない

    下記のようなフォームに対し、JavaScriptで処理を行おうとしています。 <form name="dateForm" method="post" action=""> <table> <tr><td>0</td> <td><input type='text' name='date[]' maxlength='8' size=12 value='20111001'></td> <td><input type='text' name='date2[]' maxlength='8' size=12 value=''></td></tr> <tr><td>1</td> <td><input type='text' name='date[]' maxlength='8' size=12 value='20111002'></td> <td><input type='text' name='date2[]' maxlength='8' size=12 value=''></td></tr> <tr><td>2</td> <td><input type='text' name='date[]' maxlength='8' size=12 value='20111003'></td> <td><input type='text' name='date2[]' maxlength='8' size=12 value=''></td></tr> </table> <input type='text' name='date_0' maxlength='8' size=12 value='20111000'><br><br> <input type="submit" name="button" value="Check" onClick="send_self();"> <input type="submit" name="button" value="Enter" onClick="set_action();"> </form> Checkボタン押下で上記の関数を呼び出し、テキストフィールドdate[0]の値を表示すると、(1)では「20111001」と正しい値が表示されますが、(2)では下記のエラーが出てしまいます。 「プロパティ '0' の値を取得できません: オブジェクトは Null または未定義です。」 また、 alert(document.dateForm.elements[0]); // … (3) alert(document.dateForm.date); // … (4) とすると、(3)では[object]、(4)では[undefined]と表示されます。 alert(document.dateForm.date_0.value); はvalueも正しく表示されobjectとしても正しく認識されるので、配列へのアクセスに問題があるように思うのですが…。 問題点と解決法をご存知の方がいらっしゃいましたら、どうぞよろしくお願い致します。m(_ _;)m

  • ボタンクリックでフォーカス移動

    JavaScript超ビギナーなので方法がよくわかりません。 フォームにテキストボックス(配列)4個あり ボタンを押すたびに未記入のテキストボックスにカーソルを移動したいのですが。どのようにしたらいいでしょうか。 <form name="form1" method="post"> <table width="200" border="1"> <tr><td ><input type="submit" name="Submit" value="送信"></td></tr> <tr><td ><input type="text" name="name1"></td></tr> <tr><td><input type="text" name="name1"></td></tr> <tr><td><input type="text" name="name1"></td></tr> <tr><td><input type="text" name="name1"></td></tr> </table> </form>

  • input type ボタン

    お世話になります。 inputtype ログインボタン・検索ボタンの事で、お尋ねいたします。 あちらこちらのサイトを参考にログインと検索ができるプログラムを 真似て作成いたしています。初めての事で内容も半分ぐらいしか理解出来ていないままのスタートです。 参考サイトのhtml部分・CSSソースを作りかけの自分のサイトに記載しますとログインボタンと検索ボタンのレイアウトが崩れて 表示されません。 何が原因なのか不明のままです!! お手数かけますが、ご指導お願い申しあげます。 下記に簡単にinputの部分だけソースを書きますので宜しくお願い いたします。 また別ページ(新規に)html<body>~<body>間に同じソースを 書きますと検索ボタンもログインボタンもきちっと表示されます。 中身のプログラムソースに入る前にレイアウトを先に手掛けたのですが 意気消沈しています。 他のCSSとかjavascriptかのソースと競合するのでしょうか? 解らない事ばかりです。 奇麗に表示ができれば幸いです。 宜しくお願い申し上げます。 googleサーチのinputです。 <div class="entry_search"> <form method="get" action="http://www.google.co.jp/search" target="_parent"> <table width="166" border="0" bgcolor="#ffffff"> <tbody> <tr> <td width="160" height="32" align="left" valign="top" nowrap="nowrap"><a href="http://www.google.co.jp" target="_blank"> <img src="imges/common/poweredby_google.gif" alt="Google" border="0" /></a> <br /> <input type="text"name="q" size="17" maxlength="255" value="" /> <input type=hidden name=ie value=Shift_JIS /> <input type=hidden name=oe value=Shift_JIS /> <input type="hidden" name="hl" value="ja" /> <input type="hidden" name="domains" value="#" /> <input type="submit" name="btnG" value="検索" /></td> </tr> <tr> <td nowrap="nowrap"><table> <tbody> <tr> <td ><input type="radio" name="sitesearch" value=" " /> <font color="#000000" size="-1">Web</font></td> <td><input type="radio" name="sitesearch" value="#" checked="checked" /> <font color="#000000" size="-2">サイト内</font></td> </tr> </tbody> </table> <input name="client" value="pub-5778690733142083" type="hidden" /> <input type=hidden name=ie value=Shift_JIS /> <input type=hidden name=oe value=Shift_JIS /> <input type=hidden name=hl value="ja" /> <input name="cof" value="GALT:GALT:#008000;GL:1;DIV:#336699;VLC:663399;AH:center;BGC:ffffff;LBGC:336699;ALC:0000FF;LC:0000FF;T:000000;GFNT:0000FF;GIMP:0000FF;FORID:1;" type="hidden" /> <input type="hidden" name="hl" value="ja" /></td> </tr> </tbody> </table> </form> こちらがログオンの一部です。 <div class="AA_approach_b"> <h4 class="AA_blockHead AA_loginHead">ログイン</h4> <form name="login" action="#" method="post"><input name="action" value="login" type="hidden"> <input name="#" value="4b96bbf140d2a3cb9821cc2cba76395e21feb0f5b9ab041b561f0a03fc15ef2a" type="hidden"><table class="bestfood_loginTable"> <tbody><tr> <th class="CC_th">E-mail</th> <td class="CC_td"><input name="loginEmailAddress" value="" type="text"></td> </tr> <tr> <th class="CC_th">password</th> <td class="CC_td"><input name="loginPassword" value="" type="password"></td> </tr> <tr> <td colspan="2" button type="class="CC_submit" value="submit"> <input value="ログイン" type="submit"> </button> </td> </tr> </tbody></table> <div class="AA_annotation"><a href="#">パスワードをお忘れの方</a></div> <input name="referer" value="block" type="hidden"> </form> 上記の他にCSSと手元にCGIソースがあります。 お手数ですが宜しくお願い申し上げます。 初めての事ですので表現や考えに間違いありますればご容赦を....!!