JQuery Mobile – 用户登录最佳实践

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

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

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

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

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

3. 使用window.location.replace Ajax方法
   – 与选项2类似，除了使用window.location.replace添加app的首页

4. 使用POST的Ajax方法; 仅在登录失败时重定向
   -Keep ajax启用表单提交。
   – 在服务器端，将您的用户身份validationfunction与应用程序的输入页面组合在一起，只有在设置了表单域时才会执行。
   – 成功登录后，返回应用程序的首页。
   – 登录失败，重定向回登录页面。
   – 如果未设置表单值，请检查用户是否已正确登录，然后返回标准输出页面。 如果未登录，请重定向回登录。

一些考虑：
– 必须使用POST以避免将登录数据附加到URL
– 保持正确的后退按钮function，以便用户友好的导航似乎有点棘手。
– 我希望尽可能轻松地使页面重新加载，使流程尽可能轻松

有任何想法吗？

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

Answer 1

基本上这是根据需要。

标准表单提交（第1点）是一种非常明确的方式，但如果登录失败 ，则需要重新加载页面，以便进行多个请求（一个用于登录检查，另一个用于页面加载）并且还需要填充返回输入数据。

AJAX的一些优点r-

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

• 在将来的使用中，如果我们强制用户登录以查看页面内容，AJAX可以快速地完成这一操作。 因此，我们可以将登录框放在每个位置并登录用户，而不会中断当前状态。

Answer 2

我知道这个问题已经超过一年了，但这是我的两分钱。 我做的是一个JQuery Mobile表单，看起来像：

 
 Username:
 
 Password:
 
 Submit  

然后一个拦截“提交”按钮的function点击：

 $(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服务进行validation。 例如，如果凭据错误，您可以使其返回403。 然后，使用$ .mobile.changePage（）转发到同一DOM内的页面或另一个URL。