1

What I want to do is have a form that checks login information, and then, if the information is not right, it would redirect me back to the page where the login form was, but showing a p element that says something like "wrong username/password".

Is there any way I can do this? Or is there any way I can do the login check using only jQuery/ajax? I have been trying to solve this for the past few hours, but I just could not get it right. Please bear in mind that I am a newbie in the field of web programming so don't be too harsh if there is an obvious answer to my question.

4

4 に答える 4

0

はい、ajax を使用してログイン フォームに POST できます。すでにいくつかのフォーム要素があり、ログイン ページに投稿するだけでよいと仮定します。次のような投稿リクエストを作成できます。

xhttp=new XMLHttpRequest(); //make a request

xhttp.onreadystatechange=function() { //The request is asynchronous, this function will be executed once it completes
  if (xhttp.readyState==4 && xhttp.status==200) {
    if (xhttp.responseText==0) { //or whatever else your "error" is
      document.getElementById("errorDisplayDiv").innerHTML = "Login failed!"; //show a login error text
    }
    else if (xhttp.responseText==1) { //login page reported a success
      document.location = "usercontent.php"; //redirect to a page for logged in users
    }
  }
}

xhttp.open("POST","login.php",true); //post to your login page
xhttp.send(); //send it

したがって、ここで必要なものがいくつかあります。

  • login.php に投稿されるログイン ページのユーザー名とパスワードのフォーム
  • ユーザー名とパスワードを検証し、クライアントがログインしていることを記録する login.php (または ASP など)
  • ユーザーがログインしていることを確認し、適切なコンテンツを表示するか、ログインしていない場合はログイン ページにリダイレクトする usercontent.php ページ。

これは簡単な回答でした。詳細が必要な場合はコメントしてください。

于 2013-06-15T22:14:48.690 に答える
0

dm03514 が言ったことに加えて、クライアント側でユーザーを承認しようとしないでください。誰でもソースを表示して資格情報を把握できます。これは、jQuery を使用した非常に単純な AJAX 実装です: http://jsfiddle.net/UTCbM/

「url」(check_username.php) には、ユーザー名とパスワードを処理するためのロジックが含まれている必要があります。これは、データベースを介して行うことも、次のような単純なものにすることもできます (ただし、推奨されません)。

<?php
$users = array(
    'user1' => 'password1',
    'user2' => 'password2'
);

if ($users[$_POST['username']] == $_POST['password']) {
    die(json_encode('login_success.php'));
}
die(json_encode(False));
?>

注意事項:

1) パスワードを平文で保存しないでください。PHP を使用している場合は、Bcrypt をチェックしてください: http://phpmaster.com/why-you-should-use-bcrypt-to-hash-stored-passwords/ 少なくとも、パスワードをハッシュしてソルトします。

2) この jsfiddle は SSL を実行しないため、公開サイトへのログインには SSL を強く考慮する必要があります。

'dataType':'json'3） JSONとしてデータを返したい場合は、AJAX呼び出しに追加する必要があります（フィドルを忘れました）。

4) AJAX 応答を評価することにより、適切なエラー メッセージを .login-errors DIV に表示できます。これは簡単な例です。

最後に、公開サイトでこれを行っている場合は、ログイン資格情報の保存/アクセスに関するセキュリティのベスト プラクティスを読んでください。これがあなたが探しているものを超えている場合は、.htpasswd によるアクセス制御について読むことを検討してください。

繰り返しますが、これは非常に単純な実装です。私はこのようなものを実際に使用するつもりはありませんが、うまくいけば、開始するのに役立ちます。

編集：明確にするために、返される「エラー」メッセージは、AJAXがフィドルで機能しないため、「エラー」関数が呼び出されたためです。最初は直観に反するように思えるかもしれませんが、実際にはエラー メッセージを「success」関数にコーディングする必要があります。

于 2013-06-15T22:23:15.230 に答える