테크 블로그 TechBlog

안녕하세요. 주문Product팀 송현우 입니다.

 

GS 리테일이 통합으로 하나가 되면서 제가 담당하고 있는 SSO 시스템에 두 가지 요구사항이 생겼습니다.

 

첫 번째는 로그인 시스템을 사용하는 임직원의 수가 8배로 늘어났기 때문에 그에 따라 늘어난 요청만큼 수용을 할 수 있는 서버의 수를 늘리는 작업을 진행해야 됐습니다.

 

하지만 SSO가 운영이 되고 있는 환경에서 클러스터링이 되어있는 기존 서버의 환경에 무중단으로 안전하게 서버를 증설하고 클러스터링을 할 수 있는 전략 필요했습니다. 두 번째는 사내 임직원 서비스에 신규 로그인 화면 생성이 요구되었습니다.

1.  클러스터링

추가된 서버 2대를 포함해 4대의 서버에 설치된 Aerobase는 같은 DB를 사용하여 동일한 사용자, 클라이언트 등의 정보를 사용할 수 있습니다. 하지만 Aerobase는 각 노드에서 함께 설치되는 Infinispan의 캐시에 로그인 세션 저장하게 됩니다.

 

이에 따라 각 서버들이 Clustering이 되어있지 않으면 사용자가 여러 번 로그인을 시도하게 되어 SSO의 기능을 제대로 수행하지 못하게 될 수도 있고, Admin 페이지 접근 시 관리자가 접속하게 된 서버의 세션과 이벤트만을 보게 되어 제대로 된 관리가 불가능하게 될 수도 있습니다.

 

이를 해결하기 위해 기존 서버 AP1, AP2는 클러스터링이 되어있었고, 신규로 추가되는 Aerobase AP들과 기존 AP가 서로의 노드를 식별하게 하고 세션을 공유할 수 있도록 설정을 추가해주어야 됩니다.

 

작업을 처음 시작했을 때는 Aerobase에 대한 지식이 부족했기 때문에 설치 파일들이 존재하는/var/opt/aerobase 폴더 아래의 파일들을 파악해가며 직접 설정을 바꾸어 Clustering을 시도를 하기도 했습니다.

 

이 방법은 Aerobase에서 권장하지 않는 방법이고 또한 aerobase-ctl reconfigure 명령어 수행 시 초기화됨을 알게 되었습니다.

 

Aerobase는 설치 시 기본으로 생성되는 /etc/aerobase/aerobase.rb 설정 파일을 수정 후 reconfigure 명령어를 수행하여 자동으로 설치 파일들이 수정/생성될 수 있도록 가이드하고 있습니다.

Aerobase 공식 문서를 참고하여 노드 서로를 인식할 수 있도록 리눅스 서버의 hosts 파일에 각 노드의 IP와 서버 명칭을 지정하고, aerobase.rb 파일의 노드 설정 항목에 정보를 아래와 같은 예시로 수정했습니다.

ex)
/etc/hosts
10.12.34.56 SSOAP1
10.12.34.57 SSOAP2

/etc/aerobase/aerobase.rb
…
global[‘contactpoints’] = ‘SSOAP1, SSOAP2’
…

위와 같이 간단하게 설정을 하고 재설정(aerobase-ctl reconfigure), 재기동 시(aerobase-ctl restart) 노드들은 기본 설정으로 7600 포트를 통해 세션 정보를 주고받으며 Clustering이 됩니다.

Clustering 작업을 개발환경에서 충분히 테스트하고 숙지했지만, 운영 환경에서는 사용자들에게 불편을 주지 않고 서버를 증설할 수 있는 전략이 필요했습니다.

위 그림과 같이 신규 증설 서버에 임시 도메인을 등록해서 클러스터링 유무와 운영환경 테스트를 거친 후 SSO 서비스가 정상적으로 작동하는 것을 확인 후 하나의 도메인으로 통합하는 과정을 통해 운영 환경 서버 증설과 클러스터링을 성공적으로 마칠 수 있었습니다.

 

2. 신규 로그인 화면 생성

Aerobase는 각 사용자의 기능 맞게 커스텀 테마를 제작할 수 있도록 지원을 합니다. Keycloak을 베이스로 원하는 기능을 선택하여 로그인 페이지를 구성할 수 있습니다.

 

테마는 크게 5가지 타입으로 구분되어 각 정해진 기능을 사용할 수 있습니다.
1. Account
2. Admin
3. Email
4. Login
5. Welcome

위 다섯 개의 타입 중 4번 Login 타입만 사용하여 커스텀 테마 제작 작업을 하였습니다. 테마를 적용 작업 앞서 폴더 구조에 대한 이해가 필요하여 관련 문서들을 찾아보며 테마의 기반이 될 폴더 구조를 …/aerobase/aerobase-server/theme/gsgw_login 디렉터리 아래 생성했습니다.

Login 폴더의 바로 아래에는 template.ftl, login.ftl HTML 소스를 변경한 파일을 생성하여 페이지 뷰를 구성할 수 있도록 하고, 테마의 리소스(이미지, JS 파일, 메시지 양식 등)의 위치를 변수화 할 수 있도록 theme.properties에 각 리소스 경로를 명시와 Aerobase 테마를 상속받도록 설정했습니다.

 

messages 디렉터리에는 로그인 동작에 따른 알림, 경고, 결과 문구 등을 상속받아 사용자 지정 메시지를 설정하고, resources에는 페이지를 구성할 정적 파일인 css, 이미지, js 파일들을 추가하여 기초 설정을 마무리했습니다.

 

3. 페이지 뷰 및 글로벌 변수 활용

Aerobase를 재기동하고 어드민 페이지에 접속하여 신규 테마를 인식하는지 확인을 했습니다. 

신규 테마 설정

테스트 클라이언트를 신규로 발급하고 임시 테마를 위와 같이 설정을 하여 해당 페이지로 접근했습니다.

 

하지만 직접 로그인 페이지를 접속해본 결과 절대 경로로 설정된 CSS와 이미지들을 불러오지 못하고 문제가 발생했습니다. 이를 해결하기 앞서 설정한 theme.properties의 내용을 바탕으로 글로벌 변수를 테마에 적용시키는 작업이 필요했습니다.

 

Keycloak에서는 ${xxx.yyy} 방식으로 제공하는 변수들에 사용할 수 있습니다.

 

예를 들어 ${realm.yyy} 통해 realm에서 설정한 값을 가져오나 ${user.attributes}로 로그인된 사용자 정보를 가져올 수 있습니다.

 

이것을 활용하여 클러스터링 된 운영 서버들의 resource들을 동적으로 접근하기 위해 theme.properies에 css, js 파일들을 지정해주고, 이미지의 경우 HTML 파일에서 이미지 경로 설정을 태그 옵션에 “src=${url.resourcesPath}/images/xxxxxx.png” 추가하였습니다.

 

기존 GS SHOP 임직원 SSO 로그인 테마

신규 GS 리테일 임직원 SSO 테마

변수를 login.ftl 파일에 적용시키고 페이지를 확인하면서 CSS 설정을 조정하면서 신규 GS 리테일 임직원 SSO 테마를 적용시켰습니다.

 

4. 로그인 페이지 기능 추가

페이지 기조 작업들을 끝내고 사용자의 액션에 따른 이벤트들 추가 작업을 진행했습니다. 이벤트는 크게 로그인 입력 창 위 3가지 버튼 클릭에 따른 해당 팝업 노출, 로그인, Save ID 기능으로 3가지로 구분했습니다.


 1) 팝업 노출

function openPopup(url, widthSize, heightSize) {
	window.open(url, 'popup'. 'with=' + widthSize + ', height=' + heightSize + ', scrollbars = yes');
}

 각 버튼에서 공통으로 사용되는 함수를 생성하고, 연결되는 URL과 팝업 사이즈를 변수로 받아 팝업이 노출될 수 있도록 했습니다.

 

 2) 로그인

로그인 기능은 아래와 같이

#ex)
#ID Input 
<input type=”text” name=”username”>
#비밀번호 Input
#<input type=”password” name=”password”>

입력 폼에 맞게 name을 정확히 입력해주고 로그인 이벤트가 발생하는 버튼을 클릭했을 때 form.submit() 해주면 간단하게 구현할 수 있었습니다.

 

3) Save ID
이전에 사용자가 브라우저에서 입력했던 ID를 기억하는 Save ID 기능은 글로벌 변수 중 login.rememberMe를 활용하여 구현할 예정이었습니다. 그러나 Aerobase에서 제공하는 해당 기능은 비밀번호가 맞지 않았을 때 ID가 자동으로 이전에 입력했던 값이 남게 되지만 사용자가 로그아웃을 하고 다시 로그인 페이지에 접근했을 때는 남아있지 않는 등의 몇몇의 사례를 알게 되었습니다.

 

이를 해결하기 위해 로그인 박스를 체크 시 Save ID 체크 여부를 true, false로 Local storage에 저장을 하고, 로그인 이벤트가 발생했다면 ID input 값 또한 Local storage에 입력 정보를 남도록 했습니다. 이후 페이지가 onload 될 때 Local storage에 저장된 값을 보고 Save ID 기능을 수행할 수 있도록 구현을 하여 제가 의도한 기능을 완벽하게 수행할 수 있게 되었습니다.

SSO 시스템 운영/개발 업무를 진행하게 되며 Aerobase의 기능을 여러 가지 사용해봤습니다. 상용 소프트웨어를 사용하지 않아 사용자들의 요구사항에 대해 집중적으로 기술지원을 받지 못하는 불편함이 있었습니다. 하지만 잘 사용하면 무료로 상용 소프트웨어를 사용하는 것만큼 효과를 낼 수 있고, 요구에 맞춰 커스텀하게 수정을 하고 상황에 맞게 유연하게 대응할 수 있었습니다.

 

---

송현우 | 뉴테크본부 > BO Product 부문 > 주문 Product팀

오픈소스에 관심이 많고 활용하는 것을 좋아합니다.

이커머스 주문업무에도 관심이 많습니다.

---

참고 및 출처

 

Areobase 서버 개발 문서: https://www.aerobase.io/docs/server_development