网站如何在不重新加载页面的情况下检查登录凭据？

Question

Some websites, such as Yahoo and Google , use Ajax to check if the username/password is wrong. Obviously there must be server side authentication because anyone can change the local JavaScript and trick it into thinking username/password is correct. I'm wondering how this is done efficiently since wouldn't the server be checking the same username/password twice? Consider the following scenario where a user logs into a web site:

1. a user comes to the log in page
2. user enters username/password and clicks submit
3. through Ajax the server communicates with the client if the username/password entered are correct
4. Server replies saying whether the username/password is correct - in this example it is
5. The <form> is submitted and an intermittent page takes the inputted values through POST and processes them again on the server side to verify if the username/password is correct and if it is sets a variable in the session

In step 5 the server checks for the second time if the same username/password is correct as in step 3. Is there a way to cache the result from step 3 or make the process more efficient? Also the server has already been sent the username/password in step 3. but I'm not sure if that could accelerate the process.

I'm using a MySQL database to store user names and passwords.

Answer 1

At step 3 your onsubmit handler will send your AJAX request to the server to validate credentials and prevent the normal form submission (by calling .preventDefault() in the handler or returning false from the handler), so step 5 will never happen. If javascript is disabled then you won't have an onsubmit handler and the normal form submission will take place instead.

In your step 4, if you receive a "correct" response then your AJAX handler can redirect to a new page; if it's an "incorrect" response you'd stay on the login page, clear the form, and put up your error message.

Answer 2

At point 3, the JS should be submitting your form to server side processing and waiting for a response. If JS is disabled then the form would just submit normally.

Answer 3

As my comment says, not sure i completely agree with your process there, this is how i would picture it

1. a user comes to the log in page
2. user enters username/password and clicks submit
3. Jquery triggers the onclick action, grabbing the user input, sends an ajax request to php, php sanitizes and queries to see if the credentials are found.
4. If they are php sets session and cookie and returns the ajax result.
5. If the credentials are not correct, the php handles that issue as well.

OR if you didnt want to use ajax

1. a user comes to the log in page
2. user enters username/password and clicks submit
3. the form routes to a php page the querys the database for user credentials, if they are correct, set session and cookie and redirect to correctLogin.php
4. if not redirect to incorrectLogin.php