Javascript sdk 사용한 카카오 로그인 - 토큰 만료여부 확인, 토큰 갱신, 로그인 유지에 대해 궁금합니다

안녕하세요,

Javascript sdk 에서 토큰 갱신하기 기능이 따로 지원이 안되던데요, 출처는 지원 범위 | Kakao Developers 문서 입니다.

제가 토큰 갱신에 대해 기본적으로 이해한 내용은 ‘access token 이 만료되더라도 refresh token 이 있으면(유효하면) access token 이 자동으로(?) 갱신된다’ 입니다.

그런데 js sdk에서는 토큰 갱신하기 기능이 없다면 refresh token 이 있어도 access token 이 갱신이 안된다는건가요?

Js sdk에서는 토큰 갱신하기가 안되는 이유가 뭔지 알고싶습니다…

제가 구현하기 원하는 것은 로그인을 하면 로그아웃을 하지 않는 이상 몇 주에서 최대 두 달까지(두 달이라고 한 이유는 js sdk에서 refresh토큰이 2달까지 유효하다고 하기 때문입니다.) 로그인이 유지가 되는 것입니다.

Js sdk로 이것을 가능하게 하는 방법이 따로 있을까요?

구글링하다가 persistAccessToken 이라는 것을 파라미터로 줄 수도 있다는 걸 봤는데 (true, false) 혹시 이걸 쓰는 것도 방법이 될 수 있을까요?

아니면 토큰 갱신을 하려면 rest api 를 사용해서 구현을 해야되나요? 그렇다면 자바스크립트 api 로 토큰을 발급받고 로그인하고 유저 정보 받아오기를 해도 토큰 갱신은 rest api를 써서 구현을 해도 되나요?


그리고 제가 웹에서 페이지 이동할때마다 로그인이 유지되게 하거나 브라우저를 닫아도 로그인이 유지되게 하기 위해서는 카카오 api 에서 발급해준 토큰들을 뭔가 로컬에 저장해서 사용할 수 있을 것 같은데요… 예를 들어 access token을 쿠키나 세션이나 로컬스토리지 같은 곳에 저장을 해도 되나요? 보안상 위험한 방법인가요?

페이지 이동할 때마다 이 유저가 이전 페이지와 동일한 유저이고 로그인이 지속되고 있다는걸 판단하려면 어떤 방법을 쓰는게 좋을지 잘 모르겠네요… 혹시 좀 조언을 얻을 수 있을까요?


그리고 토큰이 만료되었는지 여부를 확인하려면 getAccessToken 메소드를 써야되는걸로 알고 있습니다. 그런데 예를 들어 사용자가 카카오 로그인되어있는 상태로 서비스+브라우저를 오래 켜두어서 도중에 토큰이 만료되었다면요, 그 뒤에 다시 마이페이지 버튼을 누르면 로그인이 필요한 페이지라고 띄워줘야 하잖아요? 그걸 띄우려면 getAccessToken 메소드를 써서 토큰이 살아있는지 먼저 체크를 해야되죠? 그런데 제가 궁금한거는 그럼 토큰 만료 체크를 거의 모든 페이지에서? 모든 메소드에서? 매번 체크를 해야되는 걸까요??? 이 부분도 잘 감이 안 오네요 ㅠㅠ

도와주셔서 정말 감사드립니다!

안녕하세요.

JavaScript SDK의 보안 강화를 위해 2020년 7월 27일 부터 리프래시 토큰을 취급하지 않습니다.
(클라이언트 측에 저장되는 리프래시 토큰이 탈취되면 해당 계정의 토큰을 무제한 갱신하여 사용할 수 있는 보안 문제가 생기기 때문입니다.)


Js sdk에서는 토큰 갱신하기가 안되는 이유가 뭔지 알고싶습니다…
Js sdk로 이것을 가능하게 하는 방법이 따로 있을까요?

상기 이유로 JS SDK에서는 토큰 갱신 하기가 불가하며 백앤드에서 REST API를 사용하셔야 합니다.

구글링하다가 persistAccessToken 이라는 것을 파라미터로 줄 수도 있다는 걸 봤는데 (true, false) 혹시 이걸 쓰는 것도 방법이 될 수 있을까요?

persistAccessToken는 세션이 종료된 뒤에도 액세스 토큰을 사용할 수 있도록 로컬 스토리지에 저장하는 옵션이며 기본값은 true 입니다. 이 옵션이 켜진 상태에서 팝업 방식의 로그인을 사용하면 브라우저를 닫았다 열어도 마지막에 로그인 한 토큰 정보로 SDK를 사용할 수 있습니다.

페이지 이동할 때마다 이 유저가 이전 페이지와 동일한 유저이고 로그인이 지속되고 있다는걸 판단하려면 어떤 방법을 쓰는게 좋을지 잘 모르겠네요… 혹시 좀 조언을 얻을 수 있을까요?

persistAccessToken 옵션에 의해 페이지가 이동하더라도 이전에 로그인된 토큰 정보를 계속 사용할 수 있습니다. 때문에, 토큰이 만료되었을 때, 사용자가 로그아웃을 할 때에 조치하시면 될것 같습니다.

getAccessToken 메소드를 써서 토큰이 살아있는지 먼저 체크를 해야되죠? 그런데 제가 궁금한거는 그럼 토큰 만료 체크를 거의 모든 페이지에서? 모든 메소드에서? 매번 체크를 해야되는 걸까요??? 이 부분도 잘 감이 안 오네요 ㅠㅠ

토큰이 만료되면 401 응답이 오게 됩니다. 이 때 필요한 조치를 취할 수 있습니다.

토큰이 만료되면 401 응답이 오게 됩니다. 이 때 필요한 조치를 취할 수 있습니다.

이 부분 좀더 자세히 말씀해주실 수 있나요?

제가 알기로 js sdk에서 access 토큰은 2시간동안 유효한걸로 알고 있습니다.
만약 사용자가 2시간동안 서비스를 이용하다가 access 토큰이 만료가 되면 401 응답이 오게 되는거네요?
2시간동안 서비스를 사용하던 사용자 입장에서는 토큰이 만료되었다고 해서 로그아웃 처리가 되면 황당할 것 같은데요…
401 응답이 왔을 때, js sdk에서 토큰을 갱신할 수 없으니까 취할 수 있는 조치가 새로 토큰을 발급해주는 것밖에 없나요? 토큰을 새로 발급할 때도 이 사용자가 방금전까지의 그 사용자가 맞는지 검증을 또 해야될 것 같은데… 어렵네요 ㅜㅜ

제가 js sdk 방식을 사용하려고 했던 이유는 리다이렉션 방식이 아니라 팝업 방식으로 로그인/회원가입 처리가 되었으면 해서입니다. js sdk의 Kakao.Auth.login 함수를 사용하면 팝업 방식으로 카카오로그인api를 사용할 수 있어서 사용자가 기존 페이지를 그대로 사용할 수 있지만, Kakao.Auth.authorize 함수를 사용하면 리다이렉션이 필수적으로 일어날 수밖에 없더라구요. 리다이렉션을 최대한 피하고 싶어서 팝업방식으로 모든 토큰발급 등의 과정을 처리하고 싶습니다…
https://devtalk.kakao.com/t/javascript-api-sdk-refresh-token/106024
위의 글을 보면 “Kakao.Auth.authorize 함수는 리다이렉트 방식만 제공하고 있습니다. 팝업 기능에 대해서는 추후 기능 검토 예정입니다.” 라고 하는데 여전히 Kakao.Auth.authorize 함수는 팝업기능이 없는게 맞는거죠?

리다이렉트 방식을 사용해서 로그인처리가 되면 사용자가 보던 페이지로 돌아오더라도 그 전의 상황을 똑같이 재현을 할 수 있을까요? 예를 들어 지도 상의 특정 위치에 있는 특정 마커를 클릭해서 상세정보를 보고 있다가 로그인을 위해 리다이렉션을 하고 돌아오게되면 사용자가 보던 화면을 똑같이 띄워주는건 불가능할까요?

그래서 결론적으로 다시 정리를 해서 질문을 드리겠습니다,
제가 선택할 수 있는 선택지가 두 가지인 것 같습니다.

  1. 자바스크립트 sdk 를 사용해서 팝업 방식으로 로그인을 하는 이점을 누리되, 토큰은 갱신이 안되니까 2시간동안 로그인을 지속할 수 있다. 2시간 넘어서 토큰이 만료되면?
    → 바로 로그아웃이 된다? 아니면 이 상황에서 토큰을 재발급한다? 그러면 여전히 사용자는 2시간마다 토큰 갱신이 되는 효과를 누릴 수 있을까요? 불가능할까요?
    → 앞서 말씀해주신 토큰이 만료되면 401응답이 오는데 이 때 제가 취할 수 있는 조치가 뭐가 있을지 다시 한번 상세히 설명해주시면 정말 감사하겠습니다…

  2. 토큰 갱신을 위해 rest api 방식을 사용한다. 하지만 그렇게되면 리다이렉션되는 문제가 있는데 그거는 감수해야하는 부분이다
    → 리다이렉션된 이후에도 이전에 보던 화면을 재현할 수 있는 방법이 있을까요?
    → 로그인은 js sdk 방식으로 팝업 방식으로 진행하는데, 토큰 갱신은 rest api 방식으로 처리할 수 있을까요? 말이 안되나요?


++
js sdk의 Kakao.Auth.login 을 사용해서 토큰을 발급받아보니 여전히 refresh_token 도 같이 오게 되는데요.

라고 하셨는데 좀 이상해서요. 취급은 하지 않고 그래서 토큰갱신도 불가능하지만 그냥 refresh token을 같이 보내주는건가요?

스크린샷 2022-04-05 21.28.35

서비스가 고객이 2시간 이상 접속해있는 서비스 라면 팝업 로그인보다 리다이렉트 방식을 추천드리며 필요시 토큰 갱신은 REST-API를 사용하시는걸 추천 드립니다.
아래 JavaScript를 이용한 리다이렉트 방식 예제를 참고해 주세요

https://developers.kakao.com/tool/demo/login/login


원하시는 효과는 현재 Javascript SDK를 사용하여 토큰을 갱신할 방법은 없기 때문에 401오류가 발생할 때 마다 사용자를 다시 로그인 시켜야 합니다.(고객이 2시간 마다 토큰을 새로 발급 받기위해 로그인을 강요 받는다면 꽤 이상할것 같습니다.) 때문에 사용자가 2시간 이상 머무는 서비스라면 REST-API를 사용하시길 권해 드립니다.

대부분 rest-api를 사용하는 로그인은 로그인이 필요할 때, 현재 보고 있는 주소를 파라메터로 추가하고, 이후 리다이렉션된 주소에서 이 파라메터를 추출하여 다시 원하는 화면으로 리다이렉션 시킵니다.
아래 문서의 state항목을 참고 부탁드립니다.

https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api#request-code-request
https://developers.kakao.com/docs/latest/ko/kakaologin/js#login

그리고 토큰 갱신은 발급된 방식으로 갱신할 수 있습니다 rest api 토큰 갱신은 해당 방식으로 생성된 토큰만을 갱신할 수 있습니다.

refresh_token, refresh_token_expires_in은 다음 버전의 SDK에서 삭제되는 방향으로 진행 중 입니다. 때문에 지금 보이더라도 취급되지 않는 정보임을 말씀 드립니다.

1개의 좋아요

자세한 설명 감사드립니다. REST API 방식으로 구현하도록 하겠습니다!

위 내용을 바탕으로 추가 문의 드립니다.

  1. Web 클라이언트 (하이브리드)에서 RestAPI를 사용하여 인가 코드 발급 요청 + Redirect URL에 자체 서버의 특정 주소로 지정
  2. 사용자가 카카오를 이용하여 로그인을 완료하면, Redirect URL을 통해 자체 서버로 인가 코드를 받아 토큰 발급 요청
  3. 토큰 발급이 정상적으로 완료되면 해당 토큰과 발급 시점 정보를 자체 서버에 저장 후, 클라이언트로 Redirect 처리 (Web에서 로그인 완료)
  4. 발급 시점 정보와 Refresh Token 만료 정보 등을 활용하여, 자체 서버를 통해 주기적(1달 초과 2달 미만 중 선택)으로 토큰 갱신 API 호출
  5. 갱신된 토큰 (AccessToken & Refresh Token 등)을 따로 저장하여 위 과정 반복처리하여 상시 유효한 AccessToken를 확보

다만, 사용자에게 추가 정보 (예, 배송지 정보)를 요청하기 위하여 해당 시점에 Rest API를 호출하면 Kakao 인증 서버에는 발급된 유효한 Token이 있기 때문에 바로 동의화면이 노출되고 이후 발급되는 인가코드를 위의 로그인 처리 과정과 동일하게 처리하면 로그인 유지의 기능 구현에 큰 이슈가 없겠죠!?

네 동일하게 유지하시면 문제 없을 듯 합니다.

다만, 사용자가 카카오 계정페이지에서 서비스 연결을 끊게 되면, refresh포함 모든 토큰이 만료되니, 갱신하실 때 예외처리에 참고 부탁드립니다.

그리고 사용자 로그인 없이 동의 화면으로 이동하는 것은 유효한 토큰을 발급받아서 이기 보다는, 계정페이지 또는 카카오톡으로 로그인 했을 때, 브라우저 또는 기기의 세션을 보고 판단한다는 점도 참고 부탁드릴게요~

1개의 좋아요