소셜 로그인 - naver oauth 구현

 

 

0. 들어가며

 오늘은 최근 수강중인 패스트캠퍼스 node.js 강의 내용 중 google ouath 구현에 대학 학습 내용을 바탕으로 naver ouath를 구현해보고자 한다. session을 이용한 로그인은 왜인지 나에게 너무 어렵게 느껴져 글로 남겨두고 계속해서 보는 편이 나을 것 같아 이렇게 써본다 ,,,🥹🥹

 

구현은 다음의 그림과 같이 클라이언트 측에서 인가코드를 발급받으면 이후 처리는 서버에서 처리하도록 구현했다.

 

 

1. NAVER OPEN API 이용 신청

우선, 아래의 링크에 들어가 네이버 로그인을 한 후, OPEN API 이용 신청을 누른다.

https://developers.naver.com/docs/login/api/api.md

네이버 로그인 API 명세 - LOGIN

 

 

내가 사용하고자 하는 애플리케이션을 등록하고, 알맞게 정보를 채운다.

 

 

모든 정보를 등록하고 나면, 해당 어플리케이션에 대한 client id와 client secret을 발급 받을 수 있다.

 

 

 

2. Naver Oauth 구현

우선, 네이버에서 제공하고 있는 passport-naver가 있지만 해당 라이브러리는 개발 이후로 업데이트 되지 않았기 때문에 다른 블로그에서 직접 개발하신 v2 모듈을 사용했다.

https://github.com/parkoon/passport-naver-v2 

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

 

 

 

앞서 작성한 서비스 URL과 callback URL을 알맞게 작성한다.

나는 router 파일에서 경로들을 관리하기 때문에 app 대신 해당 파일에서 사용하는 변수인 usersRouter를 사용했다.

 

 

이 코드는 네이버 로그인 기능을 구현한 부분이다. NaverStrategy 설정으로 네이버 API 연동을 준비하고, 로그인 성공 시 사용자 정보를 받아 처리한다. 받은 이메일로 데이터베이스에서 사용자를 찾고, 있으면 그 정보를 반환하고 없으면 새 계정을 만든다. 새 계정 생성 시 네이버에서 받은 이름과 이메일만 실제 정보로 사용하고 나머지는 임시값으로 설정한다.

 

 

 

앞서 작성한 링크로 들어가면 다음의 로그인 화면을 볼 수 있다.

 

 

로그인 성공 시 보이는 화면이다.

 

 

 

 

3. 마치며

다음에는 다른 소셜들도 연결해봐야지 !!!!