SSO 로그온 UI 구성하기

로그온 UI는 사용자가 인증되어 있지 않는 상태로 로그온을 수행할 수 있도록 UI를 제공해야 합니다.

로그온 UI는 사용자의 자격증명(Credential)을 입력할 수 있도록 구성됩니다.

보통은 사용자 아이디와 비밀번호가 대부분입니다.

샘플로 제공하는 UI 구성은 다음과 같습니다.

샘플코드

<div id="logonUi" class="log_form" style="visibility: hidden">
    <div class="form_content">
        <dl class="input_id">
            <dt>ID</dt>
            <dd>
                <input class="clearInput" type="text" id="user_id" />
            </dd>
        </dl>
        <dl class="input_pass">
            <dt>PASSWORD</dt>
            <dd>
                <input class="passInput" type="password" id="user_pw" />
            </dd>
        </dl>
        <div id="infoBox" class="info_box">
            <p id="errorMsg"></p>
        </div>
        <button type="button" onclick="OnLogon()">Logon</button>
    </div>
</div>

위 UI는 인증 실패 시 호출되는 callbackLogonFail 콜백 함수가 실행되어 표시됩니다.

function callbackLogonFail() {
	$("#dupChoice").css("visibility", "hidden");
	$("#tfaCode").css("visibility", "hidden");
	$("#userInfo").css("visibility", "hidden");
	$("#logonUi").css("visibility", "visible");

	if (!ssoErrorMessage && ssoErrorCode === 0)
		return;
	var msg = ssoErrorMessage;
	if (ssoErrorCode !== 0)
		msg += "(" + ssoErrorCode + ")";
	$("#errorMsg").text(msg);
}

로그온 버튼에 해당하는 메서드는 다음과 같습니다.

아이디, 비밀번호 인자 값으로 logon 메서드를 호출하여 로그온을 시도합니다.

function OnLogon() {
	var userId = $("#user_id");
	var userPw = $("#user_pw");
	if (!userId.val()) { userId.focus(); return; }
	if (!userPw.val()) { userPw.focus(); return; }
	logon(userId.val(), userPw.val());
}