[TIL] 2024.02.08 sparpet~

오늘 한 일

• 팀프로젝트 sparpet DB 연동 해결
• passport-naver 팀프로젝트 socailLogin 브랜치에 적용시키기
• insomnia 테스트
• git commit

1. DB연동 문제

DB 연동에서 네트워크 오류가 계속 떴다.

이유는 내가 DB AddConnection을 잘 못 입력했음.

그러니 DB AddConnection 하는 과정을 다시 정리해보자.

 

 

MYSQL + 버튼을 누르면 Add Connection이 뜨고 
상단에 Connection할 DB 엔드포인트부터 포트번호까지 입력할 수 있다.

host = 엔드포인트 
ex) xxxxxx-database.xxxxxxxx2.ap-xxxxxx-2.rds.amazonaws.com

user = 내가 설정했던 ID
ex) root

passoword = 내가 설정한 비밀번호
ex) qwer1234

port = 내가 설정한 포트
ex) 3306

 

순으로 입력해주면된다.

 

2. passport-naver console.log() 안찍히는 문제

passport.use(new NaverStrategy({

    clientID: client_id,

    clientSecret: client_secret,

    callbackURL: callback_url

    // @todo Suggest to use `state` parameter?

}, function(accessToken, refreshToken, profile, done) {

    console.log("naver profile", accessToken, refreshToken, profile);

    process.nextTick(function () {

        // @todo Remove necessary comment

        //console.log("profile=");

        //console.log(profile);

        // data to be saved in DB

        user = {

            name: profile.displayName,

            email: profile.emails[0].value,

            username: profile.displayName,

            provider: 'naver',

            naver: profile._json

        };

        // console.log("user=");

        // console.log(user);

        return done(null, profile);

    });

}));

 

   console.log("naver profile", accessToken, refreshToken, profile);

이렇게 사용하면 터미널에 log가 찍힐 줄 알았는데 데이터가 넘어오질 않았다.

 

문제는 콜백 경로에 있었다.

var callback_url = 'http://localhost:3000';

이라고 되어있었는데,

var callback_url =  'http://localhost:3000/auth/naver/callback';

이렇게 수정해주고, 개발자 홈페이지도 똑같이 적용해주면된다.

/auth/naver/callback 으로 정의해준 이유는

기본값으로 네이버 OAuth 콜백 라우트가 정의해주는 경로이기 때문이다. 

 

경로 수정 후 데이터가 넘어와짐

 

 

3. passport-naver 팀프로젝트 socailLogin 브랜치에 적용시키기

나는 따로 passport.js를 파지 않고

로그인을 진행하는 user.router.js에 네이버 로그인을 구현하였다.

// naver 로그인 연동

const clientID = process.env.CLIENT_ID;
const clientSecret = process.env.CLIENT_SECRET;
const callbackURL = process.env.CALLBACK_URL

passport.use(new naverStrategy({
  clientID,
  clientSecret,
  callbackURL
}, async (accessToken, refreshToken, profile, done) => {
  try{  
    const naverId = profile.id;
    const naverEmail = profile.email[0].value;
    const naverDisplayName = profile.displayname;
    // const provider = 'naver',
    // const naver = profile._json
  
  const newUser = await prisma.users.create({
    data: {
      id: naverId,
      email: naverEmail,
      name: naverDisplayName,
    }
  });
  
  done(null, newUser);

  } catch (error){
    console.error('Error creating user: ', error);
    done(error, null);
  }

  passport.serializeUser(function(user, done) {
    done(null, user);
  });
  
  passport.deserializeUser(function(req, user, done) {
    req.session.sid = user.name;
    console.log("Session Check" +req.session.sid);
    done(null, user);
  });

}));
// function(accessToken, refreshToken, profile, done) {
//   console.log("naver profile", accessToken, refreshToken, profile);
//   User.findOne({
//       'naver.id': profile.id
//   }, function(err, user) {
//       if (!user) {
//           user = new user({
//               name: profile.displayName,
//               email: profile.emails[0].value,
//               username: profile.displayName,
//               provider: 'naver',
//               naver: profile._json
//           });
//           user.save(function(err) {
//               if (err) console.log(err);
//               return done(err, user);
//           });
//       } else {
//           return done(err, user);
//       }
//   });
// }
// ));



export default router;

 

예제 코드를 가져와 프로젝트에 적용 가능하게 커스텀했다.

아직 DB에 naver 정보를 저장하게끔 만들지는 않았다.

나도 현재 어떻게 저장할지 구상이 끝나지 않았고,

섣불리 prisma에 컬럼을 추가하고 db push를 해버리면

기존에 개발중인 팀원들이 테스트를하다가 난처할 수 있기 때문에

구상이 끝나고 적용 시킬 예정이다.

 

4. insomnia 환경에서 naver login 테스트

localhost:3001/auth/naver get요청

로그인 완료

데이터 확인

 

5. git commit