passport-facebook과 jwt를 세션없이 통합하는 방법은 무엇입니까?

Question

서버에서 세션을 저장하지 않고 jwt 토큰과 함께 passport-github 또는 facebook login을 사용하고 싶습니다.

app.get('/auth/facebook', 
    passport.authenticate('facebook')); 

app.get('/auth/facebook/callback', 
    passport.authenticate('facebook', { failureRedirect: '/login' }), 
    function(req, res) { 
    // Successful authentication, redirect home. 
    res.redirect('/'); 
    }); 

방법 프론트 엔드 코드를 처리 할 수있는 :하지만 우리는 프론트 엔드에서 두 개의 요청이 ?

보통의 경우

, 우리는 그래서 우리는 로컬 토큰을 절약 할 수 있습니다 하나 개의 요청

axios.post(`${API_URL}/auth/login`, { email, password }) 
.then(response => { 
    cookie.save('token', response.data.token, { path: '/' }); 
    dispatch({ type: AUTH_USER }); 
    window.location.href = CLIENT_ROOT_URL + '/dashboard'; 
}) 
.catch((error) => { 
    errorHandler(dispatch, error.response, AUTH_ERROR) 
}); 
} 

있습니다. 여권용 페이스 북의 경우 두 가지 요청 ('/ auth/facebook'및 '/ auth/facebook/callback')이 있습니다. 그렇다면 토큰을 로컬에 저장하는 방법은 무엇입니까?

Answer 1

우선 GET 요청이 작동하지 않는다고 생각합니다./auth/login을 시작하려면 a 링크를 사용해야합니다.

<a href="http://localhost:5150/auth/facebook"> 

토큰을 클라이언트에 보내려면 jwt가 쿠키에 저장된 클라이언트 페이지로 리디렉션해야합니다.

const token = user.generateJwt(); 
res.cookie("auth", token); 
return res.redirect(`http://localhost:3000/socialauthredirect`); 

클라이언트 방문 페이지에서 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 />; 
    } 
}