카카오 로그인후 기존페이지로 복귀 시도기

최근에 카카오 로그인을 Django에서 REST API를 이용하여 구현해 보았다.

카카오 로그인은 다음과 같은 과정으로 진행된다. 카카오 웹사이트로 사용자를 리다이렉트 -> 사용자가 로그인하면 인가코드와 함께 미리 지정한 Redirect URI로 302 Redirect -> 받은 인가코드를 통해 토큰 받기

 

이러한 방법을 시도하며 마주한 문제점은, 바로 리다이렉트 되는 사이트가 제한되어 있다는 것이었다. 다시 돌아올(리다이렉트)될 사이트는 아래와 같은 쿼리스트링으로 전달하기에 단지 쿼리스트링에 돌아올 사이트의 값을 바꿔주면 되지 않나? 싶긴 하다.

https://kauth.kakao.com/oauth/authorize?client_id={client_id}&redirect_uri={redirect_uri}&response_type=code

 그러나 문제는 해당 리다이렉트될 사이트의 종류가 최대 10개로 제한되어 있고, 이를 사전에 카카오에 등록해두어야 한다는 점이다. 구현하고 싶었던 것은, www.devmuromi.com?code=123 또는 www.devmuromi.com/123 과 같이 특정 세부 정보를 가지고 있는 사이트로 가는 것을 원했기에 해결법을 찾아야 했다.

---

1. redirect_uri에 쿼리스트링 -> 실패

첫번째로 시도한 것은 redirect_uri에 쿼리스트링을 포함한 링크를 보내는 것이었다. 쿼리스트링 자체는 아마 링크 그 자체의 변형은 아니니 어쩌면 가능할지도 모르겠다는 생각에 시도했으나, 지정되지 않은 리다이렉트라는 오류를 마주했다.

 

2. 새창으로 띄워서 로그인 -> 가능하나 폐기

그다음으로 생각한것은 로그인 사이트로 리다이렉트를 하는 것이 아닌, 새로운 창을 띄워서 로그인이 완료되면 원래 창으로 돌아오는 방식이었다. 이 방식은 아마 구현은 가능할 것이라 생각되지만, 방식이 깔끔하다고 느껴지지 않고, 다시 돌아온 후 새로고침을 하는 과정에서 문제점을 만나 포기하게 되었다. React 등의 경우에는 이 방식으로 구현하는 경우도 꽤 있는 것으로 보였다. 그리고 이 방식을 찾아보며 떠오른 것은 그냥 REST API가 아닌 카카오에서 제공하는 JS SDK를 사용하는 것이 나을 것 같다는 생각이 들었다.

 

3. 쿠키등에 저장 -> 가능할듯?

다음으로 생각이 든 것은, 로그인 페이지로 리다이렉트 하기 전 code를 쿠키 등에 저장한 후, 다시 돌아온 후 쿠키에서 값을 다시 읽어 리다이렉트 해주는 것이었다. 이 방법도 가능할 듯 하나 시도해보지는 않았다.

 

4. state로 보내기 -> 성공

제가 마지막으로 시도하고 실제로 사용한 것은 요청시 쿼리스트링의 state를 이용한 것이었다. state기능은 CSRF공격 방어를 위해 제공되는 기능인데, 이를 code를 계속 기억(전송)하기 위해 이용하는 것이다. 사실 이렇게 쿼리스트링으로 code 정보를 보내는 것은 가장 먼저 생각해 본 방식이었으나, 따로 원하는 더미데이터를 보내는 방법이 있는 것 같지 않아 포기했었다. 그러나 이후 응답 파라미터에 state가 있는것을 확인한 후 가능성이 보여 시도하게 되었다.

 

구체적인 사용방식은 다음과 같다.

https://kauth.kakao.com/oauth/authorize?client_id={client_id}&redirect_uri={redirect_uri}&state={code}&response_type=code

위와 같이 code를 state 쿼리스트링에 담아 전송한다. 그러면 로그인 후 다시 리다이렉트를 받을 때 다음과 같은 링크로 인가 코드를 받게 된다.

{redirect_uri}?code={인가코드}&state={code}

여기서 code에 추후 토큰인증을 위한 인가코드가 담겨 나오고, state에 저희가 전송한 code가 나온다.

 

이렇게 다양한 시도를 해본 후 든 생각은, 굳이 REST API를 고집할 필요 없이, 웹이라면 SDK를 사용하는 것이 좋을 거라 생각된다.