OAuth - 사전 설정과 프론트엔드 설계

OAuth 기능 구현은 다음과 같이 진행될 예정이다.

1. Spring Security 없이 OAuth 구현
2. 사용자 인증 정보를 JWT로 응답
3. JWT를 Redis를 이용하여 관리

그 전에 OAuth가 무엇인지 부터 살펴보자.

OAuth

OAuth는 간단히 말해, 사용자 인증을 개발자의 서비스 대신 제3자 서비스에서 수행하는 방식이다. 인증 외에도 추가적인 리소스 접근 권한을 요청할 수 있지만, 여기서는 인증 과정에만 초점을 맞춘다. 프론트엔드와 백엔드의 OAuth 인증 과정을 시퀀스 다이어그램을 통해 단계별로 살펴보자.

1. 프론트에서 인증 서버로 이동하여 인증 처리 후 리다이렉트
2. 리다이렉트 URL의 쿼리 파라미터에서 code를 가지고 백엔드에 사용자 정보 요청
3. 백엔드에서 프론트로부터 전달 받은 code 값으로 인증 서버에 엑세스 토큰 요청
4. 인증 서버로부터 전달받은 엑세스 토큰을 가지고 리소스 서버에 인증 사용자 정보 요청
5. 요청 성공 시 로그인 처리 후 사용자 정보 또는 JWT 반환

정리하면 인증 자체는 프론트에서 처리하고 인증이 성공했을 때 받는 코드를 가지고 백엔드에 로그인 요청을 하는 것이다.

구글 OAuth 설정

OAuth 프로젝트를 시작하기 전에 우선 구글 클라우드 플랫폼에서 프로젝트를 만들어야 한다.

그 다음 API 및 서비스에서 OAuth 동의 화면을 설정한다.

앱 정보는 대충 필수 부분만 설정하고 넘어가자. 그러면 범위 설정을 할 수 있는데, 이 부분에서 범위 추가 또는 삭제를 선택하면 다음과 같은 부분을 볼 수 있다.

여기서 이메일과 프로필을 설정하고 사용자 인증 정보 탭에서 사용자 인증 정보 만들기를 선택하여 OAuth 클라이언트 ID를 클릭하여 다음과 같이 설정한다.

만들기를 클릭하면 클라이언트 ID와 클라이언트 보안 비밀번호가 발급된다. (카카오 OAuth 설정은 워낙에 문서가 잘 되어 있어서 패스… 개인적으로 카카오 OAuth 설정 시 보안 비밀번호를 사용하는 것을 설정했다)
두 서비스 모두 공통적으로 다음 값들을 사용한다.

Key	Value
client-id	인증 서버와 리소스 서버에 필요한 클라이언트 ID
client-secret	엑세스 토큰을 발급받을 때 필요한 보안 비밀번호
redirect-uri	인증 성공 시 리다이렉트 할 URI
token-uri	엑세스 토큰 요청을 위한 URI
info-uri	사용자 정보 요청을 위한 URI

redirect-uri은 잘 설정해야 한다. 위의 구글 설정 기준으로 승인된 리디렉션 URI 부분인데, 인증이 성공하면 이곳으로 리다이렉트 되며, 이때 쿼리 파라미터에 code라는 키 값으로 인증 코드를 전달한다.
프론트에서는 client-id와 redirect-uri을 가지고 있어야 하며, 백엔드에서는 모두 가지고 있어야 한다.

클라이언트 설계

백엔드의 책임은 인증 코드를 가지고 사용자 정보를 가져오는 것이다. 따라서 클라이언트를 만들어야 하는데, 어떻게 만들까 하다가 귀찮아서 그냥 HTML 파일 하나로 대충 구현하였다.

---

OAuth 엔드 포인트

구글과 카카오 모두 인증을 위한 엔드포인트를 문서에 명시해 두었다. 이 엔드포인트를 기반으로 프론트에서 필요한 쿼리 파라미터를 설정하고, 접근해서 인증을 하고 인증 코드를 받는 것이다.

• 구글

https://accounts.google.com/o/oauth2/v2/auth?client_id={CLIENT_ID}&redirect_uri={REDIRECT_URI}&response_type=code&scope: email profile

• 카카오

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

OAuth에 필요한 모든 설정과 클라이언트 설계가 완료되었다. 이제 스프링으로 넘어가 요구 사항을 정의하고 차근차근 풀어나가보자.

참고차료

OAuth 2.0 동작 방식의 이해