Простая форма входа с помощью jquery

Форма входа обычно используется для предотвращения несанкционированного доступа пользователей к информации или действиям, которые должны быть доступны/разрешены только определенным людям. Таким образом, для того, чтобы форма входа в систему выполняла свою работу должным образом, она должна быть безопасной (по крайней мере, насколько это возможно). Если форма входа в систему не является безопасной, это может создать иллюзию защиты ваших данных, но опытные люди смогут обойти ее без вашего ведома... и это плохо!

Теперь, это проблема, которую я вижу с a jQuery только форма входа. Тот факт, что у вас есть пароль в виде простого текста в коде Вашей страницы, это просто плохо! Его очень легко обойти! Каждый, кто посмотрит код вашей страницы, будет знать пароль администратора. Даже если вы используете хорошие хэш-алгоритмы (такие как SHA-2), чтобы "скрыть" пароль, это будет почти так же плохо, так как это даст возможному злоумышленнику хорошую подсказку, с чего начать, чтобы угадать ваш пароль (используя радужные таблицы или грубую силу).

Итак, мой рекомендуется использовать серверное приложение вместе со скриптом jQuery, который может быть вызван через jQuery для проверки пароля, а затем разрешить пользователю войти. Это еще не самое лучшее решение (было бы намного лучше отправить пароль на https-соединение), но это все еще улучшение!

Ваш код, чтобы сделать это, должен быть примерно таким:

    $(document).ready(function(){
    // on click Sign In Button checks with the remote server that username =='admin' and password == 'password'
        $("#login").click(function(){
            $.ajax({
                url: 'http://www.mywebsite.com/checklogin?user='+encodeURIComponent($("#loginusername").val())+'&pass='+encodeURIComponent($("#loginpassword").val()),
                success:function(data){
                    if(data == "OK")
                    {
                        $("#first").hide();
                        $("#second").append("<p>Hello, admin</p> <br/><input type='button' id='logout' value='Log Out' />");
                    }
                    else
                    {
                        alert("Please try again");
                    }
                }
            });
        });

        $("#logout").click(function() {
            $("form")[0].reset();
            $("#first").show();
            $("#second").hide();
        });
    });

Вы также можете изменить код, чтобы сделать его отправить запрос через post метод (который немного лучше). На стороне сервера можно было бы просто запустить простой скрипт, который получает два параметра get (user и pass), проверяет, соответствуют ли они ожидаемым значениям ("admin" и "password") и выводит на экран OK в случае успеха или KO в противном случае. Для простого старта вы можете сделать PHP-приложение, которое делает это, например, следующее (Это очень простое и улучшаемое, но это хорошая отправная точка):

<?php

$user = (array_key_exists("user",$_GET))?$_GET["user"]:""; //Checks if the user parameter has been passed through the get method, if not, sets the $user variable to an empty string
$pass = (array_key_exists("pass",$_GET))?$_GET["pass"]:""; //Checks if the pass parameter has been passed through the get method, if not, sets the $pass variable to an empty string

if($user == "user" and $pass == "pass")
    echo "OK";
else
    echo "KO";