inloggen met ajax
Laat het eerst werken zonder Javascript, en vervolgens met. Met Javascript, bijvoorbeeld jQuery, gaat het zo:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
$('#formulier').submit(function(){
var url = $(this).attr('action');
var data = $(this).serialize() + '&methode=javascript';
$.post(url, data, function(respons){
if(respons == 'gelukt') alert('Ingelogd!');
});
});
var url = $(this).attr('action');
var data = $(this).serialize() + '&methode=javascript';
$.post(url, data, function(respons){
if(respons == 'gelukt') alert('Ingelogd!');
});
});
En met PHP kijk je of $_POST['methode'] == 'javascript'.
ik zag namelijk allerlei scripts die met allerlei javascript encrypties werkte..
en stel dat javascript af staat in de browser werkt het "normaal"
voor zover ik weet is dat even veilig als "normaal"
is dit veilig in AJAX?
want ik weet dat bij een login (in normale omstandigheden) een GET method wordt vermeden. (veiligheidsredenen)
en wat een toeval :D
ik ben ook bezig met een login formulier in AJAX :D
maar ik weet niet echt specifiek wat ik moet doen :S
(mijn topic: http://www.phphulp.nl/forum/showtopic.php?cat=5&id=70315&lasttopic=1)
ik heb juist het probleem dat ik niet goed weet hoe ik de gegevens moet in mijn url stoppen, want het is een beetje moeilijk met te weinig aanhalingstekens :S
maar ik heb het gevoel dat ik het bijna heb (:
mvg kasper
Het is gelukt. Ik heb het zo opgelost:
javascript:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
var layerId;
var postValues = new Array();
function loadPost(postName, postLayer){
postValues[postName] = document.getElementById(postLayer).value;
}
function postAjaxAction(_layerId, _url){
layerId = _layerId;
var _parameters = "";
for (var x in postValues){
var value = postValues[x];
_parameters += x + "=" + value + "&";
}
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null){
alert ("Browser does not support HTTP Request");
return;
}
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("POST",_url,true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", _parameters.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.send(_parameters);
}
var xmlhttp;
function GetXmlHttpObject(){
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject){
// code for IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}
function stateChanged(){
if (xmlhttp.readyState==3){
document.getElementById("ajaxProgress").style.display = 'block';
}else{
document.getElementById("ajaxProgress").style.display = 'none';
}
if (xmlhttp.readyState==4){
document.getElementById(layerId).innerHTML = (xmlhttp.responseText);
//document.getElementById("error");
}
}
var postValues = new Array();
function loadPost(postName, postLayer){
postValues[postName] = document.getElementById(postLayer).value;
}
function postAjaxAction(_layerId, _url){
layerId = _layerId;
var _parameters = "";
for (var x in postValues){
var value = postValues[x];
_parameters += x + "=" + value + "&";
}
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null){
alert ("Browser does not support HTTP Request");
return;
}
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("POST",_url,true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", _parameters.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.send(_parameters);
}
var xmlhttp;
function GetXmlHttpObject(){
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject){
// code for IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}
function stateChanged(){
if (xmlhttp.readyState==3){
document.getElementById("ajaxProgress").style.display = 'block';
}else{
document.getElementById("ajaxProgress").style.display = 'none';
}
if (xmlhttp.readyState==4){
document.getElementById(layerId).innerHTML = (xmlhttp.responseText);
//document.getElementById("error");
}
}
mijn login-form:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<table>
<tr>
<td>Gebruikersnaam</td>
<td><input type="text" value="" name="username" id="username" /></td>
</tr>
<tr>
<td>Paswoord</td>
<td><input type="password" value="" name="password" id="password" /></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" id="submit" value="<?php echo $_submitText; ?>" name="submit" onclick="loadPost('submit','submit'); loadPost('password','password'); loadPost('username','username'); postAjaxAction('content','applications/login.php');" /></td>
</tr>
</table>
<tr>
<td>Gebruikersnaam</td>
<td><input type="text" value="" name="username" id="username" /></td>
</tr>
<tr>
<td>Paswoord</td>
<td><input type="password" value="" name="password" id="password" /></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" id="submit" value="<?php echo $_submitText; ?>" name="submit" onclick="loadPost('submit','submit'); loadPost('password','password'); loadPost('username','username'); postAjaxAction('content','applications/login.php');" /></td>
</tr>
</table>
Bij mij is het mooi gelukt :) en ik ben er blij mee.
Er staan her en der wel een paar foutjes in :s Ik weet niet in hoeverre dit problemen kan opleveren. Dus als iemand hier opmerkingen over heeft, gelieve mij dit te melden.
mvg kasper
Niet wenselijk.
Die 'encrypties' van jou iswaarschijnlijk md5 (vBulletin gebruikt dit bv).
Deze werkt als volgt: het slaat de wachtwoorden md5-hashed op in de database.
Voor het verzenden maakt javascript al een hash van het wachtwoord.
Dat is beter als plaintext over het internet versturen, maar je hebt md5 databases.
Beter is dus md5-hashen, en het beste is HTTPS.
Er wordt enkel gebruik gemaakt van een POST..
En iedereen weet waarschijnlijk ook wel dat een GET method afgeraden wordt.
mvg kasper