웹 로그인 프로세스 질문드립니다

웹서비스와 모바일앱에서 카카오 로그인 SDK를 적용하려고 하는데요.

모바일앱에서는 callback uri 없이 SDK를 이용하여 SDK 내부 API를 통하여 사용자의 정보를 얻어올 수가 있습니다.
웹서비스에서는 callback uri 를 통하여 서버에서 code와 access token을 획득한 뒤 사용자의 정보를 얻어올 수가 있는데요.

프론트가 SPA로 구성(API 서버와 분리)되어 있음
웹서비스 카카오 로그인을 위해
웹페이지에서 카카오 로그인 버튼 선택 ->
API 서버에서 callback uri로 redirect ->
API 서버에서 callback uri에 해당하는 핸들러에서 code와 access token 을 획득한 뒤 사용자의 정보를 얻고 DB에 등록한 뒤 웹서비스의 특정 url로 redirect할 때 querystring에 JWT을 넣음

[Mobile]
|
| SDK를 통하여 사용자의 카카오 정보(이메일 등)를 획득한 뒤
| 회원가입 API를 호출하고 JWT를 응답으로 받음
|
|-------------------> [API Server]
|
| 사용자를 카카오 로그인 페이지로 보낸뒤 로그인 성공시 API 서버의 callback uri로 redirect함.
| 서버에서 code와 accesstoken 획득 후 카카오 정보를 획득하고 웹페이지로 redirect함(query string에 jwt)
|
[Web]

위 사항들로 인하여 API 서버에서 웹서비스 OAuth2 로그인 하나때문에 callback uri를 처리할 endpoint가 생기는 점과
query string에 JWT가 들어가는 점 등 매끄럽지 못한 점이 생기는 거 같아서 다음과 같은 방법을 생각해보았습니다.

서비스 각각 SDK를 통하여 사용자의 정보를 획득한 뒤 API 서버에 회원가입 / 로그인 API를 호출하여 응답 payload에 JWT를 받는다.

모바일) SDK내부에서 자체적으로 회원정보를 얻은뒤 회원가입 / 로그인 API 콜을 하여 JWT를 받으면 됨.
웹) 카카오 로그인 과정은 API 서버의 개입이 전혀 없이 SPA 에 callback uri에 해당하는 endpoint (http://localhost:3000/oauth2/callback/kakao )를 할당한 뒤 카카오 로그인 자바스크립트 SDK를 통해
사용자의 정보를 획득하여 모바일과 마찬가지로 회원가입 / 로그인 API 콜을 하여 JWT를 받음

이렇게 하면 각 클라이언트가 SDK를 통하여 동일한 인증 프로세스를 거치고 서버에 API를 호출하여
응답을 받는 단순한 구조로 할 수 있게 되는데
callback uri를 API 서버측이 아닌 프론트 내에서 처리하여도 이슈가 없는건지 잘 모르겠습니다.

답변 감사드립니다.

글로 이해하기 힘든 부분들이 있어서 제가 정확히 이해했는지 모르겠네요.

먼저 서비스 API를 공통으로 개발하시려는 니즈에 대해서는 이해했어요.
[서비스 API: 카카오 로그인을 통해서 얻은 정보로 서비스에서 필요한 정보(JWT 포맷)를 얻을 수 있는 API]

제가 궁금한 부분은 서비스 API를 호출하기 전에 code와 token을 얻는 과정인데요.

워낙 다양한 방법이 있을 거라서 정답은 없지만 JS SDK를 사용하면 아래와 같이 하실 수 있을 것 같아서 의견드립니다.

ex)

  1. JS SDK를 사용해서 사용자 ID를 얻음
  2. 1에서 얻은 사용자 ID를 파라미터로 서비스 API를 호출 (보안상 서비스 자체적으로 발급한 토큰 필요)
  3. 서비스 API에서 사용자 검증 후 응답 payload에 서비스에 필요한 정보를 담은 JWT를 넘겨줍니다.

추가로 mobile로 표기하신 내용이 네이티브 앱으로 구현하시는 내용인지도 궁금해요.~

감사합니다.

답변 감사합니다.
모바일 웹에서 구현하려고 합니다.

안드로이드/ios/웹 세 곳 중 안드로이드/ios는 SDK를 통해서 로그인을 호출하면, 제 백엔드 서버가 아니라 카카오톡서버와 직접 연결을 취하는 데 반면, 웹에서는 콜백URL을 통해서 사용자id를 받고, 이를 제 백엔드 서버를 거쳐서 로그인이 인증하게 끔 개발가이드가 설정이되어 있는 것으로 보입니다.

JS SDK를 사용하면 안드로이드/ios 처럼 사용자의 폰에서 직접 access Token을 가져오게 되어있던데, 그렇다면 굳이 콜백URL을 미리 설정해서 백엔드 서버에 따로 엔드포인트를 늘리지 않아도 되지 않을까요?
CSRF,XSS에 취약하다는 이유로 accessToken을 직접 접근하지 말라고 하는데, 권한을 최소로 준 accessToken을 탈취당하는게 보안적으로 치명적인 취약점일까요?

네 엔드포인트를 늘리지 않는 방식으로 하셔도 될 것 같아요.

서비스에 SSL이 적용되어 있고 CSRF, XSS 공격에 대한 대응을 했다면 큰 이슈는 없다고 생각합니다.