JQuery Mobile - Лучшая практика для пользователей

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

Я не очень беспокоюсь об аутентификации на стороне сервера, а о том, как реализовать его на стороне пользователя.

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

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

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

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

  • Метод Ajax с POST; перенаправлять только при неудавшемся входе в систему

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

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

Любые идеи?

EDIT:
Я нашел 4-й метод, который может быть лучшим подходом. Это позволяет избежать проблем с функциональными возможностями кнопки обратной связи, возникающих в результате метода POST/перенаправления. Если пользователь выполняет аутентификацию с первой попытки, плавный переход на страницу сохраняется в течение всего времени. Если нет, поток перехода страницы будет постоянно поддерживаться после успешного входа в систему. Кроме того, все функции JQM, встроенные в функции обработки ошибок, остаются доступными.

ОТВЕТЫ

Ответ 1

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

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

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

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

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

Ответ 2

Я знаю, что этот вопрос больше года, но вот мои два цента. Что я сделал, это форма 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-адресу.