-
질문 & 답변
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
클라이언트 서버에서 소셜 로그인
22.09.02 05:44 작성 조회수 255
0
현재 상황
클라이언트와 서버를 각자 다른 도메인에 배포했습니다.
소셜 로그인은 passport 모듈과 session을 사용했습니다.
서버에서 소셜 로그인이 성공해도 클라이언트에는 세션 쿠키가 전달되지 않습니다.
클라이언트
axios get 요청을 보내면 cors 에러가 떠서 a 태그를 사용했습니다.
<a href="http://서버ip/auth/github">깃 헙 로그인<a/>서버
아래의 코드는 강의의 내용과 동일합니다. passport 모듈을 활용해 소셜 로그인을 구현했습니다.
import express from "express";
import passport from "passport";
import { isLoggedIn, isNotLoggedIn } from "../middlewares/authMiddleware.js";
const router = express.Router();
router.get("/github", passport.authenticate("github"));
router.get(
"/github/callback",
passport.authenticate("github", {
failureRedirect: "/",
}),
(req, res) => {
res.redirect(`http://localhost:3000`);
}
);
router.get("/logout", isLoggedIn, (req, res) => {
req.logout();
req.session.destroy();
res.json({ message: "logout" });
});
export default router;소셜 로그인에 성공하면 클라이언트 서버의 메인 페이지로 redirect 시키고 있습니다.
문의
서버에서 소셜 로그인 성공시 클라이언트 서버에도 session 쿠키를 전달하고 싶습니다.
두 개의 다른 서버에서 소셜 로그인을 어떻게 구현해야될지 모르겠습니다.
답변을 작성해보세요.
1
inthegarden442
질문자2022.09.02
네 맞습니다.
CSR를 위해 클라이언트가 노드 서버의 API에 요청하는 방식으로 진행해보려고 합니다.
현재 로컬 로그인은 사용하지 않고 오로지 소셜 로그인(깃헙)만 사용하고 있습니다.
로컬 로그인은 구현하지 않을 생각입니다.
제가 고민해본 방법
router.get(
"/github/callback",
passport.authenticate("github", {
failureRedirect: "/",
}),
(req, res) => {
console.log(req.headers.cookie);
res.redirect(`http://localhost:3000?cookie=${req.headers.cookie}`);
}
);
위 코드 처럼 GitHub에서 콜백 url로 노드 서버에 들어오면
쿼리를 사용해 클라이언트에 쿠키 값을 전달해 봤습니다.
하지만 클라이언트에서 쿠키를 저장하는 방법을 모르겠습니다.
저장을해도 서버에서 사용자가 로그인 한 상태인지를 모르는 것 같더라구요.
문의
만약 다른 도메인 간의 쿠키 공유가 어렵다면
passport와 jwt를 사용하면 되는건가요?
inthegarden442
질문자2022.09.02
그리고 제로초 님 덕분에 정말 재미있게 공부하고 있습니다. 책, 강의, 블로그 모두 꼼꼼히 보며 공부 중입니다. 감사드립니다.
조현영
지식공유자2022.09.02
쿠키는 서버에 저장하는 게 아니라 브라우저에 저장하는 것이고, 프론트서버는 브라우저와 백엔드 서버간에 쿠키가 전달될 수 있도록 하면 됩니다. 위에 예시처럼 쿼리스트링에 쿠키를 넣은 경우에는 익스프레스라면 프론트서버 라우터에 res.cookie로 해서 브라우저가 쿠키를 설정할 수 있도록 해야 하고, 이 때 옵션으로 domain 옵션을 백엔드 서버 주소를 넣어야합니다. 다만 다른 도메인의 서버라서 쿠키가 생성될지 모르겠네요.
답변 1