JQuery Mobile - 用户登录最佳实践
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9237659/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery Mobile - User Login Best Practice
提问by user1091949
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.
我正在使用 JQuery Mobile 为需要用户身份验证的现有 Web 应用程序构建移动界面，但我无法确定实现登录过程的最佳方法。
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:
经过一些实验，似乎选项是：
Standard form submit with POST\redirect:
-Disable automatic ajax withdata-ajax="false"
-User submits, check credentials at server, then send redirect to app on success or back to login page on failure.Ajax method with
$.mobile.changePage
-Send username/passwd via Ajax
-Based on response, either add front page of app with$.mobile.changePageor display error messageAjax method with
window.location.replace
-Similar to option 2, except usewindow.location.replaceto add front page of appAjax 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\redirect 提交标准表单： -
使用data-ajax="false"
-User 提交禁用自动 ajax ，检查服务器上的凭据，然后在成功时将重定向发送到应用程序或在失败时返回登录页面。带有
$.mobile.changePage
-Send username/passwd via Ajax
的Ajax 方法 -基于响应，添加应用程序首页$.mobile.changePage或显示错误消息与
window.location.replace
选项 2 类似的Ajax 方法，除了用于window.location.replace添加应用程序的首页带有 POST 的 Ajax 方法；仅在登录失败时重定向 -
为表单提交启用 ajax。
- 在服务器端，将您的用户身份验证功能与您的应用程序的入口页面相结合，使其仅在设置了表单字段时才执行。
- 成功登录后，返回应用程序的首页。
- 登录失败时，重定向回登录页面。
-如果没有设置表单值，检查用户是否正确登录，然后返回标准输出页面。如果未登录，则重定向回登录。
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 以避免将登录数据附加到 URL -
维护正确的后退按钮功能以便导航对用户友好似乎有点棘手。
- 我希望尽可能少地重新加载页面，从而使流程尽可能轻松
Any ideas?
有任何想法吗？
EDIT:
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.
编辑：
我找到了第四种方法，这可能是最好的方法。它避免了由 POST/重定向方法导致的后退按钮功能问题。如果用户在第一次尝试时进行身份验证，则始终保持平滑的页面过渡。如果不是，则登录成功后会持续维护页面转换流程。此外，JQM 的所有内置错误处理功能仍然可用。
采纳答案by Avisek Chakraborty
Basically that's according to the need.
基本上是根据需要。
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.
标准表单提交（第 1 点）是一种非常明确的方式，但是如果登录失败，则需要重新加载页面，因此会发出多个请求（一个用于登录检查，另一个用于页面加载）并且还需要填充回输入数据。
Some advantages for AJAX r-
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.
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.
如果连接关闭或网络故障，我们可以显示正确的错误 - 保持页面设计完整。在标准提交的情况下 - 它会显示连接错误 - 用户可能需要重新启动移动应用程序。
在未来的使用中，如果我们强制用户登录查看页面内容，AJAX 可以简单地快速完成这个技巧。所以我们可以把那个登录框放在任何地方并在不中断当前状态的情况下登录用户。
回答by Matías R
I know this question is more than a year old, but here are my two cents. What I did is a JQuery Mobile form that looks like:
我知道这个问题已经有一年多了，但这是我的两分钱。我所做的是一个 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>
Then a function to intercept the "Submit" button click:
然后一个函数拦截“提交”按钮点击：
$(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 }
});
});
});
Of course this should go over HTTPS. In my case, I am validating with a server side REST service. You can make it return 403 if the credentials are wrong, for example. Then, you forward using $.mobile.changePage() to a page within the same DOM or to another URL.
当然，这应该通过 HTTPS。就我而言，我正在使用服务器端 REST 服务进行验证。例如，如果凭据错误，您可以使其返回 403。然后，您使用 $.mobile.changePage() 转发到同一 DOM 中的页面或另一个 URL。
