묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[리뉴얼] Node.js 교과서 - 기본부터 프로젝트 실습까지
카카오 로그인 내부 동작 순서 관련 질문입니다.
// auth.js router.get('/kakao', passport.authenticate('kakao')); router.get('/kakao/callback', passport.authenticate('kakao', { failureRedirect: '/', }), (req, res) => { res.redirect('/'); }); // kakaoStrategy.js module.exports = () => { passport.use(new KakaoStrategy({ clientID: process.env.KAKAO_ID, callbackURL: '/auth/kakao/callback', }, async (accessToken, refreshToken, profile, done) => { console.log('kakao profile', profile); try { const exUser = await User.findOne({ where: { snsId: profile.id, provider: 'kakao' }, }); if (exUser) { done(null, exUser); } else { const newUser = await User.create({ email: profile._json && profile._json.kakao_account_email, nick: profile.displayName, snsId: profile.id, provider: 'kakao', }); done(null, newUser); } } catch (error) { console.error(error); done(error); } })); }; 위의 코드는 질문과 연관된 코드로 질문의 이해를 돕기위해 첨부하였습니다 다음은 카카오톡 로그인 버튼을 눌렀을 때, 정상적으로 로그인 인증이 진행되는 과정에서 콘솔에 찍히는 로그입니다. 각 로그의 구분을 위해서 1~5번까지 번호를 순서대로 매겼습니다. // (1) GET /auth/kakao 302 4.599 ms - 0 // (2) kakao profile { provider: 'kakao', id: 1807557207, // 생략 } // (3) Executing (default): SELECT `id`, `email`, `nick`, `password`, `provider`, `snsId`, `createdAt`, `updatedAt`, `deleteddAt` FROM `users` AS `User` WHERE (`User`.`deletedAt` IS NULL AND (`User`.`snsId` = 1807557207 AND `User`.`provider` = 'kakao')) LIMIT 1; // (4) GET /auth/kakao/callback?code=AqnOGyk-OUAvtmCijPwAZZL9Xv6LaN_C1p0f5hSQDpgN2pq9hLJIx_rAAN3-bJJ9DQQgUgopdSkAAAF6qRsigA 3 302 288.890 ms - 46 // (5) Executing (default): SELECT `id`, `email`, `nick`, `password`, `provider`, `snsId`, `createdAt`, `updatedAt`, `deleteddAt` FROM `users` AS `User` WHERE (`User`.`deletedAt` IS NULL AND `User`.`id` = 2); 강의를 보며 카카오 로그인 과정을 이해하기로는1. `GET /auth/kakao` 요청2. 카카오 로그인 페이지로 리다이렉트, 로그인 및 인증 진행3. 카카오 로그인 정보와 함께 `GET /auth/kakao/callback`으로 콜백 요청4. 콜백 요청에 대한 라우팅이 되어있으므로, 두번째로 카카오 로그인 전략 수행5. passport.use의 콜백 함수 실행, 로그인 검증 과정 진행6. 로그인 성공 / 실패에 따른 리다이렉트 와 같이 이해하였습니다. 그러나, 콘솔 로그 결과를 살펴봤을 때는 조금 다른 흐름으로 동작하는 것 같은 느낌을 받았습니다. 콘솔 로그를 바탕으로 로그인 과정을 생각해봤을 때는 1. `GET /auth/kakao` 요청2. 카카오 로그인 페이지로 리다이렉트, 로그인 및 인증 진행3. passport.use의 콜백 함수 실행. -> 카카오 프로필 콘솔 출력의 결과로 (2)와 같은 로그가 찍힘 -> profile.id 를 통해 유저가 존재하는지 조회 (findOne) -> 로그인 진행 -> serializeUser 호출4. `GET /auth/kakao/callback`으로 콜백 요청 -> (4) 의 결과를 통해 위 과정을 거친 뒤에 콜백 요청이 일어남을 알 수 있음5. 이미 로그인이 되어있으므로 deserializeUser 호출 -> (5)에서 유저 정보를 조회할 때 세션에 등록된 id로 유저를 조회함6. 로그인 성공 / 실패에 따른 리다이렉트 와 같은 흐름이어야 콘솔 로그 결과와 매칭이 되지 않을까하는 생각이 들었습니다. 결론적으로, 카카오 로그인 과정은 설명을 잘해주셔서 이해가 갔지만, 콘솔 로그의 결과에는 조금 의아한 부분이 있어 어떤 흐름으로 이해하고 넘어가면 될지 궁금하여 질문을 드렸습니다. 긴 글 읽어주셔서 감사합니다. 강의 영상 너무 잘 보고 있습니다. 감사합니다!!
-
미해결[리뉴얼] Node.js 교과서 - 기본부터 프로젝트 실습까지
카카오 로그인 라우팅 관련 질문입니다.
// 1번 router.get('/kakao', passport.authenticate('kakao')); // 2번 router.get('/kakao/callback', passport.authenticate('kakao', { failureRedirect: '/', }), (req, res) => { res.redirect('/'); }); - 메인 페이지에서 카카오톡 버튼을 클릭하게 되면 `/auth/kakao` 로 GET 요청을 보내면서 카카오 로그인 전략을 수행하고, 처음에는 카카오 로그인 창으로 리다이렉트하여 카카오 아이디로 로그인 및 인증 절차를 거친 뒤 그 결과를 `/auth/kakao/callback` 으로 받아 콜백 라우터에서 다시 카카오 로그인 전략을 수행하는 것으로 이해했습니다. - 그렇다면, 애초에 카카오톡 버튼의 링크를 `auth/kakao/callback` 으로 달아놓아도 동일하게 동작하지 않을까? 하는 생각이 들어 직접 테스트 해본 결과 동일하게 동작함을 확인하였습니다. - 두 개의 라우터를 분리하여 작성하는 특별한 이유가 있는지 궁금합니다! 단순히 명목 상의 이유인 것인지 아니면 기능적인 차이가 있어 분리한 것인지 궁금합니다.