Question

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

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

经过一些实验，似乎选项是：

使用POST \ redirect提交标准表单：
-Disable自动ajax与data-ajax="false"
- 用户提交，检查服务器上的凭据，然后在成功时发送重定向到应用程序或在失败时返回登录页面。
使用$.mobile.changePage的Ajax方法 - 通过Ajax发送用户名/密码

- 根据回复，添加应用程序的首页$.mobile.changePage或显示错误消息
使用window.location.replace的Ajax方法 - 与选项2类似，但使用window.location.replace添加应用程序的首页
使用POST的Ajax方法;仅在登录失败时重定向
-Keep ajax启用表单提交。
- 在服务器端，将您的用户身份验证功能与应用程序的输入页面组合在一起，只有在设置了表单域时才会执行。 - 成功登录后，返回应用程序的首页 - 登录失败，重定向回登录页面 - 如果未设置表单值，请检查用户是否已正确登录，然后返回标准输出页面。如果未登录，请重定向回登录。

一些考虑因素：
- 必须使用POST以避免将登录数据附加到URL
- 保持正确的后退按钮功能，以便用户友好的导航似乎有点棘手 - 我希望通过尽可能少的页面重新加载来尽可能简化流程

有什么想法吗？

编辑：
我找到了第四种方法，这可能是最好的方法。它避免了POST / redirect方法导致的后退按钮功能问题。如果用户在第一次尝试时进行身份验证，则会在整个时间内保持平滑的页面转换。如果不是，则在成功登录后将继续保持页面转换流程。此外，所有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。

Answer 2

基本上这是根据需要。

标准表单提交（第1点）是一种非常明确的方式，但如果登录失败，则需要重新加载页面，以便多个请求（一个用于登录检查，另一个用于页面 - 负载）制造＆amp;另外，需要填充输入数据。

AJAX r的一些优点 -

如果连接关闭或网络出现故障，我们可以显示正确的错误 - 保持页面设计不变。在标准提交的情况下 - 它将显示连接错误 - 用户可能需要重新启动移动应用程序。
在将来的使用中，如果我们强制用户登录以查看页面内容，AJAX可以快速完成这一操作。所以我们可以把登录框放在每个地方和登录用户而不中断当前状态。

JQuery Mobile - 用户登录最佳实践

2 个答案: