확장에 유연한 OAuth20 로그인 구현(카카오, 네이버, 구글 등) (Security 사용 X)

확장에 민첩한 OAuth20 로그인 구현(카카오, 네이버, 구글 등) (Security 사용 X)

OAuth의 개념에 대해서는 이미 많은 블로그들에서 다루고 있으므로 저는 이에 대해서는 따로 다루지 않겠습니다. 이 글에서는 적어도 제가 살펴보았던 대부분의 블로그에서 모호하게 설명되어있는 프론트엔드와 백엔드의 역할과, 실제로 어떠한 방식으로 구현하는지를 집중적으로 다뤄보도록 하겠습니다. 또한 이 과정에서 단순히 구현하고 끝나는 것이 아니라 새로운 다른 업체 플랫폼을 추가하는 과정도 간단하게 처리할 수 있도록 유연하고 증대 가능한 구조를 가져가는 코드를 작성해보도록 하겠습니다.

소스 코드는 아래 Repository에서 확인해볼 수 있습니다.

KakaoRedirectPagjs

이는 카카오 인증 서버에 의해 리다이렉트되는 페이지로, 리다이렉트 되는 함께 쿼리 파라미터로 code가 함께 전달되는데요, 이를 추출하여 백엔드 서버에 함께 전달합니다. 원래는 AccessToken등을 백엔드 서버로부터 받겠지만, 여기서는 코드가 너무 길어지기때문에 단순 Id를 반환하는 것으로 타협하겠습니다. 분명한 동작 과정은 백엔드 코드까지 작성한 뒤 살펴보겠습니다.

카카오 Developers에 애플리케이션 등록

Kakao Developers에 접속합니다. 내 애플리케이션을 클릭합니다. 애플리케이션 추가하기를 클릭합니다. 앱 이름과 사업자명을 입력합니다. 앱 설정 요약 정보 화면에 보이는 REST API 키 를 어디엔가 적어두세요 해당 키를 clientid라고 부릅니다. 저는 이제부터 이를 mallangkakaoclientid 로 가정하고 진행하겠습니다. 생각해보니 어차피 노출되는 값이라 굳이 가릴 필요는 없었네용. 제품 설정 카카오 로그인으로 이동하여 활성화 상황을 OFF 에서 ON으로 바꿔줍니다.

Redirect URI를 프론트엔드로 설정하기

이 방법을 활용하는 플로우는 다음과 같습니다. 즉 이 방법의 특징은 다음과 같습니다. 이제부터 해당 방법을 통해 회원가입 로그인을 진행되는 코드를 작성해 보도록 하겠습니다. 프론트엔드를 고생시킬 수 있어요. 인증 정보토큰, 세션을 여러 방법Query String, Header, Body으로 전달할 수 있어요. 안드로이드와 같이 Redirect 할 수 없는 모바일 환경에서도 사용할 수 있어요.

첫번째 제일 쉬운 카카오부터 시작하도록 하겠습니다.

실현하는 방법

OAuth2.0 을 통한 로그인을 실현하는 방법은 크게 Redirect URI를 백엔드로 정립하는 방법과,프론트엔드로 정립하는 방식으로 나뉩니다. 각각의 방식으로 구현했을 때 장점과 한계점에 관하여 설명하고, 이들 중 프론트엔드로 Redirect URI를 정립하는 방법에 관하여 알아보겠습니다. 이럴때 모든 여건에서 회원가입 로그인을 한다는 가정을 통해 장점과 단점을 분석해 보도록 하겠습니다. 회원가입 플로우는 위 그림과 동일합니다.

OauthController

한번 테스트 해보도록 하겠습니다. httplocalhost3000으로 이동합니다. 버튼을 누르고 진행합니다. 계속 진행합니다. Auth Code를 잘 받아오는 것 까지는 이전에 확인했습니다. 확인을 누르고 서버 로그를 보시면 다음과 같습니다. 회원가입이 아주 잘 되는 것을 확인했습니다. 이렇게 해서 카카오톡 로그인 구현이 완료되었습니다. 카카오 로그인만 할 거였으면 이렇게까지 코드를 짜지는 않았을겁니다.

포스팅의 제목과 같이 확장성 있도록 실현하는 것이 이번 포스팅의 목적이었는데, 이렇게 끝내면 안되겠죠?? 좀 길어지지만 네이버만 후딱 추가하고 끝내도록 하겠습니다.

웨일 브라우저 네이버로 시작페이지 설정 방법

크롬이랑 크게 차이 나지 않고 비슷한 방식으로 설정이 가능합니다. 비슷하게 웨일 우측 상단 점 3개 아이콘을 클릭하고 설정톱니바퀴 모양에 들어갑니다. 설정 화면에서 왼편에 기초 메뉴를 고르고 오른편에 시작페이지 항목을 보시면 종료할 때 열려 있던 모든 페이지, 새 탭, 홈페이지, 특정 페이지가 있습니다. 이중에 특정 페이지를 선택합니다. 그리고 아래쪽에 새 탭 항목에 보시면 네이버를 새 탭으로 사용 부분이 있었으나 우측에 있는 버튼을 활성화시켜주면 웨일에서 새 탭을 실행할 때마다.

네이버로 시작페이지가 연결 설정됩니다. 새 페이지 추가를 클릭합니다. 홈페이지 URL에 네이버 주소를 입력하고 추가 버튼을 클릭합니다. 비슷하게 점 3개 모양을 터치해서 수정/삭제를 해줄 수 있습니다. 단순한 방식으로 웨일이나 크롬 시작페이지 설정 변경을 해줄 수 있으니 필요시 활용해보시길 바랍니다.

자주 묻는 질문