与JWT的Facebook护照

Question

我一直在我的服务器上使用Passport进行用户身份验证。当用户在本地登录时（使用用户名和密码），服务器向他们发送存储在localstorage中的JWT，并在每次需要用户身份验证的api调用时发送回服务器。

现在我也想支持Facebook和Google登录。自从我开始使用Passport后，我认为最好继续使用Passport策略，使用passport-facebook和passport-google-oauth。

我将参考Facebook，但两种策略的行为都相同。它们都需要重定向到服务器路由（'/ auth / facebook'和'/ auth / facebook / callback'）。该过程是成功的，以保存用户，包括他们的Facebook \谷歌ID和令牌上的令牌。

在服务器上创建用户时，会创建一个JWT（不依赖于从facebook \ google收到的令牌）。

     ... // Passport facebook startegy
     var newUser = new User();
     newUser.facebook = {};
     newUser.facebook.id = profile.id; 
     newUser.facebook.token = token; // token received from facebook
     newUser.facebook.name  = profile.displayName;   
     newUser.save(function(err) {
          if (err)
               throw err;
          // if successful, return the new user
          newUser.jwtoken = newUser.generateJwt(); // JWT CREATION!
          return done(null, newUser);
     });

问题是，在创建之后，我找不到将JWT发送到客户端的正确方法，因为我还应该重定向到我的应用程序。

app.get('/auth/facebook/callback',
    passport.authenticate('facebook', {
        session: false,
        successRedirect : '/',
        failureRedirect : '/'
    }), (req, res) => {
        var token = req.user.jwtoken;
        res.json({token: token});
    });

上面的代码将我重定向到我的应用主页面，但我没有得到令牌。如果我删除successRedirect，我会获得令牌，但我没有重定向到我的应用程序。

任何解决方案？我的方法有误吗？任何建议都可以。

Answer 1

我发现该问题的最佳解决方案是使用包含JWT的cookie重定向到预期页面。

使用res.json只会发送一个json响应，不会重定向。这就是为什么其他建议的答案不能解决我遇到的问题。

所以我的解决方案是：

app.get('/auth/facebook/callback',
passport.authenticate('facebook', {
    session: false,
    successRedirect : '/',
    failureRedirect : '/'
}), (req, res) => {
    var token = req.user.jwtoken;
    res.cookie('auth', token); // Choose whatever name you'd like for that cookie, 
    res.redirect('http://localhost:3000'); // OR whatever page you want to redirect to with that cookie
});

重定向后，您可以安全地读取cookie并按预期使用该JWT。 （您实际上可以在每个页面加载时读取cookie，以检查用户是否已登录）

正如我之前提到的，可以将JWT重定向为查询参数，但它非常不安全。使用cookie更安全，并且仍然可以使用安全解决方案使其更安全，而不像明显不安全的查询参数。

Answer 2

添加到Bar的答案。

我准备了一个着陆组件来提取cookie，将其保存到本地存储，删除cookie，然后重定向到授权页面。

class SocialAuthRedirect extends Component {
  componentWillMount() {
    this.props.dispatch(
      fbAuthUser(getCookie("auth"), () => {
        document.cookie =
          "auth=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
        this.props.history.push("/profile");
      })
    );
  }

  render() {
    return <div />;
  }
}

Answer 3

一个支持解决方案是在客户端实现重定向。

只需使用：

app.get('/auth/facebook/callback',
  passport.authenticate('facebook', {
    session: false,
    failureRedirect: '/login'
  }), (req, res) => {
    res.json({
      token: req.user.jwtoken
    })
  }
)

如果您是客户端收到令牌，然后从那里重定向到主页，并且在登录不成功的情况下，它将由服务器直接重定向。

或者你可以像我一样去完整的客户端管理：

app.get('/auth/facebook/callback',
  passport.authenticate('facebook', {
    session: false
  }), (req, res) => {
    if (req.user.jwtoken) {
      res.json({
        success: true,
        token: req.user.jwtoken
      })
    } else {
      res.json({
        success: false
      })
    }
  }
)

如果success === true，将JWT存储在LocalStorage中，否则重定向到登录页面。