소셜 플랫폼 기반의 로그인 연동을 하는 방법에 대한 개념 정리 입니다. :)
네이버나 카카오(다음)에서는 인증을 통해 로그인 기능을 지원 합니다.
이러한 기능은, 개발시 따로 로그인과 관련된 보안대책을 만들지 않아도 되기 때문에 편리하고 괜찮은 기능 입니다.
일반적으로 로그인과 관련된 기능은 REST-API 형식으로 이루어져 있습니다.
위 API 를 사용하는 단계를 살펴보면 크게 4단계로 이루어져 있습니다.
1. 개발자 계정(네이버, 카카오)에 가입합니다.
2. 연동하고자 하는 기능을 선택하고, 어플리케이션(웹) 주소를 입력 합니다.
3. 로그인 성공시 결과값을 받을 주소를 입력 합니다.
4. 로그인 화면을 사용 합니다.
1번부터 살펴보면,
내가 네이버에 대한 계정이 있다 하더라도 "네이버 개발자 센터" 라고 검색을 하면 개발과 관련된 사이트에 접속 할 수 있습니다.
마찬가지로, 카카오 같은 경우에도 "카카오 개발자 센터"라고 검색을 하면 동일한 형태의 사이트에 접속 가능 합니다.
이렇게 각각의 개발자 센터에서 가입을 하여 준 뒤에 "앱 만들기" 또는 "앱 등록" 같은 기능을 활용하여 자신의 웹(WEB) 어플리케이션을 등록 할 준비를 하여 줍니다.
어플리케이션을 등록하고 난 다음에 사용할 api를 선택 합니다.
여기까지가 1번에 대한 내용 입니다.
네이버, 카카오 api 전부 비슷한 형태로 되어 있습니다.
2번은 연동하고자 하는 기능선택 및 웹 주소를 입력하는 기능 입니다.
이렇게 내가 사용하고자 하는 기능과, 운용할 예정인 웹 주소를 등록하여 줍니다.
카카오도 마찬가지 입니다.
네이버가 카카오과 조금 다른 점은 "검수상태" 라는 것이 존재하여 개발전 까지는 등록된 주소에 대해서만 로그인을 지원하는 것 입니다.
그러므로 네이버에서는 개발단계에서는 "멤버관리" 라는 기능을 통하여 로그인을 할 웹주소를 따로 등록 해 주어야 합니다.
다음으로 3번입니다.
3번은 로그인이 성공하면 결과값을 받을 주소를 등록하는 부분 입니다.
네이버와 카카오 로그인은 해당 서비스에서 제공하는 주소로 이동하여 로그인 화면을 만나게 됩니다.
말이 어려우므로 아래 주소를 살펴 보겠습니다.
#카카오 로그인 페이지 이동 주소
https://kauth.kakao.com/oauth/authorize?client_id={개발자개정에서받은값}&redirect_uri={콜백주소}&response_type=code
#네이버 로그인 페이지 이동 주소
https://nid.naver.com/oauth2.0/authorize?response_type=code&client_id={개발자개정에서받은값}&redirect_uri={콜백주소}&state=state
위 웹주소처럼 카카오, 네이버 로그인과 관련된 웹 주소가 존재 합니다.
중괄호 안에 값을 개발자페이지에서 발급받은 정보를 채운 뒤에 해당 페이지로 이동을 해야만 로그인 페이지를 만날 수 있습니다.
그러면 실제 저러한 페이지를 어떻게 구현하는지 html 코드로 잠깐 살펴보겠습니다.
<div>
<a href="https://kauth.kakao.com/oauth/authorize?client_id={개발자개정에서받은값}&redirect_uri={콜백주소}&response_type=code">카카오 로그인 버튼</a>
<br>
<a href="https://nid.naver.com/oauth2.0/authorize?response_type=code&client_id={개발자개정에서받은값}&redirect_uri={콜백주소}&state=state">네이버 로그인 버튼</a>
</div>
위 코드가 바로 우리가 구현할 html에서의 로그인 페이지 모습입니다.
이렇게 하고나면 해당 a테그를 누르게 되면 각각의 로그인 페이지 화면으로 이동하게 됩니다.
아래 사진처럼 "카카오 로그인 버튼" 을 누르면 카카오 로그인 화면으로 이동하게 되고,
"네이버 로그인 버튼"을 누르면 네이버 로그인 화면으로 이동하게 됩니다.
화면에서 정보를 입력하여 로그인이 성공하면 3번에서 등록 하였던 콜백주소로 토큰(token)이라는 것을 받습니다.
해당 토큰은 1차 임시 토큰이라 합니다.
1차 임시 토큰을 활용하여 2차 토큰을 요청합니다.
2차 토큰은 내가 개발한 웹 어플리케이션에서 요청을 해야 합니다.
get이나 post방식으로 각각 정해진 규칙대로 아래 웹 주소로 2차토큰 값을 요청 해야 합니다.
#네이버 2차토큰 주소
https://nid.naver.com/oauth2.0/token?grant_type=authorization_code
#카카오 2차토큰 주소
https://kauth.kakao.com/oauth/token
아래 사진은 네이버, 카카오에서 2차토큰 생성시 필요한 파라미터 종류 입니다.
위 소개된 주소로 요청하여 2차로 토큰을 발급 받습니다.
발급 받은 토큰을 가지고 이제 개인정보와 관련된 REST-API로 사용자 정보를 달라고 한번 더 요청해야 합니다.
마찬가지로 get이나 post방식으로 각각 정해진 규칙대로 요청을 하면 됩니다.
요청한 결과가 올바르면 네이버, 카카오에서 사용자와 관련된 정보를 전달하여 줍니다.
공통적으로 사용자가 가지고 있는 고유 키값과 닉네임을 받을 수 있으며, 설정에 따라서 이메일 또는 핸드폰 번호도 받을수가 있습니다.
#네이버 사용자 정보 요청 주소
https://openapi.naver.com/v1/nid/me
#카카오 사용자 정보 요청 주소
https://kapi.kakao.com/v2/user/me
아래 사진은 사용자 정보를 가져오기 위한 파라미터 목록입니다.
네이버와 카카오 api에서는 발급받은 2차 토큰을 요청 헤더(header)에 값을 넣도록 되어 있습니다.
그러면 콜백에서 받은 정보를 토대로 사용자는 세션(session)에서 처리할지, JWT방식으로 처리할지 등 원하는 로그인 유지 방식을 선택하면 되는 것입니다.
카카오, 네이버 로그인 API는 이처럼 가입, 로그인화면, 콜백화면에서 할 행위 등으로 행동을 정의 하여 개발하면 쉽게 할 수 있습니다.
대부분의 데이터를 전송하는 방식이 가이드를 통해 살펴보면, get이나 post방식으로 쉽게 사용할 수 있게 되어 있습니다.
개념이 정리가 되고나면, 직접 구현을 하거나 아니면 구글링을 통해 잘 만들어진 소스코드를 활용하면 되겠습니다.
가끔 프론트(클라이언트)에서 요청하는 방법도 있긴 하지만 보안목적상 좋지 않으므로 가급적 백그라운드에서 구현하는 것이 좋다고 생각 됩니다. :)
아래 사진은 카카오 연동을 하는 경우를 예로들어 보았습니다!
이상으로 네이버, 카카오 로그인 api 연동 개념 정리를 하여 보았습니다.
궁금한점, 틀린점은 언제든 연락주세요! :)
'기타' 카테고리의 다른 글
| nginx를 활용하여 프록시(proxy) 구축 (2) | 2021.07.21 |
|---|---|
| 개발 블로그에 대해 문의와 답변 매너에 대해 (2) | 2021.05.26 |
| 개발 블로그 드래그 방지, 복사 방지 (2) | 2021.04.15 |
| 기초 위주 머신러닝 정리 -1 (Machine learning) (1) | 2021.01.28 |
| 기초 위주 머신러닝 정리 - 0(Machine learning) (0) | 2021.01.10 |
댓글