KeyCloak OAuth2를 활용해서 SSO 로그인 하기 (google)

KeyCloak은 쓰면 쓸수록 매력적인 솔루션인것 같다. 잘 다룰줄만 알면 인증, 권한 관련해서는 어느정도 경지에 오를수도 있을것 같다는 생각이 든다. 요즘같이 OSS가 각광받는 시대에는 꼭 알고 있어야 할 OSS라고 생각한다. 

 

KeyCloak 설치부터 해서 springboot app SSO 연동, JWT 발급, Jenkins와의 연동 등의 포스팅을 했었는데 이번에는 OAuth2를 활용해서 구글 계정으로 KeyCloak 로그인을 하는 방법에 대해서 알아보겠다. 

---

테스트 환경 구축

일단 테스트 환경부터 구축을 해보자. 중점적으로 살펴볼 부분은 '어떻게 OAuth2를 통해 로그인을 하는가'이기 때문에 별도의 어플리케이션과 연동은 하지 않고 가장 간단하게 nginx를 설치해서 http://localhost 라는걸 띄울거고 이 URL이 들어오면 KeyCloak에서 검증을 해서 인증을 하는 방식의 테스트를 진행을 할것이다. 

 

테스트를 위해 KeyCloak, Nginx의 설치가 필요하다. 이미 다 설치가 되어 있다면 건너뛰어도 무방하다. 

 

MSA 인증서비스를 쉽게 해주는 KeyCloak 설치하기

 

1분만에 Windows에 nginx 설치하기

KeyCloak, Nginx 둘다 설치를 하는데 5분이 걸리지 않을 것이다. 간단하게 테스트환경을 내 로컬 PC에 구성할 수 있다. 

 

---

Google APIs 에서 사용자 인증 하기 

Google Cloud Platform

위의 링크로 들어가면 OAuth2를 하는데 있어서 필요한 정보를 얻을 수 있다. 상세한 설명이 있으니 차근차근 하나씩 따라오면 된다. 

 

OAuth 클라이언트 ID

사이트에 진입을 하면 좌측에 사용자 인증 정보라는 것이 보이고 눌러보면 상단에 사용자 인증 정보 만들기가 보일것이다. 여기에서 OAuth 클라이언트 ID 를 클릭한다. 

 

OAuth 클라이언트 ID 만들기

OAuth 클라이언트 ID 를 만들려면 일단 동의 화면 구성을 해야 한다. 대상 사용자 및 앱을 구성하고 등록하려는 방식을 설정하는 곳이라고 보면 된다. 뭔가 번역이 이상하게 되어서 헷갈린다. 

 

 

OAuth 동의 화면

OAuth 동의에서는 외부만 선택이 가능하다. 내부는 눌리지도 않는다. 외부 선택하고 만들기를 누른다. 

 

 

앱 등록 수정

여기에서는 맨처음 나오는 앱 이름 정도 신경써서 만들고 이메일은 내 이메일을 입력하고 다른건 입력 안해도 된다. 앱 도메인도 있고 완성이 된 어플리케이션이라면 추가 정보를 입력해야 할 수도 있다. 1.OAuth 동의 화면 만 내용을 입력하고 나머지는 저장후 계속 연타!

 

 

OAuth 클라이언트 생성

앱 등록 수정을 마치면 처음에 하려고 했던 OAuth 클라이언트 ID 만들기가 다시 나온다. 여기에서는 어플리케이션 유형에 웹 어플리케이션을 선택하고 이름은 아무거나 넣는다. 어차피 나만 보므로 상관 없다. 여기서 승인된 리디렉션 URI 라는 항목이 있는데 이부분은 중요하다. 나중에 다시 세팅을 할것이고 일단은 만들기를 누른다. 그러면 OAuth 클라이언트가 생성이 되고 클라이언트 ID 정보와 클라이언트 보안 비밀번호 정보를 얻을 수 있다. 딱 봐도 중요한 정보이다. KeyCloak과 연동을 할때 필요한 부분이다. 

 

 

사용자 인증 정보 

다 만들어지면 이런 식으로 사용자 인증 정보 화면에 내가 만든 keycloak이라는 OAuth 2.0 클라이언트 ID가 생성된것을 확인할 수 있다. 이것을 눌러보면 위에서 나온 클라이언트 ID 정보와 클라이언트 보안 비밀번호 정보 조회가 가능하고 승인된 리디렉션 URI 등을 입력할 수 있다. 

 

 

KeyCloak 설정

- Client 설정

KeyCloak에 들어오면 일단 Realm을 하나 만들어준다. 기본적인 사용법은 여기를 참조하도록 하자. 

KeyCloak Client생성

기존 Client에 해도 무방하다. 하지만 아무것도 없는 상태에서 시작을 해서 필자는 새로운 Client를 만들었다. googlessotest 라는 이름으로 만들었고 Root URL에는 http://localhost 를 입력하였다. 그리고 저장을 누른다.

 

nginx 초기화면

위에 나온대로 Nginx를 설치하고 http://localhost 라고 입력을 하면 아래와 같은 화면이 나와야 한다. 

 

KeyCloak Client Settings

KeyCloak에서 Valid Redirect URIs 부분은 위에서 Root URL에 값을 넣었으면 자동으로 세팅이 될 것이다. KeyCloak Client Settings 부분에서는 더이상 세팅할것은 없고 Client 세팅을 마친다. 

 

- Identity Providers 설정

- Identity Providers 설정

좌측의 Identity Providers 를 누르면 우측과 같이 Add provider 가 나온다. 여기에서 Google을 선택한다. 여기에 나온 Provider는 모두 KeyCloak 로그인을 할때 사용할 수 있다는것이다. 

 

Identity Providers Google setting

여기가 중요한 부분이다. 아까 위에서 얻은 클라이언트 ID 정보와 클라이언트 보안 비밀번호 정보 를 이곳에 입력한다. 그리고 Redirect URI 부분에 나온 URI를 복사하여 승인된 리디렉션 URI 부분에 넣어준다. 

 

승인된 리디렉션 URI 

이부분을 몰라서 많이 삽질을 한것 같다. 저장을 하면 모든 설정은 끝이 난다. 

 

 

테스트

테스트 방법은 간단하다. 앱을 연동해서 하는것이 아닌 그냥 웹서버 하나 띄워놓고 하는 방식이라 KeyCloak의 접속 정보를 직접 입력하는 방식으로 접근을 해야 한다. 아래와 같은 형식으로 입력하면 된다. 

 

http://KeyCloak URL/auth/realms/KeyCloak Realm/protocol/openid-connect/auth?response_type=code&client_id=KeyCloak Client ID&state=12345

 

sample

http://localhost:8080/auth/realms/oingdaddy/protocol/openid-connect/auth?response_type=code&client_id=googlessotest&state=12345

 

KeyCloak OAuth2

위의 URL로 접근을 해보면 위와 같이 익숙한 OAuth2로 로그인을 할 수 있게 나온다. 누르면 우측에 나오는것처럼 구글 로그인이 진행이 된다. 로그인을 성공적으로 마치면 아래와 같이 브라우저에 출력이 된다. 

 

nginx 초기화면

성공적으로 잘 된것이다. 간혹 auth fail이 나도 이 화면이 보일때가 있는데 브라우저의 URL을 보면 성공을 했다면 아래와 같이 redirect 되고 

http://localhost/?state=12345&session_state=427b8c4e-3da6-437d-9f7a-d7059b0c5699&code=2bdecf18-1dce-4193-9153-7a98239539f8.427b8c4e-3bb6-437d-9f7a-d7069b0c5699.f8be4cbf-3676-4c4d-b891-b141a18336a6#

실패했다면 아래와 같이 출력이 될것이다. 

http://localhost/#error=unauthorized_client&error_description=Client+is+not+allowed+to+initiate+browser+login+with+given+response_type.+Implicit+flow+is+disabled+for+the+client.&state=3333

참고 : www.mastertheboss.com/jboss-frameworks/keycloak/google-social-login-with-keycloak

 

 

끝!