JWT가 포함된 Facebook 여권

JWT가 포함된 Facebook 여권

서버에서 사용자 인증을 위해 Passport를 사용하고 있습니다.사용자가 로컬에서(사용자 이름과 암호를 사용하여) 로그인할 때 서버는 로컬 스토리지에 저장된 JWT를 전송하고 사용자 인증이 필요한 모든 api 호출에 대해 서버로 다시 전송됩니다.

이제 페이스북과 구글 로그인도 지원하고 싶습니다.저는 여권으로 시작했기 때문에 여권 페이스북과 여권 구글 인증을 사용하여 여권 전략을 계속하는 것이 가장 좋을 것이라고 생각했습니다.

Facebook을 참조하겠지만, 두 전략 모두 동일하게 작동합니다.둘 다 서버 경로로 리디렉션해야 합니다('/auth/facebook' 및 '/auth/facebook/callback').이 프로세스는 사용자의 Facebook\Google ID 및 토큰을 DB에 저장할 정도로 성공적입니다.

서버에서 사용자가 생성되면 Facebook\google에서 받은 토큰에 의존하지 않고 JWT가 생성됩니다.

     ... // 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가 생성된 후 제 앱으로 리디렉션해야 하기 때문에 고객에게 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를 제거하면 토큰이 표시되지만 앱으로 리디렉션되지는 않습니다.

그것에 대한 해결책은 없습니까?제 접근법이 잘못된 건가요?어떤 제안이든 좋습니다.

그 문제에 대해 제가 찾은 가장 좋은 해결책은 JWT가 들어 있는 쿠키가 있는 예상 페이지로 리디렉션하는 것입니다.

사용.res.jsonjson 응답만 보내고 리디렉션하지 않습니다.그렇기 때문에 여기에 제시된 다른 답은 제가 직면한 문제를 해결하지 못할 것입니다.

그래서 제 해결책은 다음과 같습니다.

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
});

리디렉션 후 쿠키를 안전하게 읽고 예상대로 해당 JWT를 사용할 수 있습니다.(사용자가 로그인했는지 확인하기 위해 실제로 모든 페이지 로드에서 쿠키를 읽을 수 있습니다.)

앞서 언급했듯이, JWT를 쿼리 파라미터로 사용하여 리다이렉트하는 것은 가능하지만, 매우 안전하지 않습니다.쿠키를 사용하는 것이 더 안전하며, 분명히 안전하지 않은 쿼리 매개 변수와 달리 쿠키를 훨씬 더 안전하게 만들기 위해 사용할 수 있는 보안 솔루션이 있습니다.

바의 대답에 추가.

저는 쿠키를 추출하고 로컬 저장소에 저장한 다음 쿠키를 삭제하고 인증된 페이지로 리디렉션하기 위해 랜딩 구성요소를 준비했습니다.

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 />;
  }
}

적절한 해결책은 클라이언트 측에서 리디렉션을 구현하는 것입니다.

간단히 사용:

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 === trueJWT를 LocalStorage에 저장하고, 그렇지 않으면 로그인 페이지로 리디렉션합니다.

언급URL : https://stackoverflow.com/questions/42508640/facebook-passport-with-jwt