[소셜로그인] 네이버 로그인 구현하기 node js

 

 

 

네이버 소셜로그인 구현을 해보려고 한다.
네이버에서 로그인api 명세에 기본적인 코드가 들어있기는 하지만, 따로 코드가 무슨 의미인지 설명은 되어있지 않다. 그래서 이번에는 설명과 덧붙여서 네이버에서 나온 코드를 최소한으로 수정해서 네이버 로그인을 구현해보려고 한다.
https://developers.naver.com/docs/login/api/api.md
 
 
 
일단 나는 node.js에 나와있는 코드를 가지고 구현을 해보려고 한다.

 

---

 

필요한 npm 받기

해당 파일을 일단 나의 vsCode로 가지고 와서 실행 하기 위해서는 몇가지 기본적으로 필요한 npm들이 있다.
1. npm i express
2. npm i nodemon
3. npm i babel
4. npm i node-fetch@2 (node-fetch는 꼭 버전2로 다운을 받아야 함. 안그러면 오류가 남)
 
 
 
다시 코드를 작성하기 앞서서, 처음에 작성되어있는 소셜로그인 설명을 꼭 듣고 오길 바란다.
https://koreankoder.tistory.com/9

네이버,카카오,깃헙 소셜로그인 구현하기

 
 
 
 
 
 
여기에서 말했듯, 소셜 로그인은 총 3단계를 거쳐서 진행이 된다.

 

 

*사진의  저작권은 koreankoder에게 있으며 사진은 무단 사용을 금합니다*

 
 
 
그래서 나는 일부러 2단계, 3단계까지 단계별로 완성된 걸 확인할 수 있게 하기 위해서
package.json 에서  scripts를 2개 만들었다. 
 
 
 

**** 나는 단계별로 보여주기 위해서 (소셜로그인 구현 2단계, 3단계) 일부러 dev2, dev3으로 만들었다.

  "scripts": {

    "dev2": "nodemon --exec babel-node 2_Nlogin_accessToken.js",

    "dev3": "nodemon --exec babel-node 3_Nlogin_Final.js"

  },

 
 
 
 

---

 
 
 
네이버에서 제공해주는 node.js코드는 2단계까지 과정을 밟을 수 있게 작성해 놓은 파일이다. 
그래서, 여기에 있는 코드를 실행하면 내가 받는 결과는 access_token 이다.

 
위의 과정을 거치게 되면 내가 받게 되는 코드↓↓↓↓

 
 
 
 
그래서 3단계 코드를 작성을 해주어야 내가 원하는 회원 정보를 받을 수 있다.
남겨두는 깃 주소에서 해당 파일을 실행할때,
단계별로 실행을 해봐서 차이점을 확인해보면 좋을 것 같다. 
 
 
 

---

<2단계> access_token 발급받기

--> 여기까지 작동하는걸 확인하고 싶으면 <2_Nlogin_accessToken.js파일>확인 또는 npm run dev2 해보면 된다.
 
 
 
 
그런데,
네이버에 나와있는 코드 대로 작성을 하면 오류가 난다. 
 
원인: request 모듈 deprecated됨 -> 대신할 수 있는 npm을 써야함. 그래서 우리는node-fetch@2를 쓸것 임.
다시한번 말하지만 꼭!!! node-fetch@2 버전 2로 받아야 한다!!!! ( npm i node-fetch@2 )

 
 
그래서 2단계 부분을 수정해서 node-fetch로 코드를 사용하였다.
 
 
 
사용하는 모듈은 다르지만 역할은 비슷하다.
<왼쪽>node-fetch를 사용해서 코드 작성      <오른쪽> 원래 네이버에서 준 코드
 
노란색 - 데이터를 fetch해옴 , 초록색 - 화면에 보이게 내용을 띄워줌

 
 
 
 
그럼 여기까지 작성을 완료했을 경우 아래의 코드를 화면으로 받게 된다.
 

 
 
 
 
 

<3단계>사용자 정보 받기

 
이번에는 발급받은 access_token을 가지고 사용자 정보를 받아오는 과정을 거져보자.
바로 사진에서 보이는 이 단계.

*사진의&nbsp; 저작권은 koreankoder에게 있으며 사진은 무단 사용을 금합니다*

 
 
아래 코드를 추가해 준다. 네이버에 access_token을 주고 정보를 받아오는 단계이다.
이것도 똑같이 node-fetch를 사용해서 오고, 방법은 동일하다.
 
그런데, 이 부분은 네이버에서 따로 주소와 함께 방법을 안내해 주고 있다.
 
 
 
<네이버 develpoers 참고> 3.4.5 접근 토큰을 이용하여 프로필 API 호출하기
주소: https://developers.naver.com/docs/login/devguide/devguide.md
 

이 주소를 들어가보면, access_token을 발급 받은 후에 아래 api로 post 메서드로 접속하면 된다고 나와있다.

 
 
 
 
여기에 가면 상세하게 Authorization을 어떤식으로 주어야 하는지 설명을 해준다. 

 
 
잘 보면, 요청문을 보낼 때 Authorization: Bearer 코드내용 이렇게 보내라고 알려주었다. 
그러니 우리도 보낼때 headers에서 Authorization을 위에와 동일하게 만들어 주어서 보내면 된다.

 
 
 
 
 
여기서, 작성한 코드를 node-fetch와 비교해서 보면,
fetch 해오는 주소만 변경되었을 뿐, 원리는 동일하다는걸 알 수 있다.

 
실행 해보면 결과가 콘솔로 받아지는걸 볼 수 있다.

---

<깃헙 주소>
 
https://github.com/2425sja/socialLogin

 

깃주소에서 clone 받아서 보면 된다.  README.md에 설명을 적어두었다.
 
 
클론받기 git clone
모듈 받기 npm install
 
* 2단계 실행: npm run dev2
* 3단계 실행: npm run dev3
 
 
 
하면 된다.

---

 
 
기본 원리 설명은 아래 강의 참고
https://koreankoder.tistory.com/9

네이버,카카오,깃헙 소셜로그인 구현하기