[Keycloak] keycloakify로 테마 커스텀 - 화면 작업 방식

※ 이전 게시물과 이어집니다. 아직 keycloakify 설치, 세팅하기 전이라면 다음 포스팅을 확인해 주세요.

[Keycloak] keycloakify로 테마 커스텀 - 초기 설정

 

버전 정보

• keycloak: v20.0.3
• keycloakify: v6

 

화면 작업 방식

화면 작업 방식은 2가지로 보면 된다.

1. keycloak에서 기본으로 사용하는 login.ftl, register.ftl 등의 freemarker(.ftl) 파일 작업
2. 기존 keycloak에는 없는 extra 파일 작업 (ex: 로그인 MFA 화면 등)

그럼 keycloak에서 기본으로 사용하는 freemarker 파일들은 어디서 확인할 수 있을까? 공식 문서에는 login.ftl, account.ftl, register.ftl 만 언급되고 나머지 ftl들은 찾을 수 없다.

다행히 keycloakify가 빌드된 폴더에서 이 파일들을 찾을 수 있다.

이전 시간에 작업했던 프로젝트에서 아래 경로로 들어가 보면 파일 목록들이 나온다.

keycloakify-advanced-starter/build_keycloak/src/main/resources/theme/keycloakify-advanced-starter/login

my-extra-page-1,2 는 extra 파일이므로 무시하자. email 폴더는 이메일 전송 시에 사용되는 email template들이 들어가 있다. 현재는 login 폴더 내의 파일들만 보면 된다.

 

화면 작업 순서

1. KcApp 폴더 내에 작업할 파일을 생성

2. keycloakify 양식에 맞게 이쁘게 파일 작업

3. KcContext.ts 파일 작업

작업한 파일들을 양식에 맞게 추가해 준다.
사실 이 부분은 keycloak에서 기본으로 제공해 주는 login.ftl, register.ftl 등의 파일들에는 작업하지 않아도 잘 동작한다.
하지만 하는 것이 유지보수 측면에서도 좋고 속이 편해진다. mockData에 sampleData를 넣음으로써 테스트하기도 용이하다.

4. KcApp.tsx 파일 작업

작업한 파일들의 경로를 추가해 준다.

5. KcContext.ts 파일의 mockPageId 작업

작업한 파일을 테스트하기 위해서는 mockPageId를 설정해야 한다. mockPageId는 하나밖에 설정할 수 없다.
그래서 한 화면씩만 테스트를 할 수 있다고 생각하면 된다.

6. (기존 keycloak에는 없는 extra 파일 작업 경우에만) package.json 파일 작업

7. $ yarn start 실행하여 작업한 화면 확인

성공!

앞으로 커스텀 화면을 작업할 때마다 위와 같이 진행하면 된다.