使用 Angular.js 处理基于 OAuth 令牌的身份验证？答案

【问题标题】：Handling OAuth token-based authentication with Angular.js?使用 Angular.js 处理基于 OAuth 令牌的身份验证？
【发布时间】：2015-03-28 01:21:15
【问题描述】：

我已经在 Node.js 中设置了我的后端代码，以便使用护照成功通过 GitHub 进行身份验证。我能够使用 jsonwebtoken 生成令牌。但是，由于 OAuth 的流程，我无法管理前端。

如果这是基于他们输入电子邮件和密码的表单，则视图可能有点像这样：

<form ng-submit="login()">
  <input ng-model="user.email" type="email" name="email" id="email" ng-required />
  <input ng-model="user.password" type="password" name="password" id="password" ng-required />
  <button type="submit">Log in</button>
</form>

在此流程中，控制器可以使用 login() 向路由发出请求，并在成功时接收包含 currentUser 和令牌的对象，并在回调时重定向。

OAuth 的流程在这里给我带来了一些麻烦。在 OAuth 中，您将用户重定向到站点之外，它会返回到 node.js 端的回调 url，在该端，currentUser 在服务器上设置。我不知道如何将角度前端连接到这个过程。

在 Angular 中，您应该如何处理这个问题，以便单击“使用 github 登录”按钮将更新 $window.sessionStorage.token 变量和 $rootScope.currentUser 对象？

【问题讨论】：

<button ng-click="openWindow()">github login</button>

标签： javascript angularjs node.js authentication oauth

【解决方案1】：

您的 oauth 链接的目标应该是 _blank，或者使用 window.open 在新窗口中登录...当 oauth 完成时，您可以从窗口的代码中调用 window.opener.foo(...) 来通知前面的 SPA 应用程序更新其状态...

【讨论】：

【解决方案2】：

我认为您想从服务器站点登录并重定向到前端。

创建一个将转到服务器的 api 命中，它将填充您可以通过 passport-github 用于 node.js 的 github 屏幕，然后当登录完成时，它将为您提供数据。使用参数中的 github 数据重定向到您的服务器到网站页面。

然后在页面加载时通过 urlparsing 读取这些参数

【讨论】：