현재 크래프톤 정글 나만무 과정에서 프로젝트 상에서 카카오 로그인 기능을 구현하기 위해서 관련 내용들을 찾아보고 공부중이며, 이 과정중에서 내가 스스로 다시 찾아와서 볼만하도록, 그리고 팀원들이 필요할 시에 본 글을 참고해서 다른 프로젝트 진행시에 활용할 수 있도록 하고자 이 글을 작성한다.
이 글의 내용은 카카오 로그인을 구현하기 위해서 찾아보는 내용들중에서 공부하다보니 기록해두고 다시 보면 좋을 내용들, 그리고 관련 기술들에 대한 참고 자료들, 그리고 실질적으로 구현을 어떤식으로 해야할지 참고할 만한 자료들, 그리고 그것들을 모두 참고해서 실질적으로 구현해가는 과정에 대한 기록들이 될 것이다.
단순하게 쉽게 따라하면 카카오 로그인이 구현되는 형태의 글은 아니니 만약 그러한 글을 찾는다면 다른 글을 찾길 바란다.
가장 먼저 카카오 로그인 기능을 구현하기 위해서 필요한 모든 정보는
https://developers.kakao.com/docs/latest/ko/kakaologin/common#oidc
Kakao Developers
카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.
developers.kakao.com
위에 첨부해놓은 kakao developers 사이트에 모두 나와있다.
이 사이트에 들어가서 가장 왼쪽에 있는 목차를 볼때,
카카오 로그인 목록에 해당하는 이해하기와 설정하기를 보면 이 로그인 시스템에 대한 이해를 돕기 위한 자료들과 설정하는 하는 방법들에 대해서 알 수 있다.
'이해하기' 페이지를 들어가면 위와 같은 내용을 통해서 카카오 로그인이 무엇을 위한 서비스인지에 대해서 알 수 있다.
'Oauth 2.0 기반의 소셜 로그인 서비스' 라는 얘기가 있는데, 여기서부터 Oauth 2.0에 대한 관련 자료들을 첨부하겠다.
* gpt를 통해 검색해본 Oauth*
위와 같은 내용을 얻을 수 있었는데, 이렇게만 봐서는 쉽게 이해가 가지 않을 수 있다.
Oauth와 관련된 내용에 대한 학습은,
https://www.youtube.com/playlist?list=PLuHgQVnccGMA4guyznDlykFJh28_R08Q-
WEB2-OAuth
www.youtube.com
유튜브 채널 '생활코딩'에 있는 OAuth 2.0에 대한 영상을 보길 추천한다.
위의 영상에서 초반에는
Resource server와 Authorization Server에 대해서 완벽하게 구분짓고 설명을 시작하지는 않지만, 개략적으로 어떤 형태로 OAuth 2.0을 통해서 다른 서비스에 인증과 권한 부여를 하는지에 대해서 이해할 수 있을 것이다.
그리고
OAuth 2.0 — OAuth
OAuth 2.0 OAuth 2.0 is the industry-standard protocol for authorization. OAuth 2.0 focuses on client developer simplicity while providing specific authorization flows for web applications, desktop applications, mobile phones, and living room devices. This
oauth.net
위 사이트를 통해서 Oauth 2.0에 대한 다양한 정보들을 볼 수 있고,
이 페이지를 통해서 들어가게 되는
https://datatracker.ietf.org/doc/html/rfc6749#section-1.4
RFC 6749: The OAuth 2.0 Authorization Framework
The OAuth 2.0 authorization framework enables a third-party application to obtain limited access to an HTTP service, either on behalf of a resource owner by orchestrating an approval interaction between the resource owner and the HTTP service, or by allowi
datatracker.ietf.org
위의 페이지를 통해 OAuth 2.0에 대한 공식적인 스펙을 확인할 수 있는 IETF에서 제공하는 RFC 6749 문서를 참고할 수 있다.
RFC 6749 문서를 보다보면 위와 같은 내용에 대해서 볼 수 있는데, 이 그림이 실질적으로 Resource Server와 Authorization Server를 나눠놓은 형태에서 Client와 OAuth 2.0을 기반으로 user에 대한 정보를 주고받을 수 있는 상태로 만드는 과정에 대해서 설명해주는 내용이다.
user까지 포함한 상관 관계도를 보자면, user와 client와, 그리고 Resource & Authorization Server 의 연관 관계는,
공식 스펙 문서에서 찾을 수 있는 위와 같은 4.1 부분에서 대략적인 도표를 통해서 확인할 수 있다.
OAuth 을 이용한 카카오 로그인 과정에서 이해해야 할 과정 두가지를 거론해보자면,
일단 authorization code를 부여하는 것, 그와 관련된 '생활코딩' 강의에서의 이미지를 첨부해보면
위와 같다. Resource Owner를 통해서 authorization code를 client에게 주게 된다.
그리고 아래와 같은 과정을 통해서 AccessToken 을 부여해준다. 결국 가장 핵심은 client(카카오 로그인을 구현하고 싶은 내 웹 서비스)가 AccessToken을 부여받는 것이다.
이제 이 AccessToken 을 통해서 scope에 해당하는 범위에 내에서 Resource Server를 통해서 Resource를 얻을 수 있을것이다.
이때, '생활코딩' 유튜브 영상에서는 지속적으로 URIs 영역을 URL(유알엘) 이라고 읽는데, 실질적으로 U R I(아이) 로 작성되있는 영역이고, 이때에 카카오 디벨로퍼스 사이트에서도 지속적으로 Redirect URI 라고 작성되어 있는 부분을 볼 수 있다.
URL의 위키피디아 페이지를 보면,
https://ko.wikipedia.org/wiki/URL
URL - 위키백과, 우리 모두의 백과사전
위키백과, 우리 모두의 백과사전. URL(Uniform Resource Locator 또는 통칭 web address, 문화어: 파일식별자, 유일자원지시기)은 네트워크 상에서 자원이 어디 있는지를 알려주기 위한 규약이다. 즉, 컴퓨터
ko.wikipedia.org
위와 같은 내용을 통해 알수있는 내용으로, URI(아이)는 URL과 URN에서 추천되는 방식을 고려하여 설계된 상위 개념이다.
이와 같은 정보들을 얻을 수 있었다.
이처럼 URI 는 URL과 URN을 합친 개념이고 카카오 로그인 사이트에서 지속적으로 보게 되는
Redirect URI 는 위에 설명된 URN과 URL을 합친 URI을 의미한다.
더 자세한 URI에 대한 정보는
https://datatracker.ietf.org/doc/html/rfc3986#section-1
RFC 3986: Uniform Resource Identifier (URI): Generic Syntax
A Uniform Resource Identifier (URI) is a compact sequence of characters that identifies an abstract or physical resource. This specification defines the generic URI syntax and a process for resolving URI references that might be in relative form, along wit
datatracker.ietf.org
이 문서를 참고해보자.
========================================================================================
'크래프톤 정글 > 웹' 카테고리의 다른 글
| 카카오에서 제공해준 카카오 로그인 node.js REST API 예시 코드 (0) | 2023.08.02 |
|---|---|
| filter() 메서드를 이용해서 객체를 걸러내는 방법에 대해서. (0) | 2023.08.01 |
| req.body를 사용하기 위해서 등록하는 express.json()와 express.urlencoded({extended:false}); (0) | 2023.08.01 |
| web server와 was. 프론트엔드 서버와 백엔드 서버라고 하는 표현이 잘못된 표현이라는 나의 생각에 관한 글. (0) | 2023.07.31 |
| 리액트를 활용한 예제안들을 볼때, 프론트 서버를 동작하는것과 백엔드 서버를 동작하는것 과 같은 형태에 대해서 궁금했던 부분에 대해서 알게된 내용들. (0) | 2023.07.31 |
