인프런 커뮤니티 질문&답변

inthegarden442님의 프로필 이미지
inthegarden442

작성한 질문수

[리뉴얼] Node.js 교과서 - 기본부터 프로젝트 실습까지

JWT 토큰 사용하기

클라이언트 서버에서 소셜 로그인

작성

·

333

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

1

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

서브도메인만 다른게 아니라 도메인이 완전히 다른가요? 그러면 쿠키 공유가 사실상 어려워서 토큰으로 로그인하셔야 합니다.

네 맞습니다.

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를 사용하면 되는건가요?

그리고 제로초 님 덕분에 정말 재미있게 공부하고 있습니다. 책, 강의, 블로그 모두 꼼꼼히 보며 공부 중입니다. 감사드립니다.

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

쿠키는 서버에 저장하는 게 아니라 브라우저에 저장하는 것이고, 프론트서버는 브라우저와 백엔드 서버간에 쿠키가 전달될 수 있도록 하면 됩니다. 위에 예시처럼 쿼리스트링에 쿠키를 넣은 경우에는 익스프레스라면 프론트서버 라우터에 res.cookie로 해서 브라우저가 쿠키를 설정할 수 있도록 해야 하고, 이 때 옵션으로 domain 옵션을 백엔드 서버 주소를 넣어야합니다. 다만 다른 도메인의 서버라서 쿠키가 생성될지 모르겠네요.

inthegarden442님의 프로필 이미지
inthegarden442

작성한 질문수

질문하기