JQuery Mobile - 用户登录最佳实践

我正在为Jquery Mobile构建一个移动界面，用于已经存在的需要用户身份验证的Web应用程序，但我无法解决实现登录过程的最佳方法。JQuery Mobile - 用户登录最佳实践

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

一些试验后，似乎有三种选择：

标准形式POST \重定向提交：
- 禁用自动阿贾克斯与data-ajax="false"
- 用户提交，在服务器检查凭据，然后在成功时发送重定向到应用程序，或在失败时返回登录页面。
Ajax的方法与通过Ajax
$.mobile.changePage
- 发送的用户名/ passwd的系上的反应，或者与$.mobile.changePage或显示错误消息
Ajax的方法添加应用的头版与window.location.replace
-Similar到选项2，但使用window.location.replace添加应用程序的首页
使用POST的Ajax方法;仅在登录失败时重定向
- 为表单提交启用ajax。
- 在服务器端，将您的用户身份验证功能与应用程序的条目页面相结合，以便只在设置了表单字段时执行。
- 登录成功后，返回应用程序的首页。
- 登录失败后，重定向回登录页面。
- 如果表单值未设置，请检查用户是否已正确登录，然后返回标准输出页面。如果未登录，则重定向回登录。

一些注意事项：
- 它必须使用POST来避免登录数据附加到URL
-Maintaining正确的后退按钮功能让导航，用户友好的似乎是一种非常棘手。
-I'd想使过程容易流动尽可能用尽可能少的页面重新加载尽可能

任何想法？

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

来源

2012-02-11 user1091949

基本上这是根据需要。

标准格式提交（点1）是一个非常明确的方式，但如果登录是失败，需要重新加载页面，因此需要多个请求（一个用于登录检查，另一个用于页面加载） &也需要填充回输入数据。

对AJAX的一些优点R-

如果连接被关闭或网络故障，就可以显示正确的错误 - 保持页面设计不变。在标准提交的情况下，它会显示连接错误 - 用户可能需要重新启动移动应用。在未来的使用中，如果我们强制用户登录查看页面内容，AJAX可以快速完成这个技巧。因此，我们可以将该登录框每隔&登录到用户而不中断当前状态。

来源

2012-02-11 04:20:36

谢谢你的回应。我实际上会提出，需求实际上非常标准，以至于最佳实践可以适用于许多场景 - 在移动设备上基于Web的用户/密码身份验证，本地存储无法使用。方法1肯定是明确的，但我试图找到的是哪种方法具有最大的优势。 – user1091949 2012-02-11 04:30:54

好的。检查我的编辑。 – 2012-02-11 04:48:21

我知道这个问题已经超过了一年，但这里是我的两分钱。我做什么是jQuery Mobile的形式，看起来像：当然，这应该通过HTTPS

$(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 } 
     }); 
    }); 
});

：

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

那么功能拦截“提交”按钮的点击。就我而言，我正在使用服务器端REST服务进行验证。例如，如果证书不正确，您可以使其返回403。然后，您使用$ .mobile.changePage（）转发到同一DOM内的页面或另一个URL。

来源

2012-03-14 12:56:06

非常有趣和简单的方法，但如果用户直接打开隐藏页面呢？ – Pitto 2013-07-29 23:33:52

JQuery Mobile - 用户登录最佳实践

回答

相关问题