使用 Passportjs 从 Angularjs ( http get / resource ) 进行用户身份验证答案

【问题标题】：user authentication from Angularjs ( http get / resource ) using Passportjs使用 Passportjs 从 Angularjs ( http get / resource ) 进行用户身份验证
【发布时间】：2013-04-20 00:55:44
【问题描述】：

我正在尝试将 Passportjs 与 Angular 和 express 一起使用。我正在尝试在 passportjs 中测试 facebook 策略。

身份验证似乎成功，但没有导航到回调 url。它simplay挂起。

Firebug 控制台显示： GET http://localhost:7000/auth/facebook 302 暂时移动”

然而，当我手动单击此 url 但未自动重定向时，它会在浏览器窗口中成功打开回调 url（索引）

我的登录视图 (jade) 如下所示：

a(href='/auth/facebook')
 p Login

服务器端的路由是：

app.get('/auth/facebook',  passport.authenticate('facebook'));
app.get('/auth/facebook/callback', passport.authenticate('facebook', { failureRedirect: '/login' }),
function(req, res) {
res.render('index');
 });

请帮助。这是我第一次使用 Angularjs 和 Node js

编辑：更准确地说，只有当我的请求是从客户端（Angular 中的登录页面）到我的快速服务器时，才会出现此问题。如果我从 express 中提供登录页面，则没有问题。身份验证通过并按预期重定向到我的应用程序。

当服务器使用passportjs处理身份验证时，我们不能从客户端（使用http get / post）向服务器发出身份验证请求吗？

【问题讨论】：

标签： angularjs node.js passport.js

【解决方案1】：

我遇到了同样的问题，问题是角度如何发送请求。我首先使用$http.get，它到达了我的节点服务器，但正如你所说，挂在那里。当我切换到$window.location.href 时，它工作得很好，因为这个请求可以被链接起来。

【讨论】：

【解决方案2】：

我目前正在尝试做同样的事情并遇到问题，但也许我可以澄清一些事情并提供一些建议。

在幕后 PassportJS 的 Facebook 策略是使用 OAuth。通过使用这种方法，它将所有身份验证卸载到 Facebook 的服务器上。当您单击带有 href="/auth/facebook" 的链接时，您的快速服务器会将用户重定向到 Facebook，然后返回到您的应用程序。必须这样做以确保安全的身份验证，否则有人可能声称他们是 Facebook 并自己“验证”用户。这也是为什么调用 Angular $http.get("/auth/facebook") 不起作用的原因，它只会返回 302 重定向。

不幸的是，这就是它变得具有挑战性的地方。如果你简单地包含一个带有 href "/auth/facebook" 的链接，服务器将对用户进行身份验证并返回到你的应用程序，但是 Angular 无法知道你的用户已经通过身份验证。我在这里找到了一个 angular-oauth 示例https://github.com/enginous/angular-oauth，但在消化它时遇到了一些麻烦。本质上，他正在使用弹出窗口打开身份验证链接，在您的情况下为“/auth/facebook”，并使用浏览器 $window.postMessage 使用他在用户通过身份验证后收到的访问令牌与他的主应用程序窗口进行通信然后关闭弹出窗口。

我认为这可能是最好的方法，但我仍然没有使用 Passport。很想听听其他人的想法/意见，因为我还是 Angular 的新手！

更新：我最近看到了这篇博文http://www.frederiknakstad.com/authentication-in-single-page-applications-with-angular-js/，它展示了一个将 Passport 的 Facebook 策略与 Angular 结合使用的示例。他似乎在成功验证后设置了一个 cookie，并在页面加载时对 cookie 进行 Angular 轮询。这可能是一个更简单的解决方案。

【讨论】：