<div id="readability-page-1" class="page"><div id="SE-e35c36be-48a6-4769-bc43-f02cb7c9e8a0">
                                    <p id="SE-39fc674a-35ba-4b4e-bb0b-8f72d041a9fa"><span id="SE-a838670e-a9fd-47ba-b958-12106afd3194">안녕하세요 멍개입니다. </span></p><p id="SE-547b2ee5-7544-463c-ae4f-82c72d9a45e5"><span id="SE-c9824336-6dd3-4047-b573-698f74cd99b5">​</span></p><p id="SE-076500ab-04fb-48ce-9ca6-b6c96967b43c"><span id="SE-5c3eb2fc-e105-4d2e-8875-60bd27dba830">지난 시간에 키클록을 이용하여 oauth2.0 연결을 수행해보았습니다.</span></p><p id="SE-127a346b-3cf4-440c-944a-4642287eb351"><span id="SE-661faaf4-6d62-4cc3-9c56-7531e1fbacb0"><a href="https://blog.naver.com/pjt3591oo/223922505056" data-linktype="text" data-linkdata="{&quot;id&quot;: &quot;SE-661faaf4-6d62-4cc3-9c56-7531e1fbacb0&quot;, &quot;link&quot;: &quot;https://blog.naver.com/pjt3591oo/223922505056&quot;}" target="_blank">https://blog.naver.com/pjt3591oo/223922505056</a></span></p>
                            </div><div id="SE-10c8fa51-fc88-493b-85a5-e1ce6886beec">
                                    <p id="SE-93320851-ab30-4a2b-85ec-e50163d3f971"><span id="SE-d62f2dfd-2653-4289-ba69-c268b4554de7">​</span></p><p id="SE-46dac2b9-0fe5-4cb6-b7cd-1e99269b36d5"><span id="SE-11b07179-628d-41fc-bd98-2af8cb295603">본 포스트에서는 도커 컴포즈 기반으로 구축된 키클록에게 테마를 적용해보곘습니다. 키클록은 4개의 테마 적용이 가능합니다.</span></p>
                            </div><div id="SE-f057d797-afbd-4b89-bcaa-0cea35df9693">
                                    <p id="SE-3561c2ea-8549-4594-ae15-96291a4cd45e"><span id="SE-4710a097-64c5-4ea8-9905-ce93d3d37c14"><b>※ Login Theme</b></span></p><p id="SE-e40d763e-2a62-4011-b768-e87c3a29aa36"><span id="SE-f0bed395-acd1-423e-8194-0640e7063a62">Login Theme는 사용자 인증 관련 모든 페이지에 대한 테마입니다.</span></p>
                            </div><div id="SE-07beaf9f-4b3a-457d-9bfb-22a29b377197">
                                    <p id="SE-24a1ffd5-858b-4dbc-b719-70aa61f8208c"><span id="SE-2444c042-a033-46aa-ad0f-1dc29b6871ac">​</span></p><p id="SE-6e7cf532-88bf-4624-a298-ebfe407d8304"><span id="SE-dfa2d1ef-a460-4a11-b5da-94c16149c78d"><b>※ </b></span><span id="SE-292ba2be-c4e0-4b4e-bbc8-0fd67f1f2239"><b>Admin Theme</b></span></p><p id="SE-4450497c-0515-4919-90fe-33a1b34cd053"><span id="SE-63e5e839-5a49-4275-8e2a-ec2476d053d7">Admin Theme는 관리자 콘솔 테마 입니다. </span></p>
                            </div><div id="SE-a9bbfa0e-9512-4b30-984d-f4c665b18654">
                                    <p id="SE-4f674363-9090-4b88-9be3-a228865f445b"><span id="SE-d2ffdc88-e46c-445f-8cf3-5985b42a7666">​</span></p><p id="SE-a3d3f67a-9bf5-4b78-b522-8205c1ad9a61"><span id="SE-0bc6ce43-8dcc-47be-b195-1737194f1ad3"><b>※ </b></span><span id="SE-1aadc6f3-f0c0-41d0-be20-f315743017c9"><b>Email Theme</b></span></p><p id="SE-4e2f2835-1889-4e8f-bc15-c8dab465c1d8"><span id="SE-bc43148d-416a-40cc-b75a-11d4989cc855">Email Theme는 키클록에서 발송되는 이메일 테마 입니다.</span></p>
                            </div><div id="SE-30398361-ae73-4ed8-a47b-52e6a48793e7">
                            <p id="SE-af2cc586-2315-470b-beb8-5636f68c8ce9"><span id="SE-a5b373ed-a554-44bb-8060-43bcd9378c72">키클록에서는 각 테마마다 theme.properties를 가집니다.</span></p>
                        </div><div id="SE-e53225d5-bea4-497b-b2c9-3535eec60527">
                            <p id="SE-c7f2023e-666d-47a3-a848-c919e76fc0cc"><span id="SE-0b902814-b106-4e13-9602-9ae4f9167555">테마의 전체 구조는 다음과 같습니다. 하지만 모든 ftl을 만들필요는 없고 커스텀 하려는 페이지의 ftl 파일을 만들면 됩니다.</span></p>
                        </div><div id="SE-cdcad675-401b-4d4a-8f70-ebc5f78e7574">
                            <p id="SE-294191ff-778b-456f-bb5d-953b20806644"><span id="SE-bd6e2552-19c3-4212-950f-901ba3d28af3"><b>· </b></span><span id="SE-9b25da58-6e40-4b61-bb20-403634583784"><b>themes/custom-theme/login/</b></span><span id="SE-0db1c834-7ca5-407c-8e6e-103f801d2769"><b>theme.properties</b></span></p>
                        </div><div id="SE-c79bb829-6117-4c93-a9eb-4b140b293797">
                                    <p id="SE-33de5872-b2b7-4dfa-88af-78e900a8851f"><span id="SE-39618b5b-74fb-4ce4-8929-d59ba4230911"><b>· </b></span><span id="SE-6ba72d99-5764-4aa9-bd1a-2c6fa73e8ef2"><b>themes/custom-theme/login/</b></span><span id="SE-e32a85a5-e773-4410-aec5-9b961638cd86"><b>login.ftl</b></span></p><p id="SE-31d9e555-4f3f-4e71-b1b9-096c1e233f5c"><span id="SE-0c12b467-3b62-41ec-bdb2-f8966773593f">​</span></p>
                            </div><div id="SE-d7c8a81f-da49-4d40-b9aa-bdb99970277c">
                            <p id="SE-996561fa-e1e9-4acf-a618-76b662fb98ae"><span id="SE-f25ca341-67ca-4432-8723-723eb0b2e08c">코드가 생각보다 길어서 아래의 블록까지가 login.ftl 코드입니다.</span></p>
                        </div><div id="SE-6e2b075e-c0b3-4125-99a6-a7068ec5a610">
                            <p id="SE-d73d07e6-50f5-414b-863e-2b25cb618dd1"><span id="SE-7a2e75e1-f10a-4b85-a4cd-40122d1e492b"><b>· </b></span><span id="SE-359800df-af37-4069-8dc6-8f745829e3eb"><b>themes/custom-theme/login/</b></span><span id="SE-6e542b76-320b-41e8-84f7-de92b9205758"><b>register.ftl</b></span></p>
                        </div><div id="SE-92f99d80-6c2a-42f7-a290-7692e3c2e0be">
                            <p id="SE-b8fb08c9-7bd8-489f-8fa0-f36d7292ae53"><span id="SE-841ae9cb-5988-46b4-bbfa-be0f9f088403"><b>· themes/custom-theme/login/resources/css/login.css</b></span></p>
                        </div><div id="SE-b89594df-efc2-4375-895a-dd5363acac9e">
                                    <p>/* 소셜 로그인 버튼 호버 효과 개선 */
.social-link {
    position: relative;
    overflow: hidden;
}

.social-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.social-link:hover::before {
    left: 100%;
}

/* 소셜 로그인 버튼 아이콘 개선 */
.social-link i {
    width: 20px;
    text-align: center;
}

/* 소셜 로그인 버튼 호버 효과 개선 */
.social-link {
    position: relative;
    overflow: hidden;
}

.social-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.social-link:hover::before {
    left: 100%;
}

/* 소셜 로그인 버튼 아이콘 개선 */
.social-link i {
    width: 20px;
    text-align: center;
}

/* 링크 스타일 */
.custom-link, 
a {
    color: #667eea;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.custom-link:hover, 
a:hover {
    color: #764ba2;
    text-decoration: underline;
}

/* 회원가입 영역 */
#kc-registration-container {
    text-align: center;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #e1e1e1;
}

#kc-registration {
    color: #666;
}

/* 회원가입 페이지 특화 스타일 */
#kc-register-form {
    margin-top: 20px;
}

#kc-register-form  {
    margin-bottom: 20px;
}

/* 회원가입 폼 래퍼 */
#kc-register-form #kc-form-wrapper {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    padding: 40px;
    backdrop-filter: blur(10px);
}

/* 회원가입 필드 간격 조정 */
#kc-register-form .custom-input,
#kc-register-form input[type="text"],
#kc-register-form input[type="email"],
#kc-register-form input[type="password"] {
    margin-bottom: 8px;
}

/* 회원가입 버튼 */
#kc-register-form .custom-button,
#kc-register-form input[type="submit"] {
    margin-top: 20px;
    font-size: 16px;
    padding: 14px;
}

/* 소셜 로그인 버튼 로딩 상태 *//* 전체 페이지 스타일 */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

.login-pf body {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* 로그인 컨테이너 */
#kc-container {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
}

#kc-container-wrapper {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    padding: 40px;
    backdrop-filter: blur(10px);
}

/* 헤더 스타일 */
#kc-header {
    text-align: center;
    margin-bottom: 30px;
}

#kc-header-wrapper {
    font-size: 28px;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
}

/* 폼 스타일 - 로그인과 회원가입 공통 */
#kc-form, #kc-register-form {
    margin-top: 20px;
}

.form-group {
    margin-bottom: 20px;
}

/* 라벨 스타일 */
label{
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #555;
    font-size: 14px;
}

/* 커스텀 입력 필드 */
.custom-input, 
input[type="text"], 
input[type="email"], 
input[type="password"] {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e1e1e1;
    border-radius: 8px;
    font-size: 16px;
    transition: all 0.3s ease;
    background-color: #fafafa;
    box-sizing: border-box;
}

.custom-input:focus, 
input[type="text"]:focus, 
input[type="email"]:focus, 
input[type="password"]:focus {
    outline: none;
    border-color: #667eea;
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.custom-input:hover, 
input[type="text"]:hover, 
input[type="email"]:hover, 
input[type="password"]:hover {
    border-color: #667eea;
}

/* 커스텀 버튼 */
.custom-button, 
input[type="submit"], 
button[type="submit"]{
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 10px;
}

.custom-button:hover, 
input[type="submit"]:hover, 
button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
}

.custom-button:active, 
input[type="submit"]:active, 
button[type="submit"]:active {
    transform: translateY(0);
}

/* 링크 스타일 */
.custom-link {
    color: #667eea;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.custom-link:hover {
    color: #764ba2;
    text-decoration: underline;
}

/* 체크박스 스타일 */
.checkbox {
    display: flex;
    align-items: center;
    margin: 15px 0;
}

.checkbox input[type="checkbox"] {
    margin-right: 8px;
    transform: scale(1.2);
}

.checkbox label {
    margin-bottom: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
}</p>
                                </div><div id="SE-ef8d58f7-ec09-4ecc-8564-2673b0d5cb0a">
                            <p id="SE-5a81e5c7-2180-4be7-827a-4a8cbc4e6a88"><span id="SE-16fe559e-00c7-4f90-bcd2-a8becbf624ec"><b>· themes/custom-theme/login/resources/js/login.js</b></span></p>
                        </div><div id="SE-04cb5f86-86d2-49da-8d2e-9e1f9e1723a6">
                                    <p>
    if (registerForm) {
        registerForm.addEventListener('submit', function(e) {
            const requiredFields = this.querySelectorAll('input[required], input[name="firstName"], input[name="lastName"], input[name="email"], input[name="password"]');
            let isFormValid = true;
            
            requiredFields.forEach(field =&gt; {
                if (!validateField(field)) {
                    isFormValid = false;
                }
            });
            
            if (!isFormValid) {
                e.preventDefault();
                showNotification('모든 필수 항목을 올바르게 입력해주세요.', 'error');
                return false;
            }
            
            // 제출 버튼 비활성화
            const submitButton = this.querySelector('input[type="submit"]');
            if (submitButton) {
                submitButton.disabled = true;
                submitButton.value = '회원가입 중...';
            }
        });
    }
    
    // 알림 메시지 표시 함수
    function showNotification(message, type = 'info') {
        // 기존 알림 제거
        const existingNotification = document.querySelector('.custom-notification');
        if (existingNotification) {
            existingNotification.remove();
        }
        
        const notification = document.createElement('div');
        notification.className = `custom-notification ${type}`;
        notification.textContent = message;
        
        // 스타일 적용
        Object.assign(notification.style, {
            position: 'fixed',
            top: '20px',
            right: '20px',
            padding: '12px 20px',
            borderRadius: '8px',
            color: 'white',
            fontSize: '14px',
            fontWeight: '500',
            zIndex: '9999',
            opacity: '0',
            transform: 'translateX(100%)',
            transition: 'all 0.3s ease'
        });
        
        // 타입별 배경색
        switch(type) {
            case 'error':
                notification.style.backgroundColor = '#e74c3c';
                break;
            case 'success':
                notification.style.backgroundColor = '#27ae60';
                break;
            case 'warning':
                notification.style.backgroundColor = '#f39c12';
                break;
            default:
                notification.style.backgroundColor = '#3498db';
        }
        
        document.body.appendChild(notification);
        
        // 애니메이션으로 표시
        setTimeout(() =&gt; {
            notification.style.opacity = '1';
            notification.style.transform = 'translateX(0)';
        }, 10);
        
        // 3초 후 자동 제거
        setTimeout(() =&gt; {
            notification.style.opacity = '0';
            notification.style.transform = 'translateX(100%)';
            setTimeout(() =&gt; {
                if (notification.parentElement) {
                    notification.remove();
                }
            }, 300);
        }, 3000);
    }
    
    // 비밀번호 표시/숨기기 기능 (선택사항)
    function addPasswordToggle() {
        const passwordFields = document.querySelectorAll('input[type="password"]');
        
        passwordFields.forEach(field =&gt; {
            const wrapper = document.createElement('div');
            wrapper.className = 'password-wrapper';
            wrapper.style.position = 'relative';
            
            field.parentElement.insertBefore(wrapper, field);
            wrapper.appendChild(field);
            
            const toggleButton = document.createElement('button');
            toggleButton.type = 'button';
            toggleButton.innerHTML = '👁️';
            toggleButton.className = 'password-toggle';
            
            Object.assign(toggleButton.style, {
                position: 'absolute',
                right: '12px',
                top: '50%',
                transform: 'translateY(-50%)',
                background: 'none',
                border: 'none',
                cursor: 'pointer',
                fontSize: '16px',
                opacity: '0.6'
            });
            
            toggleButton.addEventListener('click', function() {
                if (field.type === 'password') {
                    field.type = 'text';
                    this.innerHTML = '🙈';
                } else {
                    field.type = 'password';
                    this.innerHTML = '👁️';
                }
            });
            
            wrapper.appendChild(toggleButton);
        });
    }
    
    // 비밀번호 토글 기능 활성화 (선택사항)
    // addPasswordToggle();
    
    // 페이지 로드 애니메이션
    const container = document.getElementById('kc-container-wrapper');
    if (container) {
        container.style.opacity = '0';
        container.style.transform = 'translateY(20px)';
        
        setTimeout(() =&gt; {
            container.style.transition = 'all 0.5s ease';
            container.style.opacity = '1';
            container.style.transform = 'translateY(0)';
        }, 100);
    }
});
</p>
                                </div><div id="SE-31a22c7d-9dd8-42c9-b73f-18a2a345a8a5">
                                    <p id="SE-b9f2ff56-37f4-44f3-b50a-e0cca6cd4515"><span id="SE-1f505d6e-c2a1-4989-9ccd-6728024046dc"><b>· docker-compose.yaml</b></span></p><p id="SE-e56fd28b-5b31-4d6f-9498-103729aae01b"><span id="SE-33c48c56-534a-4f67-a0b2-ed1775daa2d6">docker-compose에서 volumes을 통해 themes를 키클록 컨테이너의 /opt/keycloak/themes 안에 넣어줍니다.</span></p>
                            </div><div id="SE-69574766-b439-4498-b344-729a6ad0d9f0">
                                    <p id="SE-1a8d5eb7-45a4-4d9b-a509-94934aab2b0e"><span id="SE-97eea13e-2ada-41e0-a848-6af6366020b5"><b>· realm에 테마 적용</b></span></p><p id="SE-74f10bbe-9364-458d-a9f0-1ccba9e2078f"><span id="SE-6c5bac5d-8ff1-492f-b068-12c31b652e8c">테마를 적용할 realm을 선택한 후 Realm settings/Themes 탭을 접근하면 다음과 같이 4가지 타입에 따라 원하는 테마를 적용할 수 있습니다. 우리가 추가한 테마는 login Theme에서 custom-theme이기 때문에 User Theme에서 custom-theme를 적용할 수 있습니다.</span></p>
                            </div><div id="SE-fef76e70-8610-46ce-9fc4-e5a8ab36f6dd">
                            <p id="SE-cbb8b2ac-587d-458c-8ef8-a3e59ea64907"><span id="SE-1a81d0ae-d17f-4993-8264-663f687101fc">콘솔에서 client에서 account의 Home Url을 통해 로그인 페이지를 확인해볼 수 있습니다.</span></p>
                        </div></div>

삽질하는 멍개씨

안녕하세요 멍개입니다. 지난 시간에 키클록을 이용하여 oauth2.0 연결을 수행해보았습니다. https://blog.naver.com/pjt3591oo/223922505056 본 포스트에서는 도커 컴포즈 기반으로 구축된 키클록에게 테마를 적용해보곘습니다. 키클록은 4개의 테마 적용이 가능합니다. ※ Login Theme Login Theme는 사용자 인증 관련 모든 페이지에 대한 테마입니다. ※ Account Theme ※ Admin Theme Admin Theme는 관리자 콘솔 테마 입니다. ※ Email Theme Email Theme는 키클록에서 발송되는 이메일 테마 입니다. 키클록에서는 각 테마마다 theme.properties를 가집니다. 테마의 전체 구조는 다음과 같습니다. 하지만 모든 ftl을 만들필요는 없고 커스텀.......

[keycloak] 로그인, 회원가입 페이지 커스텀

댓글