我想要做的是有一个检查登录信息的表单,然后,如果信息不正确,它会将我重定向回登录表单所在的页面,但显示 ap 元素,上面写着“错误的用户名/密码”。
有什么办法可以做到这一点吗?或者有什么方法可以只使用 jQuery/ajax 进行登录检查?在过去的几个小时里,我一直在尝试解决这个问题,但我就是做错了。请记住,我是网络编程领域的新手,所以如果我的问题有一个明显的答案,请不要太苛刻。
我想要做的是有一个检查登录信息的表单,然后,如果信息不正确,它会将我重定向回登录表单所在的页面,但显示 ap 元素,上面写着“错误的用户名/密码”。
有什么办法可以做到这一点吗?或者有什么方法可以只使用 jQuery/ajax 进行登录检查?在过去的几个小时里,我一直在尝试解决这个问题,但我就是做错了。请记住,我是网络编程领域的新手,所以如果我的问题有一个明显的答案,请不要太苛刻。
凭据应存储在您的服务器上。
使用 ajax,在表单提交时:
从您的服务器返回 401 Unauthorized 响应代码(请参见此处:http ://en.wikipedia.org/wiki/List_of_HTTP_status_codes#4xx_Client_Error )
您可以使用 PHP 标头指令返回代码:http: //php.net/manual/en/function.header.php
在您的 javascript 函数中,添加错误回调并根据需要更新 DOM。
除了 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,你应该强烈考虑登录公共站点
'dataType':'json'
3)如果你想以 JSON 格式返回数据,你必须添加到 AJAX 调用(我忘记了)。
4) 通过评估 AJAX 响应,您可以在 .login-errors DIV 中显示相应的错误消息。这只是一个简单的例子。
最后,如果您在公共站点上执行此操作,请阅读有关存储/访问登录凭据的一些安全最佳实践。如果这超出了您的要求,请考虑通过 .htpasswd 阅读访问控制
同样,这是一个非常简单的实现,我不会使用这样的东西,但希望它能让你开始。
编辑:为清楚起见,返回的“错误”消息是因为调用了“错误”函数,因为 AJAX 无法在小提琴上工作。实际上,您可能希望将错误消息编码到“成功”函数中,这与乍一看似乎违反直觉一样。
是的,您可以使用 ajax 发布到登录表单。我假设您已经有一些表单元素,只需要发布到登录页面。您可以像这样创建发布请求:
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
所以这里有几件事你需要:
这只是一个快速的答案,如果您需要任何详细信息,请发表评论。