[SpringSecurity] OAuth2.0 ... Authorization Code Grant 인증

SpringSecurity를 이용하여 OAuth2.0 로그인 기능을 구현하면서 ...

OAuth2.0을 SpringSecurity 백엔드에서 구현하는 방법과 프론트엔드에서 구현하는 방법은 어떤 차이점이 있는지에 대해서 의문이 생겼고, 방법에 따라 어떠한 인증 종류를 써야하는지 포스팅으로 공유하려고 합니다.

 

OAuth2.0 인증 종류

OAuth2.0 인증 종류는 크게 4가지가 있지만, 주로 사용되는 방법인

Authorization Code Grant와 Client Credentials Grant 방식 중 첫번째를 이번 포스팅으로 공유합니다.

 

1. Authorization Code Grant

Authorization Code Grant 방식의 특징.

• 서버사이드 코드로 인증하는 방식
• 권한서버가 클라이언트와 리소스서버간의 중재역할.
• Access Token을 바로 클라이언트로 전달하지 않아 잠재적 유출을 방지.
• 로그인시에 페이지 URL에 response_type=code 라고 전달.
• Refresh Token의 사용이 가능한 방식.

 

스프링 부트를 이용하여 백엔드를 구성하고, JSP, Mustache, thymeleaf 같은 템플릿엔진으로 프론트엔드를 구성할 때 사용된다.  스프링 부트가 PAYCO 인증 서비스(Authorization Server)에서 로그인 페이지를 전달받을 수 있고, 로그인을 시도하면 페이지 새로고침이 되기 때문에 Code방식으로 처리를 해야합니다.

하지만, Vue, React와 같은 SPA의 경우 로그인 페이지를 받고 완료된 후 페이지 새로고침을 해도 SPA의 router와 충돌한다... 이 부분을 해결하기 위해선, SpringBoot에서 리다이렉션 부분을 해결해줘야하지만, SPA와 백엔드서버 간에는 JSON만을 교환하는 1규칙을 깨기 때문에 추천하지 않습니다.

 

※Redirect부분을 해결하는 방법을 찾았습니다. 통합 배포가 아닌 Frontend, Backend 서버간 Oauth2.0 로그인을 수행하는 포스팅 조만간 업로드 하겠습니다

 

아래 링크로 SPA를 코드 방식으로 진행하였을 때의 서버 문제점과 나름의 장점을 정리한 내용을 참조.

https://dev.to/bwanicur/oauth2-authorization-grant-flow-for-single-page-apps-53oc

OAuth2 Authorization Code Flow for Single Page Apps

Vue와 React를 이용하면 Client Credentials Grant 방식으로 팝업 로그인을 통해 직접적으로 교환하는 방식을 추천합니다.