스프링 시큐리티 OAuth2 구글 로그인 API 연동하기

스프링 시큐리티 OAuth2 구글 로그인 API 연동하기

시스템에서 사용자를 식별하여, 시스템에 접근하거나 동작을 수행하는 것을 제어하고 기록하기 위한 보안절차. 웹에서 HTTP를 활용한 데이터는 stateless 특징상 누가 요청하는지 시스템에서 알 수 없습니다.. 로그인이라는 절차를 통해 파일 및 프로그램 등의 컴퓨터 시스템의 접근 권한을 관리할 수 있으므로 보안에서 필요한 역할을 합니다. 그러므로 로그인을 하지 않았거나 권한이 없는 유저에 대하여 접근 및 동작제어를 확실하게 해야 합니다. 권한 없는 자원에 대하여 접근이 불가능한 구조를 설계하고, 애초에 권한페이지가 있는지를 모르게 하는 것이 중요합니다.

주요 추가 의존성

Spring WebSpring MVC를 이용해서 RESTful을 포함한 웹 애플리케이션을 빌드합니다. 서버 내에서 요청을 송신하기 위한 고객 역할을 수행할 수 있는 RestTemplate을 내재하고 있습니다. Lombok생성자, Getter와 같이 반복적으로 재사용되는 코드들을 어노테이션을 부여하는 방식으로 정의할 수 있어요.

본 서버 애플리케이션에서는 카카오 인가 서버로부터 반환받은 액세스 토큰을 고객 애플리케이션에 직접 반환해 사용하는 방식으로 구현하였으나, 서버가 전달받은 액세스 토큰을 이용해서 카카오 API 서버에 사용자의 정보를 요청해 반환받은 뒤 해당 정보를 조합하거나 다른 비즈니스 로직을 거쳐 서버에서 사용할 리소스로 변환해 영속화하고, 해당 리소스를 인코딩하는 식으로 자체적으로 액세스 토큰을 만들어 반환하는 방식으로 구현할 수도 있습니다.

logout 기능 구현

사용자 관리 API 호출을 담당하는 클라이언트인 UserApi에 logout과 unlink가 있습니다. logout 메서드의 경우 요청 성공 시 로그아웃 처리된 사용자의 회원 번호를 받습니다. 또한, 성공 여부에 상관없이 Flutter SDK에 저장된 토큰을 삭제합니다. 토큰 삭제 시 더 이상 해당 토큰 값을 이용해서 카카오 Api를 호출 할 수 없습니다. unlink 메서드의 경우 요청 성공 시 앱과 연결이 해제된 사용자의 회원 번호를 포함한 UserIdResponse 객체가 반환됩니다.

또한, logout처리가 함께 이루어집니다. UserApi의 unlink를 통해 구현하도록 하겠습니다.

공부해 보고 코드를 작성해 보면서, 생각보다. 프론트엔드에서 작성해야 할 부분이 적다는 것을 알게 되었습니다. 많은 부분을 백엔드에서 작성하고 고민해야 하는 부분이었고, 프론트엔드에서는 동작원리와 방식만 이해하기 위해 노력했다.

CSRF가 사이트 탈취를 해야하는 건 알겠지만, 제대로 사이트 탈취가 무엇을 뜻하는지 이해하는 게 어려웠고 Refresh Token을 통해 공격을 방지하는 방식이 이해가 되다가도 다른 의문점이 제기될 때마다.

답변을 망설이는 경우가 많았다. 아직 머릿속에 제대로 이해하고 정리하지 못하고 있다는 생각이 많이 들었다.

주요 추가 의존성

arcel고객 애플리케이션을 빌드합니다. reactrouterdomURL 링크에 따라 화면에 표출시킬 컴포넌트를 선택합니다. usehookstsuseLocalStorage Custom Hook을 사용할 수 있어요. 브라우저의 로컬 스토리지에 존재하는 KeyValue 쌍들 중 지정한 Key에 해당하는 Value를 useLocalStorage의 setValue 형식 함수를 호출해 변경했을 경우, 브라우저에 표출되고 있는 컴포넌트들 중 로컬 스토리지에서 해당 KeyValue 쌍을 사용하고 있는 컴포넌트를 리렌더링합니다.

본 애플리케이션에서는 서버 애플리케이션에서 반환하는 액세스 토큰을 로컬 스토리지에 저장해 사용합니다. axiosPromise를 기반으로 HTTP 요청을 생성해 지정한 URL에 송신하고, 응답을 반환받는다.

권한 추가

이제 권한 설정을 통해 프로필 사진을 가져올 수 있도록 해보겠습니다. kakao developers의 내 어플리케이션 동의항목 프로필 사진 을 필수 동의로 바꾸어주겠습니다. 그럼 이제 로그인을 할 경우 프로필 사진에 대한 정보를 가져올 수 있게 되었습니다. 로그인이 될 경우 프로필 사진 또한 보여줄 수 있도록 하겠습니다. 모두 체크하고 로그인할 경우 프로필 이미지와 로그아웃 버튼이 생성되는 것을 알 수 있습니다.

오늘은 카카오 sdk를 이용해서 로그인을 실습해보았습니다. 다음 포스팅에서는 구현된 로그인을 통해 사용자 정보를 서버에 저장하고, 이를 통해 모임을 생성하고 만들 수 있도록 해보겠습니다.

자주 묻는 질문