PassportJS + RestAPI +SPA

Question

我正在使用ExpressJS来构建RestAPI，客户端是SPA，并支持通过谷歌/脸书/GitHub/...通过PassportJS。我的问题是，社交登录的回调是否会返回到RestAPI或SPA？如果系统返回RestAPI，如何重定向到SPA上的主页。另一种情况是，如果系统回调SPA，RestAPI如何接收和验证来自客户端的token。请告诉我常用的方法。

谢谢,

Answer 1

向身份验证服务提供回调url后，您将决定是通过SPA还是API处理路由。Oauth身份验证(简化)分为两个步骤。github上的插图：

步骤1) https://github.com/login/oauth/authorize?client_id=*YOUR_CLIENT_ID*$redirect_uri=*YOUR_REDIRECT_URI*

打开一个弹出对话框，请求用户授权您的应用程序，如果成功，将返回带有查询参数?code=AUTHORIZATION_CODE的redirect_uri

步骤2)通过https://github.com/login/oauth/access_token将上述AUTHORIZATION_CODE交换为长期访问令牌

在您的体系结构中，您应该在SPA中执行步骤1，在rest api中执行步骤2。您应该依靠spa从身份验证提供程序获取授权码，将其发送到rest api，让rest api交换一个长期访问令牌，将该令牌保存到数据库中，使用它来检索用户信息或对其执行任意操作，然后让用户登录。

对于步骤1，您只需要CLIENT_ID，对于步骤2，CLIENT_ID和CLIENT_SECRET也是如此，因此您可以通过仅将CLIENT_SECRET存储在服务器端来保证应用程序的安全。

由rest api处理回调uri的问题在于，回调uri是由身份验证提供商(在本例中为github)调用的，而不是由您的SPA调用的，因此您无法发送将用户重定向到主页的响应。只有在服务器端处理您的模板和路由时，这才能起作用，我认为在您的体系结构中不是这种情况。

这在文档中并不明显，但是当你在像app.post('/login', passport.authenticate('github'),这样的路由上注册一个passport中间件时，中间件将检查“AUTHORIZATION_CODE”查询参数是否包含一个代码，如果不包含，它将开始第一步，如果是step2。

Answer 2

我使用了相同的堆栈(express，angular，passport)，并遵循了这种方法。

我创建了一个按钮。

<a href="/auth/facebook">Login with facebook</a>

另外，我有两条护照的路线。

    // send to facebook to do the authentication
  app.get('/auth/facebook', passport.authenticate('facebook', {scope: 'email'}));

  // handle the callback after facebook has authenticated the user
  app.get('/auth/facebook/callback', passport.authenticate('facebook', {
    successRedirect: '/#/profile',
    failureRedirect: '/'  //Redirect Homepage
  }));

这段代码显示，如果您成功登录，您将被重定向到angular路由(/#/profile)，重定向后您将拥有一个名为connect.sid的cookie，因为passportjs使用express-session。

然后你就可以通过这个中间件来查看用户是否在任何地方登录

// route middleware to ensure user is logged in
function isLoggedIn(req, res, next) {
  if (req.isAuthenticated())
    return next();

  res.redirect(301, '/');
}

您可以查看我的存储库，其中包含上面的代码。https://github.com/AOnurOzcan/meanTest

如果你遇到什么问题，请告诉我。