JQuery Mobile - 用户登录最佳实践

Question

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

我不是那么关心服务器端身份验证,而是如何在用户端实现它.

经过一些实验,似乎选项是:

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

2. 使用$.mobile.changePage
   -send username/passwd通过Ajax
   的Ajax方法 - 基于响应,添加app的首页$.mobile.changePage或显示错误消息

3. Ajax方法 - 与window.location.replace
   选项2类似,除了用于window.location.replace添加应用程序的首页

4. 使用POST的Ajax方法; 仅在登录失败时重定向 -
   为表单提交启用了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点）是一种非常明确的方式，但是如果登录失败，需要重新加载页面，因此，会发出多个请求（一个用于登录检查，另一个用于页面加载），并且还需要填充返回输入数据。

AJAX 的一些优点 -

• 如果连接关闭或网络故障，我们可以显示适当的错误 - 保持页面设计完整。在标准提交的情况下，它将显示连接错误，此时用户可能需要重新启动移动应用程序。

• 在将来的使用中，如果我们强制用户登录才能查看页面内容，AJAX 可以简单快速地做到这一点。因此，我们可以将登录框放在任何地方并登录用户，而无需中断当前状态。