[NODE] 📚 네이버 로그인 (passport-naver-v2) ✈️ 구현

네이버 로그인 OAuth 신청

NAVER Developers

 

1. callbackURL 및 네이버로 요청할 정보(scope) 설정하기

 

2. 등록을 완료하면 해당 클라이언트 아이디와 비번 정보가 나온다.

 

다만, 아직 정식으로 등록된 것이 아니라서, 개발 중 상태가 되는데

 

네이버 검수요청을 통해 정식적으로 네이버 인증 애플리케이션을 등록하던지,

아니면 단순히 공부용이라면, 멤버관리 탭에서 테스트 로 이용할 다른 네이버 아이디를 등록하면 된다.

참고로 관리자 아이디는 따로 등록할 필요는 없다.

---

네이버 로그인 라우터 전략 구현

 

passport-naver-v2

passport oauth2 에 naver 로그인 연동 최신 라이브러리다.

이미 네이버에서 구현한 passport-naver 가 있지만, 5~6년 전에 개발 이후로 더 이상 진전이 없고, 프로필 데이터도 한정적으로 제공하고 있어서 새로 개인이 개발한 모듈이다.

$ npm install passport-naver-v2

GitHub - parkoon/passport-naver-v2: Naver oauth2 passport login

 

모듈을 설치했다면, .env파일에 위에서 발급한 client id와 비밀번호를 환경변수 등록을 해준다.

---

routes/auth.js

• naver OAuth경로 설정

//* 네이버로 로그인하기 라우터 ***********************
router.get('/naver', passport.authenticate('naver', { authType: 'reprompt' }));

//? 위에서 네이버 서버 로그인이 되면, 네이버 redirect url 설정에 따라 이쪽 라우터로 오게 된다.
router.get(
   '/naver/callback',
   //? 그리고 passport 로그인 전략에 의해 naverStrategy로 가서 카카오계정 정보와 DB를 비교해서 회원가입시키거나 로그인 처리하게 한다.
   passport.authenticate('naver', { failureRedirect: '/' }),
   (req, res) => {
      res.redirect('/');
   },
);

 

 

passport/naverStrategy.js

• 네이버 로그인 전략

const passport = require('passport');
const { Strategy: NaverStrategy, Profile: NaverProfile } = require('passport-naver-v2');

const User = require('../models/user');

module.exports = () => {
   passport.use(
      new NaverStrategy(
         {
            clientID: process.env.NAVER_ID,
            clientSecret: process.env.NAVER_SECRET,
            callbackURL: '/auth/naver/callback',
         },
         async (accessToken, refreshToken, profile, done) => {
            console.log('naver profile : ', profile);
            try {
               const exUser = await User.findOne({
                  // 네이버 플랫폼에서 로그인 했고 & snsId필드에 네이버 아이디가 일치할경우
                  where: { snsId: profile.id, provider: 'naver' },
               });
               // 이미 가입된 네이버 프로필이면 성공
               if (exUser) {
                  done(null, exUser);
               } else {
                  // 가입되지 않는 유저면 회원가입 시키고 로그인을 시킨다
                  const newUser = await User.create({
                     email: profile.email,
                     nick: profile.name,
                     snsId: profile.id,
                     provider: 'naver',
                  });
                  done(null, newUser);
               }
            } catch (error) {
               console.error(error);
               done(error);
            }
         },
      ),
   );
};

 

 

passport/index.js

• naverStrategy.js 등록

const passport = require('passport');
const local = require('./localStrategy'); // 로컬서버로 로그인할때
const naver = require('./naverStrategy'); // 네이버서버로 로그인할때

const User = require('../models/user');

module.exports = () => {
  passport.serializeUser((user, done) => {
      done(null, user.id);
   });

  passport.deserializeUser((id, done) => {
      User.findOne({ where: { id } })
         .then(user => done(null, user))
         .catch(err => done(err));
   });

   local();
   naver(); // 네이버 전략 등록
};

---

passport-naver-v2 - authType 파라미터

//* 네이버로 로그인하기 라우터 ***********************
router.get('/naver', passport.authenticate('naver', { authType: 'reprompt' }));

네이버는 필수정보 항목에 체크를 하지 않아도 로그인이 된다.
필수 항목 또한 사용자가 선택할 수 있다는데, 그럼 선택이랑 다를게 없어 보이는데 왜 그랬는지 알 수 없다.

이 부분은 서비스를 개발할 때 문제가 된다. 이메일을 통해 서비스에 회원가입을 하는 로직이 있다면 서비스 서버에서는 오류를 내뱉을 것이다.

따라서 필수임에도 동의 체크를 하지 않고 들어온 고객에 한하여 다시 동의창을 보여주는게 이상적으로 보인다.

이 옵션을 이용하면, 사용자가 서비스 이용을 끊지 않고도 다시 동의창을 호출 할 수 있다.

reprompt 말고도 reauthenticate 옵션도 있다. 
reauthenticate는 동의창이 아닌 아이디 / 패스워드 입력부터 시작한다.

---

네이버 인증 프로필 모델 정보

key	value	optional	description
provider	String	X	naver 고정값
id	String	X	사용자의 naver id
nickname	String	O	사용자의 닉네임
profileImage	String	O	사용자의 프로필 이미지
age	String	O	사용자의 나이 (ex, '28-29')
gender	String	O	사용자의 성별 (ex, 'F' 또는 'M')
email	String	O	사용자의 이메일
mobile	String	O	사용자의 전화번호
mobileE164	String	O	사용자의 전화번호 (국가번호 포함)
name	String	O	사용자의 이름
birthday	String	O	사용자의 생년월일
birthYear	String	O	사용자의 생년
_raw	String	O	프로필 조회로 얻어진 json string
_json	Object	O	프로필 조회로 얻어진 json 원본 데이터