[스프링부트(Spring Boot)] 소셜 로그인 로그아웃(카카오 로그아웃)

일반회원과 같은 로직으로 로그아웃을 해줘도 되지만,

사용자 편의를 위해서는 api에서 제공하는 로그아웃을 이용하는 것이 좋다.

그렇게 하지 않으면 다음에 소셜 로그인을 이용할 때 계정을 선택하지 못 한다던가... 

하는 불편함이 생길 수 있다.(나의 경험이다..^^)

네이버, 구글, 카카오 3가지로 로그인을 구현해보았는데, 흐름이 동일하여 하나의 로직으로 리팩토링해서 사용했다.

로그아웃도 3개의 흐름이 비슷하다면 이번에는 한 번에 글을 작성하려고 했으나...

조금(많이?^^) 달라서... 하나로 구현하기 어려울 듯 하다.

ex ) 카카오는 공식적으로 로그아웃 api 제공, 네이버는 제공 x 토큰을 날려야 한다.

---

카카오 로그아웃 방법의 경우 api 문서를 보면 친절하게 나온다.

오로지 이 페이지만 보고 구현했다. 

카카오.... 감사합니다.....

https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api#logout

Kakao Developers

카카오의 경우 일반 로그아웃 / 카카오계정과 함께 로그아웃으로 구분된다.

일반 로그아웃에서도 액세스 코드를 넘기는 방법과 admin key를 넘기는 방법으로  나뉘는데, 먼저 액세스 코드를 넘겨서 구현해보았다.

그랬더니 로그아웃 후 다시 로그인할 때 자동로그인이 되어, 계정 변경 등이 어려웠다.

이를 해결하기 위한 방법은 카카오계정 로그아웃.

---

먼저 로그아웃 redirect uri를 지정해 주어야 한다.

로그인의 경우 redirect한 후 추가 처리할 것이 있어서 별도의 컴포넌트를 생성하였지만, 로그아웃의 경우 세션만 날리기 때문에 메인 페이지로 redirect하도록 설정했다. 

if(btnType === 'kakao') {
        const url = 'https://kauth.kakao.com/oauth/logout';
        location.href = `${url}?client_id=${this.kakaoLogoutParams.client_id}&logout_redirect_uri=${this.kakaoLogoutParams.logout_redirect_uri}`;
      }

get 방식으로 redirect 되는 거기 때문에, 로그인할 때 인가 코드 받아오는 것과 동일하게 구현했다.

kakaoLogoutParams: {
        client_id: process.env.VUE_APP_KAKAO_REST_KEY,
        logout_redirect_uri: process.env.VUE_APP_SNS_LOGOUT_REDIRECT_URI,
      },

1. client_id: 카카오 개발자 센터에서 발급받은 REST KEY
2. logout_redirect_uri: 카카오 개발자 센터에 등록한 redirect uri

---

로그아웃 시 redirect uri로 이동하여 이 화면을 볼 수 있다.

"이 서비스만 로그아웃"을 클릭할 경우, 다음 로그인 시 바로 로그인이 가능하고,

"카카오계정과 함께 로그아웃"을 클릭할 경우, 다음 로그인 시 다시 로그인을 진행해야 한다.

내가 기획했던 기능은 후자의 기능이었는데, 전자의 기능도 가능하도록 사용자에게 선택권을 주는 거니 더 좋은 듯 하다.

카카오계정과 함께 로그아웃