네이버,카카오,깃헙 소셜로그인 구현하기 1(원리편)

네이버 소셜로그인을 구현하는 사람들에게 도움이 되길 바라며 쓰는 글.
 
일단 소셜 로그인을 할때 어떤 원리로 이루어지는지 알아야 하는데, 다들 코드만 설명해주기 바쁘고 아무도 어떤 원리로 이루어지는지 알려주는 곳이 없었다.(내가 못찾은거일수도 있다.....)
 
그래서 내가 며칠동안 고생하면서 소셜로그인을 구현하면서
아 이게 이런 의미구나. 이 코드가 이래서 필요하구나. 이런 원리구나. 깨달은 것들을 적어보려 한다. 진짜 누가 이거 이렇게 처음에 설명만 해줬으면 내가 소셜로그인때문에 헤메는 시간이 반은 줄었을것이다................(하...)
 
일단 여러개 구현한 코드를 공유하기 앞서서, 소셜로그인으로 한국에서는 제일 많이 쓰이는 "네이버"를 예로 들어서 전체적인 코드 원리를 설명하려고 한다.
소셜로그인의 대표로 여기에서는 네이버이지만, 대부분 다 비슷한 원리이다. (나중에 깃헙, 카카오 로그인도 되면 따로 글을 작성해볼 예정.)
 
일단 내가 여름옷 쇼핑몰을 만들었다고 치자. 그리고 사이트 주소를 summercloth.com라고 가정할 예정.

---

첫번째 단계, 내 쇼핑몰사이트 ↔ 네이버 사이에 소셜로그인 협약 맺기

소셜로그인 사이트(네이버, 카카오, 깃헙 등)에  접속해서 서비스 이용 신청.
 
 
내가 소셜로그인 서비스를 이용하고 싶다면,
먼저 네이버에 가서 "저 이 서비스 이용하고 싶어요" 라고 요청을 해야 한다.
 
그렇다면 처음에 이용 신청을 할때 해야 할 일이 몇개가 있다. 내가 협약(?)을 맺을 때 해야 할일은
 
① '우리 사이트에서 보낼 주소'가 뭔지 알려주기
     (예) 우리 쇼핑몰에서 summercloth.com/naverlogin
           이 주소로 네이버에 요청을 보낼거야.
     라고 어떤 주소로 사람들이 네이버에 접속하게 해줄건지 보낼주소를 설정해주어야 한다.
 

 
 
 
 
두번째는 정보를 받아야 하니까
② 네이버에서 "고객정보를 받을 정보 주소"를 설정을 해야 한다.(callback)
이게 바로 네이버 로그인 오픈 API 서비스 환경을 설정하는 것.
 

 
 
 
 
 
 
이렇게 설정을 하면, 네이버에서도 우리에게 2가지 정보를 준다.
③Client_id  ④Client_secret
 

 
 
 
한마디로 요약해보면 이런거다.
 
나: 소셜로그인 서비스 이용할래
(우리 사이트에서 네이버에 보낼주소 / 정보 받을 주소 입력 )
 
네이버:  "그럼 이용할때 아이디랑 키 줄게" (client_id, Client_secret)

 
 
 

---

 
이렇게 기본 세팅을 해주면, 이제 그 후에 네이버와 내 쇼핑몰 사이에 어떤 일이 일어나는지 알아보자.
 
 

두번째 단계, 사용자가 개인정보 승인

사용자가 내 쇼핑몰에 가입을 하려고 한다.
 
 
직접 회원가입을 하면
내 쇼핑몰에서 사용자 정보를 직접 받아서 --> 우리 DB에 저장
이런 순서라면
 
 
네이버 로그인시
네이버 로그인 클릭 --> 사용자가 네이버에서 정보제공 동의
--> 네이버가 정보를 보내 줌 --> 우리 DB에 저장
이런 식으로 흘러간다.
 

---

 
 
자, 그럼 사용자가 네이버 로그인을 누르는 순간 무슨 일이 일어나는지 자세히 알아 보자.
 
네이버 로그인을 누르면 사용자는 redirect된다.
①우리 사이트에서 보낼 주소 + ③client_id + ④client_secret  정보가 조합된 주소로 redirect됨.

 
여기에서 핵심은 ①번의 주소로 사용자가 직접 redirect 된다는 것이다.
그래서 사용자가 직접 승인을 하고 나면,  네이버가 우리 쇼핑몰에 코드를 준다.
 

---

 
그럼 이제 사용자 정보를 줘야 하는데, 네이버는 우리에게 어떤 주소로 주는가?
바로 우리가 설정했던 ② 정보 받을 주소 를 통해서 준다.

 
 
이건  바로 callback URL로 우리가 입력을 해두었던것임.

 
 

---

 

여기서 의문점 하나, 네이버는 어떻게 정보를 줄까?
 

callback주소에 쿼리 "코딩하는 한국인, 30대, 서울거주" 라고 사용자의 정보를 주면 모든 사람이 정보를 볼수 있기 때문에 위험하다. 그렇기 때문에 네이버에서는 정보를 줄때 사용자 정보를 바로 주는게 아니라, "코드"를 보내준다.
 
처음에 내가 설정한 callback주소에 쿼리로 "코드"를 보내줘서 사용자가 승인한 정보를 보내주는것.
summercloth.com/callabck?code='djdkfjeongdjsldk' 이런식으로 콜백 주소 뒤에 쿼리로  코드를 보내준다.
내가 설정한 콜백주소 ?code='사용자정보승인코드'
 
이런식으로 나에게 정보가 오는것.
 

 
 
 
그럼 이 코드로 뭘 할수 있느냐,  앞으로 코드를 A정보 라고 칭하겠다.
 

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

 
 
 
이제 이 코드(A정보)를 받았으니, 우리가 네이버에 직접 접속해서
"사용자가 승인했다는 코드 여기있어. 우리 이 사람 정보 줘" 라고 직접 요청을 해야 한다.
 

---

 

네이버에서 정보를 받아올때는 두가지 단계를 거친다.
 
① N토큰 발급주소접속:
A정보 줌 ==> "access_token" 발급
 
② N사용자 정보요청 주소접속:
access_token 줌 ==> 사용자 정보 줌
 

---

 

세번째 단계, access_token 발급받기

 
 
이 전까지는 사용자가 네이버에 직접 요청한거였다면, 여기서부터는 쇼핑몰이 네이버에 요청하는 과정이다. 
 
 
 N토큰발급 주소로가서  A정보 + ③ client_id + ④ client_secret 전달

 
 

---

 

네번째 단계, 사용자 정보받기

 
정보가 모두 맞으면 네이버에서 access_token을 발급해준다.

 
 
 
이제 이 access_token정보를 B정보라고 부를것임.
 
 
이제 이 access_token 정보를 가지고, N사용자 정보요청 주소접속로 가서 B정보 전달
(B정보는 header로 숨겨진채 보내진다)

 
 
그럼 이제 사용자 정보를 받게 되고, 이걸 DB에 저장하면 된다.

---

 
(사용자가 할일)
사용자 동의 ->  A코드 발급받음
(쇼핑몰 사이트에서 할일)
->  A코드를 네이버에 전달 ->  토큰 발급해줌-> 토큰 주고 정보 달라고 함-> 맞으면 정보 줌
 
전체적인 그림은 아래와 같다.

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

 

■■■ 유튜브에서 설명 보기 ■■■
https://youtu.be/QWjl49py7PM

 

 

네이버 로그인 코드 
https://koreankoder.tistory.com/14

소셜로그인 - 네이버 로그인 구현하기