JQuery Mobile - 用户登录最佳实践 [英] JQuery Mobile - User Login Best Practice

问题描述

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

I'm building a mobile interface with JQuery Mobile for an already existing web app which requires user authentication, and I cannot settle on the best approach for implementing a login process.

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

I'm not so concerned about the server side authentication, but rather how to implement it on the user side.

经过一番试验，似乎有以下选项:

After some experimenting, it seems that the options are:

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

1. Standard form submit with POST edirect:
   -Disable automatic ajax with data-ajax="false"
   -User submits, check credentials at server, then send redirect to app on success or back to login page on failure.

带有 $.mobile.changePage
的 Ajax 方法- 通过 Ajax 发送用户名/密码
- 根据响应，使用 $.mobile.changePage 添加应用的首页或显示错误消息

Ajax method with $.mobile.changePage
-Send username/passwd via Ajax
-Based on response, either add front page of app with $.mobile.changePage or display error message

带有 window.location.replace
的 Ajax 方法- 与选项2类似，除了使用window.location.replace添加应用首页

带有POST的Ajax方法；仅在登录失败时重定向
- 为表单提交启用 ajax.
- 在服务器端，将您的用户身份验证功能与您的应用程序的入口页面相结合，使其仅在设置了表单字段时才执行.
- 登录成功后，返回应用首页.
- 登录失败时，重定向回登录页面.
-如果没有设置表单值，检查用户是否正确登录，然后返回标准输出页面.如果未登录，则重定向回登录.

Ajax method with POST; redirect only on failed login
-Keep ajax enabled for form submissions.
-On the server side, combine your user authentication function with the entry page of your app in such a way that it only executes if the form fields are set.
-On successful login, return front page of the app.
-On failed login, redirect back to the login page.
-If the form values are not set, check if the user is properly logged in and then return the standard output page. If not logged in, redirect back to login.

一些注意事项:
-它必须使用 POST 以避免将登录数据附加到 URL
- 保持正确的后退按钮功能以使导航对用户友好似乎有点棘手.
- 我希望尽可能少地重新加载页面

Some considerations:
-It must use POST to avoid attaching login data to URL
-Maintaining correct back button functionality so that navigation is user friendly appears to be kind of tricky.
-I'd like to make the process flow as easily as possible with as few page reloads as possible

有什么想法吗?

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

I found a 4th method, which may be the best approach. It avoids the back button functionality issues resulting from the POST/redirect method. If the user authenticates on the first attempt, the smooth page transition is maintained the entire time. If not, the page transition flow will be continuously maintained after successful a login. Furthermore, all of JQM's built in error handling features remain available.

推荐答案

基本上是根据需要.

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

Standard form submit( Point 1) is a very clear cut way, but if login is failed, need to reload the page so, multiple requests( one for login-check, another for page-load) are made & also, need to populate back input data.

AJAX r-的一些优势

Some advantages for AJAX r-

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

• If connection is closed or network failure, we can show proper error- keeping the page design intact. In case of standard submit- it will show connection error- in which point user may need to restart the mobile-app.

在将来的使用中，如果我们强制用户登录以查看页面内容，AJAX 可以简单地快速完成该技巧.所以我们可以把那个登录框放在任何地方 &在不中断当前状态的情况下登录用户.

In future use, if we force user to login to view content of a page, AJAX can simply do that trick, quickly. So we can put that login-box every-where & log in user without interrupting current state.

这篇关于JQuery Mobile - 用户登录最佳实践的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！