[SPURT] Kakao OIDC로 소셜 로그인 구현하기 - 1편

목차

1. 카카오 OIDC 소셜 로그인 구현하기(이론편)
2. 인증 서버로 요청 보내는 client 선택하기 (Feign VS RestTemplate VS RestClient VS WebClient)
3. 카카오 OIDC 소셜 로그인 구현하기(구현편)
4. JWT 기반 인증 구현하기

OIDC란?

OpenID Connect는 OAuth 2.0 위에 구축된 인증 레이어로, 사용자의 신원을 확인하는 표준화된 방법을 제공한다.

왜 쓰는거야?

외부 호출 API 횟수를 절반으로 줄일려고

기존에는 아래 사진과 같이 인가 코드로 액세스 토큰을 발급받고, 이 액세스 토큰으로 사용자 정보를 다시 요청해야 해당 유저의 정보를 가져올 수 있다.
즉, 서비스 서버에서 총 2번의 API를 호출해야 된다.

하지만 OIDC는 딱 1번 호출해서 유저의 정보를 알아낼 수 있다.

Kakao developer 에서 OpenID Connect 활성화해놓으면, 인가 코드로 액세스 토큰을 요청할 때 응답으로 액세스 토큰과 함께 ID token 이라는 걸 같이 준다.
이 ID 토큰 안에 유저 정보가 들어있다!
https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api#request-token-response-body

우리 서비스에서는 딱 ID token의 payload에 든 값만 필요하기에

ID token(JWT)을 parsing 하면 cliams 안에 유저 식별값(sub), 이름(nickname), 프로필 이미지(picture), 이메일(email) 등이 들어있다.
우리 서비스에서는 딱 이 정도의 정보만 필요했기에 일반적인 OAuth 방식이 아닌 OIDC 방식을 선택했다.
Id Token 안에 없는 정보가 필요하다면 일반적인 OAuth 2.0 방식을 사용해야 한다.

OIDC 공개 키

그럼 이 JWT를 parsing 하려면 암호화 및 알고리즘 정보와 key(secret) 정보가 필요하다.
카카오 공식 문서에 따르면 이 공개 키 정보를 매번 요청하게 되면 차단 당할 수 있다고 한다.
그래서 한번 요청하고 일정 기간 캐싱할 것을 권장한다.
그래서 나는 Redis에 캐싱해뒀다.
https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api#oidc-find-public-key

Kakao OIDC flow chart

전체 흐름을 한번 정리해보자

간단 정리하면

1. 프론트엔드에서 authCode와 provider(KAKAO or GOOGLE, NAVER)와 함께 요청 보내면
2. 백엔드에서 provider 서버로 token 요청 보내기
3. 응답 받은 ID token을 캐싱되어 있던 공개 키로 해석해서 payload 추출(sub, name, email, imageUrl 들어 있음)
4. sub 값과 provider 종류로 백엔드 DB에 유저 조회
5. 없으면 새 유저 생성해서 저장 ( = 일종의 자동 회원 가입)
6. Jwt access/refresh token 반환

결론

우리 서비스는 유저 이름, 프로필 이미지, 이메일 정도의 정보만 필요하고, provider 서버로의 요청을 절반으로 줄이고 싶어서 OIDC 방식을 도입했다!

코드는 3편 카카오 OIDC 소셜 로그인 구현하기(이론편)에서..~