다른 sns 로그인도 시도해보고있는데 잘안되네요...

[리뉴얼] React로 NodeBird SNS 만들기

패스포트로 로그인하기.

해결된 질문

작성

435

안녕하세요. 강의 잘 듣고 있습니다.

수업에는 없는 내용이지만 해보고싶어서 도전중인데 카카오 로그인을 패스포트를 사용해서 해보고 싶습니다. 그런데

클라이언트 서버 : localhost:3060

백엔드 서버 : localhost:12000

클라이언트 코드 
<a href= http://localhost:12000/auth/kakao > 카카오 로그인 하기  </a>



백엔드 코드 ( route/auth.ts 폴더안 )
router.get( '/kakao', passport.authenticate( 'kakao' ) );

router.get( "/kakao/callback", ( req: Request, res: Response, next: NextFunction ) => {
  passport.authenticate( 'kakao', ( serr: Error, user: userDBWitoutpass, cerr: Error ) => {
    if ( serr ) {
      console.error( serr );
      res.redirect( 'http://localhost:3060/register' )
      return
    }
    if ( cerr ) {

      res.redirect( 'http://localhost:3060/register' )
      return
    }


    // passport 로그인 과정입니다. (/passport/index 의 serializeUser 실행됨)
    return req.login( user, async ( loginErr ) => {
      try {
        if ( loginErr ) {
          console.error( loginErr );
          return next( loginErr );
        }

        res.redirect( '/auth/kakao_success' )
        return

      } catch ( error ) {
        return next( error );
      }
    } )
  } )( req, res, next );
} );

회원정보가 없을 경우는 회원가입 칸으로 보내는건 문제가 없습니다.

그런데 회원정보가 있을경우 문제가 발생합니다. local 전략처럼 유저 정보 조회 후 보내고 싶은데 클라이언트 서버에서 a 태그로 요청했고 카카오 로그인 내부에서 리다이렉트가 몇번 일어나서 클라이언트 서버로 데이터 전송이 안됩니다.

혹시나 싶어 res.send(data) 하면 브라우저 상에 url은 카카오 관련 url로 되어있고 브라우저에 그냥 데이터가 띄워 집니다. 클라이언트 서버로 데이터를 전송하고싶은데 말이죠.

요약하자면 a태그를 통해 백엔드 서버의 라우터로 잘 들어가고 전략 설정한대로 처리도 잘되는데 반환할때 local 처럼 유저정보를 조회한 내용을 반환하고싶은데 방법을 잘 모르겠습니다. 혹시 도움을 주실 수 있으신가요

몇일 째 삽질중인데 방법을 못찾고 있습니다...

nodejs express redux react Next.js

답변 6

제로초(조현영)

지식공유자

이 부분은 제 노드교과서 강좌 코드 참고하시는 게 더 좋을 것 같습니다.

https://github.com/ZeroCho/nodejs-book/blob/master/ch9/9.5/nodebird/passport/kakaoStrategy.js

https://github.com/ZeroCho/nodejs-book/blob/master/ch9/9.5/nodebird/routes/auth.js

auth.js에서는 /auth/kakao랑 /auth/kakao/callback(redirect uri로 등록한 것) 보시면 됩니다.

제로초(조현영)

지식공유자

네 괜찮습니다. 다만 프론트 서버를 이용할 때도 세션쿠키가 잘 전달되게 하시면 됩니다.

제로초(조현영)

지식공유자

1. <a 태그></a>를 눌러서 백엔드주소/auth/kakao로 이동하면 카카오 로그인 창이 뜹니다.

2. 카카오 로그인 후 카카오가 백엔드주소/auth/kakao/callback으로 리다이렉트해줍니다. 여기서 kakaoStrategy가 실행된 후

3. https://github.com/ZeroCho/nodejs-book/blob/master/ch9/9.5/nodebird/routes/auth.js#L59

위 줄을

res.redirect('프론트주소/api/kakao?auth=익스프레스세션쿠키')

처럼 고치시고요. 이 때 백엔드에서는 세션쿠키가 심어져있으니 그 값을 리다이렉트 주소에 넣으면 됩니다.

4. 프론트 서버에서는 pages/api/kakao.js를 만들어두어야 합니다. API Routes라는 기능입니다. https://nextjs.org/docs/api-routes/introduction

5. 여기서

res.cookie('connect.sid', 익스프레스세션쿠키, { httpOnly: true });
res.redirect('로그인후보여질페이지');

이렇게 해서 프론트 서버에도 백엔드와 동일한 세션쿠키를 심고 프론트에서 한 번 더 리다이렉트해주면 됩니다. 참고로 프론트서버에서는 express 방식이 안 될 수 있습니다. 그 때는 그냥 노드에서 res.writeHead랑 res.end로 작성하셔야 합니다.

이우람

질문자

친절한 답변 너무 감사합니다! 며칠 묶은 체증이 확 내려갔네요

이우람

질문자

답변 감사합니다. 덕분에 해결을 하긴 했는데 약간 다르게 했습니다.

백엔드주소/auth/kakao/callback 안에 req.login을 넣어서 백엔드/passport/index.js 를 실행 시키도록 한뒤에

리다이렉트 시켜줬습니다. 이렇게 하니까 자연스럽게 쿠키가 생성되서 전달이 되고

클라이언트 서버에서 백엔드 서버로 호출할때 쿠키를 사용할 수 있게 되었습니다.

이렇게 해도 큰 상관은 없는건가요?

이우람

질문자

늦으시간에 친절한 답변 감사합니다.

코드를 살펴본결과 /auth/kakao/callback 에서 리다이렉트로 '/' 로 보내고 -> routes/page.js 경로에 에서 DB 조회후 ->

res.render('main' , ... ) 으로 views/main.html 로 데이터를 넘기는 방식을 취하는 것 같은데 이해한게 맞는지요.

이와 마찬가지로 클라이언트 서버의 특정 페이지를 하나 만들고 백엔드 서버로부터 데이터를 받고 처리해주는 로직을 만들면 되는 것일까요?

그러면 이때 res.send로는 클라이언트 서버로 데이터 보내기가 안되는 것같은데 그 방법을 알고 싶습니다.

기본적으로 클라이언트 서버에서 백엔트 서버 특정 라우터로 요청하고나면 백엔드 서버에서는 res.send로 데이터를 클라이언트 서버로 바로 전송할 수 있는데 위와같은 방법으로 하면 백엔드 서버에서 백엔드 서버로 리다이렉트 되서 res.send 한다고해서 클라이언트 서버로 데이터 전송이 안됩니다..

지금 그래서 계속 찾아보고있는게 res.send 시 새로운 url 지정하는 방법을 살펴보고있습니다.

또는 리다이렉트시에 데이터를 첨부하는법 같은 방향으로 살펴보고있습니다. 결국 백엔드 서버의 데이터를 클라이언트 서버로 보내고 싶은데 생각처럼 안됩니다.. ㅠㅠ

제가 만들고자 하는게 아래와 같은 형태에서

카카오 계정으로 로그인 하기 클릭하면 백엔드 서버에서 passport 처리 후 회원정보가 있으면 메인페이지, 아니면 회원가입 페이지로 넘어가는건데 회원정보가 있을 경우 제로초님께서 local 전략에서 썼던것 처럼 데이터를 첨부해서 보내고 싶습니다.

그런데 클라이언트서버에서 보내는 방식이 카카오 로그인의 경우는 <a 태그 이고 local은 saga로 하는데 <a 태그 방식을 쓰면 어떻게 데이터를 받을 수있는지 계속 고민 중입니다. ㅠㅠ

혹시 제가 착각하고 있는게 있는지 또 도움될만한 정보를 주시면 너무나도 감사하겠습니다.

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

다른 sns 로그인도 시도해보고있는데 잘안되네요...