모바일에서의 소셜 로그인

은종·2022년 7월 4일

JWT SMS login google login kakao login social-login

진행하는 프로젝트에서 클라이언트로 모바일(flutter)을 선택했고, 로그인 기능을 넣어야 했다.
Kakao 소셜 로그인, Google 소셜 로그인을 지원할 예정이다.

Kakao 로그인

🥺 오해했던 점 🥺

1. token의 사용법

Kakao에서 refresh token이랑 access token을 둘 다 주니까, client가 우리 서버의 api를 호출하려면 계속 카카오에 인가를 받아야 된다고 생각했다.

그게 아니라, kakao에서 로그인 한 것을 기반으로 우리 서버의 JWT을 생성해서 client로 전달해야하고,
kakao token은 kakao 서버에서 사용자 정보를 받는 용도로 사용한다.

2. 모바일과 REST API로 로그인 방법 차이

REST API의 방식은 우리 서버가 client와 kakao 인증서버 사이에서 redirect 해주고, 받은 token으로 유저 정보를 가져오는 방식이다.
(우리 서버가 자체적으로 유저 정보 가져오고 바로 DB에 저장)

그와 다르게 모바일에서는 앱 내에서 kakao 인증서버에 인가를 받고 유저 정보를 가져와서 우리 서버에 정보를 보내는 방식이다.
(모바일에서 자체적으로 유저 정보까지 다 가져오고 우리 서버로 보내기)

이 오해를 풀고난 뒤 docs의 그림을 보니까 왜 사용자 클라이언트와 서비스 서버 동시에 물려있는게 있는지 이해됐다.

모바일에서는 2개 물려있는 항목들은 사용자 클라이언트에서 진행되고, REST API 방식에서는 서비스 서버에서 진행된다.

시퀀스 다이어그램

카카오 SDK에서 제공하는 loginWithKakaoTalk함수를 호출한다.

함수를 호출하면 SDK가 카카오톡을 실행하고, 앱 이용 동의를 받는 화면이 띄워진다.

동의를 하면 kakao 인증 서버에서 토큰이 넘어오고, 이 토큰은 TokenManager를 통해 내부적으로 관리된다.

로그인 한 후, kakao 인증 서버에 사용자 정보를 요청해서 받은 정보(user id, 이름 등)를 우리 서버로 보내 신규가입자면 회원가입처리, 아니면 JWT토큰을 발급한다.

Google 로그인

기본적인건 Kakao와 다를바 없다.
하지만 로그인이 완료한 뒤, 유저 정보를 서버로 보내는 부분이 약간 다르다.

백엔드 서버와 통신하는 앱 또는 사이트에서 Google 로그인을 사용하는 경우 서버에서 현재 로그인한 사용자를 식별해야 할 수 있습니다.
안전하게 하려면 사용자가 성공적으로 로그인한 후 HTTPS를 사용하여 사용자의 ID 토큰을 서버로 보냅니다.
그런 다음 서버에서 ID 토큰의 무결성을 확인하고 토큰에 포함된 사용자 정보를 사용하여 세션을 설정하거나 새 계정을 만듭니다.

공식 문서에 의하면 모바일 앱에서 바로 user ID를 보내는 방법은 보안에 취약할수도 있기에, token을 보내고 백엔드에서 검증하는 절차가 필요하다고 언급되어있다.