javascript 单页应用程序上的用户身份验证？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12501359/
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
Authentication for users on a Single Page App?
提问by John Haldson
I have developed a single page app prototype that is using Backbone on the front end and going to consume from a thin RESTful API on the server for it's data.
我开发了一个单页应用程序原型，它在前端使用 Backbone 并从服务器上的瘦 RESTful API 使用它的数据。
Coming from heavy server side application development (php and python), I have really enjoyed the new different design approach with a thick client side MVC but am confused on how best to restrict the app to authenticated users who log in.
来自繁重的服务器端应用程序开发（php 和 python），我真的很喜欢厚客户端 MVC 的新的不同设计方法，但我对如何最好地将应用程序限制为经过身份验证的登录用户感到困惑。
I prefer to have the app itself behind a login and would also like to implement other types of logins eventually (openid, fb connect, etc) in addition to the site's native login. I am unclear how this is done and have been searching - however unsuccessful in finding information that made it clear to me.
我更喜欢将应用程序本身置于登录名之后，并且除了站点的本机登录名外，还希望最终实现其他类型的登录名（openid、fb connect 等）。我不清楚这是如何完成的，并且一直在搜索 - 但是没有成功找到让我清楚的信息。
In the big picture, what is the current best practice for registering users and requiring them to login to use your single page app?
从总体上看，当前注册用户并要求他们登录以使用您的单页应用程序的最佳做法是什么？
Once a user is logged in, how are the api requests authenticated? Can I store a session but how do I detect for this session in the API calls or is there a token I have to pass in every single API call? Any answers to this would be much appreciated!
用户登录后，如何对 api 请求进行身份验证？我可以存储会话，但如何在 API 调用中检测此会话，还是必须在每个 API 调用中传递令牌？对此的任何答案将不胜感激！
回答by Betty
The most RESTful way I have seen is based on the OAuth client credentials flow, basically a /token endpoint that you post username/password to which returns an access token for this session. Every ajax request after that appends an Authorizationbearer header with the token. You can store the token in a global variable to just keep it around until the page is refreshed/closed, use local storage to keep users logged in between sessions, or javascript cookies. If you don't like the idea of tokens then you can just use the old cookie approach which is automatically send with any ajax request anyway.
我见过的最 RESTful 方式是基于 OAuth 客户端凭据流，基本上是一个 /token 端点，您将用户名/密码发送到该端点，该端点返回此会话的访问令牌。之后的每个 ajax 请求都会附加一个Authorization带有令牌的承载标头。您可以将令牌存储在全局变量中以保持它直到页面刷新/关闭，使用本地存储保持用户在会话之间登录，或使用 javascript cookie。如果您不喜欢令牌的想法，那么您可以使用旧的 cookie 方法，该方法无论如何都会自动发送任何 ajax 请求。
As for facebook/google etc I normally follow the stackoverflow approach where I associate external userlogins to an account. Then use a fairly normal server based oauth dance (although you can replace all requests to the server with ajax requests with slight modifications, I just find it doesn't really make much difference as you need redirects between you and the server anyway). I normally issue an encrypted cookie for a facebook login, which I then convert into a token using a similar method as above (just send the cookie with the request instead of username/password).
至于 facebook/google 等，我通常遵循 stackoverflow 方法，将外部用户登录名与帐户相关联。然后使用一个相当普通的基于服务器的 oauth 舞蹈（虽然你可以用 ajax 请求替换对服务器的所有请求，只需稍作修改，我发现它并没有太大区别，因为无论如何你都需要在你和服务器之间进行重定向）。我通常为 facebook 登录发布一个加密的 cookie，然后我使用与上面类似的方法将其转换为令牌（只需发送带有请求的 cookie，而不是用户名/密码）。
回答by Jens Alm
We use django cookie-based authentication and have a separate page for the login and the single-page-app. Works pretty well for our use case. We have used a Backbone-based session management system that I described here: backbone.js - handling if a user is logged in or not
我们使用基于 django cookie 的身份验证，并有一个单独的页面用于登录和单页应用程序。非常适合我们的用例。我们使用了我在此处描述的基于 Backbone 的会话管理系统：backbone.js - 处理用户是否登录
回答by Lior
We're using Angular.js and also, have a separate page for the login. The separate page loads a separate single page (and secure) application, that calls the server using http XHR request, sending username and password. If the server authenticated the credentials, the javascript code sets a cookie. this cookie could be read from the 'other side', meaning, the non-secure application. In the cookie we only put the user name and of course, no password or other secured information. then we can show something like 'Not Lior? Logout' on the non-secure app.
我们正在使用 Angular.js，并且还有一个单独的登录页面。单独的页面加载一个单独的单页（和安全）应用程序，该应用程序使用 http XHR 请求调用服务器，发送用户名和密码。如果服务器对凭据进行了身份验证，则 javascript 代码会设置一个 cookie。该 cookie 可以从“另一端”读取，即非安全应用程序。在 cookie 中，我们只放置用户名，当然没有密码或其他安全信息。然后我们可以展示类似“Not Lior？在非安全应用程序上注销”。
Only thing to note is to override Angular's cookie mechanism to set an indefinite expiration and, most importantly, root path:
唯一需要注意的是覆盖 Angular 的 cookie 机制以设置无限期，最重要的是，设置根路径：
$document[0].cookie = 'username=' + escape($scope.userName) + ";expires=Thu, 01 Jan 2970 00:00:00 GMT; Path=/";
