JQuery移动-用户登录最佳实践

Question

我正在为一个已经存在的JQuery应用程序构建一个移动界面，它需要用户身份验证，而且我无法确定实现登录过程的最佳方法。

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

在进行了一些试验之后，这些选择似乎是：

1. 标准表单提交并重新定向：

-Disable自动ajax与data-ajax="false"

-User提交，在服务器上检查凭据，然后在成功时将重定向发送到app，或者在失败时返回到登录页面。

• Ajax方法与$.mobile.changePage

通过Ajax的-Send用户名/passwd

-Based响应时，可以添加带有$.mobile.changePage的app首页，也可以用window.location.replace显示错误消息

• Ajax方法。

-Similar到选项2，除了使用window.location.replace添加带有POST的app

• Ajax方法的首页外，仅在失败登录时重定向。

启用了表单提交的-Keep ajax。

-On服务器端，将您的用户身份验证功能与应用程序的入口页结合起来，使其只在设置表单字段时执行。

-On成功登录，返回应用程序的首页。

-On登录失败，重定向回登录页面。

没有设置表单值，请检查用户是否正确登录，然后返回标准输出页。如果没有登录，请重定向回登录。

一些考虑因素：

-It必须使用POST来避免将登录数据附加到URL

-Maintaining正确的后退按钮功能，使导航是用户友好的，似乎有点棘手。

-我希望尽可能少重新加载页面，使流程流尽可能容易

有什么想法吗？

编辑：

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

Answer 1

基本上，这是根据需要。

标准表单提交(第1点)是一种非常明确的方式，但如果登录是失败的，则需要重新加载页面，因此需要发出多个请求(一个用于登录检查，另一个用于页面加载)&还需要填充回输入数据。

AJAX的一些优点-

• 如果连接关闭或网络故障，我们可以显示正确的错误-保持页面设计完整。如果出现标准提交(这将显示连接错误)，用户可能需要重新启动移动应用程序。
• 在今后的使用中，如果我们强制用户登录查看页面的内容，AJAX就可以快速完成这一操作。因此，我们可以在不中断当前状态的情况下，将该登录框放置在每个where&登录用户处。

Answer 2

我知道这个问题有一年多了，但这是我的两分钱。我所做的是一个JQuery移动表单，它看起来像：

<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。