JQuery Mobile - Лучшая практика входа в систему - PullRequest
10 голосов
/ 11 февраля 2012

Я создаю мобильный интерфейс с JQuery Mobile для уже существующего веб-приложения, которое требует аутентификации пользователя, и я не могу выбрать лучший подход для реализации процесса входа в систему.

Меня больше не беспокоит аутентификация на стороне сервера, а скорее вопрос о том, как реализовать ее на стороне пользователя.

После некоторых экспериментов кажется, что варианты:

  1. Стандартная форма отправки с POST \ redirect:
    -Отключение автоматического AJAX с data-ajax="false"
    -Пользователь отправляет, проверяет учетные данные на сервере, затем отправляет перенаправление в приложение в случае успеха или обратно для входа в системустраница о неудаче.

  2. Ajax-метод с $.mobile.changePage
    -Отправить имя пользователя / пароль через Ajax
    -На основании ответа либо добавить первую страницу приложения с помощью $.mobile.changePage, либо отобразить сообщение об ошибке

  3. Ajax-метод с window.location.replace
    - аналогично варианту 2, за исключением использования window.location.replace для добавления первой страницы приложения

  4. Ajax метод с POST;перенаправление только при неудачном входе в систему
    -Отключите поддержку ajax для отправки форм.
    -На стороне сервера объедините функцию аутентификации пользователя со страницей входа вашего приложения таким образом, чтобы она выполнялась только в том случае, если поля формыset.
    -При успешном входе в систему верните первую страницу приложения.
    -При неудачном входе в систему вернитесь обратно на страницу входа.
    -Если значения формы не заданы, проверьте, правильно ли настроен пользователь.войдите в систему и затем верните стандартную страницу вывода.Если вы не вошли в систему, перенаправьте обратно, чтобы войти.

Некоторые соображения:
-Он должен использовать POST, чтобы не прикреплять данные для входа в систему к URL-адресу
-Отключить правильную функциональность кнопки "Назад", чтобы навигация была удобной для пользователя, кажется, что-то вродехитрый.
-Я хотел бы сделать процесс как можно более легким с минимальным количеством перезагрузок страницы

Есть идеи?

РЕДАКТИРОВАТЬ:
Я нашел 4-й метод, который может быть лучшим подходом.Это позволяет избежать проблем с функциональностью кнопки «Назад», возникающих из-за метода POST / redirect.Если пользователь аутентифицируется с первой попытки, плавный переход страницы сохраняется все время.Если нет, поток перехода на страницу будет постоянно поддерживаться после успешного входа в систему.Кроме того, все встроенные функции обработки ошибок JQM остаются доступными.

Ответы [ 2 ]

9 голосов
/ 14 марта 2012

Я знаю, что этому вопросу больше года, но вот мои два цента.То, что я сделал, - это форма JQuery Mobile, которая выглядит следующим образом:

<form method="PUT" action="api/auth" data-ajax="false">
    <label for="login_username">Username:</label><br>
    <input type="text" name="login_username" id="login_username" /><br>
    <label for="login_password">Password:</label><br>
    <input type="password" name="login_password" id="login_password" /><br>
    <button id="login_submit" type="submit" data-theme="a">Submit</button>
</form>

Затем функция для перехвата нажатия кнопки «Отправить»:

$(document).ready(function() {
    $("#login_submit").click(function(event) {
        event.preventDefault();
        var credentials = { type: 'EMAIL', username: $('#login_username').val(), password: $('#login_password').val() };
        $.ajax({
            type: "PUT",
            url: "api/auth",
            cache: false,
            data: JSON.stringify(credentials),
            contentType: "application/json; charset=utf-8",
            success: function(data) {
                //validate the response here, set variables... whatever needed
                    //and if credentials are valid, forward to the next page
                $.mobile.changePage($('#main_menu'));
                    //or show an error message
            },
            error: function() { // server couldn't be reached or other error }
        });
    });
});

Конечно, это должно идти по HTTPS.В моем случае я проверяю с помощью службы REST на стороне сервера.Например, вы можете вернуть 403, если учетные данные неверны.Затем вы перенаправляете с помощью $ .mobile.changePage () на страницу в том же DOM или на другой URL.

4 голосов
/ 11 февраля 2012

В основном это в соответствии с необходимостью.

Стандартная отправка формы (пункт 1) - очень понятный способ, но если вход в систему не удалось , необходимо перезагрузить страницу, чтобы выполнить несколько запросов (один для проверки входа, другой для загрузки страницы ), а также, необходимо заполнить задние входные данные.

Некоторые преимущества для AJAX r-

  • Если соединение закрыто или произошел сбой в сети, мы можем показать правильную ошибку, сохранив дизайн страницы без изменений. В случае стандартной отправки - будет отображаться ошибка соединения - в какой момент пользователю может потребоваться перезапустить мобильное приложение.

  • В будущем, если мы заставим пользователя войти в систему для просмотра содержимого страницы, AJAX может просто быстро выполнить этот трюк. Таким образом, мы можем поместить это поле для входа везде и войти в систему пользователя без прерывания текущего состояния.

...