JQuery Mobile - 用户登录最佳实践

Question

我正在使用 JQuery Mobile 为现有的 Web 应用程序构建一个移动界面，该应用程序需要用户身份验证，但我无法确定实现登录过程的最佳方法。

我不太关心服务器端身份验证，而是如何在用户端实现它。

经过一番尝试，似乎有以下选项:

1. 使用 POST\redirect 提交标准表单:
   -使用data-ajax="false"禁用自动ajax
   - 用户提交，检查服务器上的凭据，然后在成功时将重定向发送到应用程序，在失败时返回到登录页面。

2. 使用 $.mobile.changePage
   的 Ajax 方法 -通过Ajax发送用户名/密码
   - 根据响应，使用 $.mobile.changePage 添加应用程序的首页或显示错误消息

3. 使用 window.location.replace
   的 Ajax 方法 -与选项2类似，不同之处在于使用window.location.replace添加应用程序首页

4. 带有 POST 的 Ajax 方法；仅在登录失败时重定向
   -保持ajax启用表单提交。
   -在服务器端，将您的用户身份验证功能与应用程序的入口页面结合起来，使其仅在设置了表单字段时才执行。
   -成功登录后，返回应用程序的首页。
   - 登录失败时，重定向回登录页面。
   - 如果没有设置表单值，则检查用户是否正确登录，然后返回标准输出页面。如果未登录，则重定向回登录。

一些注意事项:
-必须使用POST以避免将登录数据附加到URL
- 维护正确的后退按钮功能以使导航对用户友好似乎有点棘手。
-我希望通过尽可能少的页面重新加载来使流程尽可能简单

有什么想法吗？

编辑:
我找到了第四种方法，这可能是最好的方法。它避免了 POST/重定向方法导致的后退按钮功能问题。如果用户在第一次尝试时进行身份验证，则始终保持平滑的页面转换。如果没有，则登录成功后会继续保持页面跳转流程。此外，JQM 的所有内置错误处理功能仍然可用。

Answer 1

我知道这个问题已经存在一年多了，但这是我的两分钱。 我所做的是一个 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。