SSO 로그온 UI 구성하기

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

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

사용자 아이디와 비밀번호가 일반적입니다. 샘플로 제공하는 UI 구성은 다음과 같습니다.

파일명

설명

Logon.cshtml

일반적인 방식으로 사용자 아이디, 비밀번호를 입력할 수 있는 UI 샘플

LogonEnc.cshtml

Logon.cshtml과 전반적으로 동일하나 비밀번호 암호화 처리가 추가된 UI 샘플

LogonTFA.cshtml

2-Factor 인증 사시 1단계 인증 방식(사용자 자격증명 입력과 보안코드를 함께 입력)의 UI 샘플

[SSO/SSOController.cs] 의 샘플 코드

SSOController.cs

public ActionResult Logon()
{
	// SSO 인증 서버가 Logon 액션 메소드로 리다이렉트할 때 몇가지 정보를 HTTP POST로 전달해 준다.
	// 이 정보는 하기와 같다.
	// ssoSite : 이 정보는 SSO 인증 확인을 요청한 웹 응용 프로그램의 식별자이다.
	// returnURL : 이 정보는 SSO 인증을 완료한 후에 최종적으로 사용자에 제공할 웹 응용 프로그램의 URL이다.
	// policyVersion : 이 정보는 SSO 인증 서버가 사용하고 있는 인증 정책의 버전 번호이다. 만약에 이 웹 응용 프로그램이 
	// 사용하고 있는 인증 정책 버전과 policyVersion이 다를 경우에, 이 웹 응용 프로그램의 인증 정책을 초기화 해야 한다.
	// 또한 ssoSite와 returnURL은 이 웹 응용 프로그램과 관련되어 있지 않은 정보가 전달될 수 있다. 따라서 이 두가지 정보는
	// SSO 인증 서버로 부터 받은 정보를 그대로 다시 SSO 인증 서버로 전달해 주어야 한다. 비즈니스 요건에 따라서는 원하는 값으로
	// 변경하여 전송하는 것은 가능하지만, 가급적 전달된 정보를 변경하지 않고 그대로 사용할 것을 권장한다.
				
	// 이미 사용자가 SSO 인증을 받은 상태에서, 로그온 UI를 요청할 경우를 대비해서 SSO 인증 확인을 한다.
	AuthCheck authCheck = new AuthCheck(Request, Response);
	AuthStatus status = authCheck.CheckLogon();
	if (status == AuthStatus.SSOSuccess)
	{
		// 인증 상태 검사에서 성공했기 때문에, 이미 사용자는 인증을 완료한 상태이다. 더 이상 로그온 UI를 제공할 이유가 없기 때문에,
		// 비즈니스 요건에 맞는 URL로 사용자를 이동시킨다.
		// 이 샘플에서는 Home/Index로 이동시킨다.
		return RedirectToAction("Index", "Home");
	}
	else if (status == AuthStatus.SSOUnAvailable)
	{
		// 인증 상태 검사 결과가 SSO 인증 서버가 서비스를 제공할 수 없는 상태이다.
		// 이 경우에는 SSO 인증을 서비스 받을 수 없는 상황이기 때문에, 자체적으로 제공하는 로그온 UI를 제공하며, 
		// 사용자에게 웹 응용 프로그램에서 제공하는 서비스를 제공해 주어야 한다.
		// TODO 이곳에 자체 로그온 UI를 제공할 수 있는 코드를 추가한다.
	}


	LogonViewModel model = new LogonViewModel(authCheck.CurrentSSOProvider);
	model.SetPostInfo(authCheck, authCheck.CurrentSSOProvider);

	return View(model);
}

[Views/SSO/Logon.cshtml] 의 샘플 코드

Logon.cshtml

@{
	Layout = null;
}
 
<!DOCTYPE html> 
<html>
<head>
	<meta name="viewport" content="width=device-width" />
	<title>Logon</title>
	@Model.SSOCheckUrl 
	<script type="text/javascript">
		function OnLogon() {
			if (document.forms["frmLogon"].txtUserID.value == "") {
				alert("사용자 ID를 입력하세요");
				document.forms["frmLogon"].txtUserID.focus();
				return;
			}
			if (document.forms["frmLogon"].txtPwd.value == "") {
				alert("사용자의 로그온 비밀번호를 입력하세요");
				document.forms["frmLogon"].txtPwd.focus();
				return;
			}
			document.forms["frmLogon"].target = "_top";
			
			document.forms["frmLogon"].submit();
		}
		function OnLoad() {
			if (document.forms["frmLogon"].txtUserID.value == "") {
				document.forms["frmLogon"].txtUserID.focus();
			} else {
				document.forms["frmLogon"].txtPwd.focus();
			}
		}
	</script> 
</head>
<body>
	<div> 
		<form id="frmLogon" name="frmLogon" method="post" action="@Model.SSOServerLogonUrl">
			<table>
				<tr>
				<td>사용자 ID : </td>			<td><input type="text" id="txtUserID" name="@Model.UserIdTagName" style="width: 150px;" /></td>
				</tr>
				<tr>
				<td>비밀번호 : </td>					<td><input type="password" id="txtPwd" name="@Model.PwdTagName" style="width: 150px;" /></td>
				</tr>
				<tr>					<td colspan="2"><input type="button" id="btnLogon" name="btnLogon" onclick="OnLogon();" value="로그온" /></td>
				</tr>
			</table>
			<input type="hidden" name="@Model.CredTypeTagName" value="BASIC" />
			<input type="hidden" name="@Model.ReturnUrlTagName" value="@Model.ReturnUrl" />
			<input type="hidden" name="@Model.SiteTagName" value="@Model.SiteID" />
		</form>
	</div>
</body>
</html>

Previous.NET MVC Next업무 시스템 로그온 로직 구현하기

Last updated 5 years ago

Was this helpful?

public ActionResult Logon() { // SSO 인증 서버가 Logon 액션 메소드로 리다이렉트할 때 몇가지 정보를 HTTP POST로 전달해 준다. // 이 정보는 하기와 같다. // ssoSite : 이 정보는 SSO 인증 확인을 요청한 웹 응용 프로그램의 식별자이다. // returnURL : 이 정보는 SSO 인증을 완료한 후에 최종적으로 사용자에 제공할 웹 응용 프로그램의 URL이다. // policyVersion : 이 정보는 SSO 인증 서버가 사용하고 있는 인증 정책의 버전 번호이다. 만약에 이 웹 응용 프로그램이 // 사용하고 있는 인증 정책 버전과 policyVersion이 다를 경우에, 이 웹 응용 프로그램의 인증 정책을 초기화 해야 한다. // 또한 ssoSite와 returnURL은 이 웹 응용 프로그램과 관련되어 있지 않은 정보가 전달될 수 있다. 따라서 이 두가지 정보는 // SSO 인증 서버로 부터 받은 정보를 그대로 다시 SSO 인증 서버로 전달해 주어야 한다. 비즈니스 요건에 따라서는 원하는 값으로 // 변경하여 전송하는 것은 가능하지만, 가급적 전달된 정보를 변경하지 않고 그대로 사용할 것을 권장한다. // 이미 사용자가 SSO 인증을 받은 상태에서, 로그온 UI를 요청할 경우를 대비해서 SSO 인증 확인을 한다. AuthCheck authCheck = new AuthCheck(Request, Response); AuthStatus status = authCheck.CheckLogon(); if (status == AuthStatus.SSOSuccess) { // 인증 상태 검사에서 성공했기 때문에, 이미 사용자는 인증을 완료한 상태이다. 더 이상 로그온 UI를 제공할 이유가 없기 때문에, // 비즈니스 요건에 맞는 URL로 사용자를 이동시킨다. // 이 샘플에서는 Home/Index로 이동시킨다. return RedirectToAction("Index", "Home"); } else if (status == AuthStatus.SSOUnAvailable) { // 인증 상태 검사 결과가 SSO 인증 서버가 서비스를 제공할 수 없는 상태이다. // 이 경우에는 SSO 인증을 서비스 받을 수 없는 상황이기 때문에, 자체적으로 제공하는 로그온 UI를 제공하며, // 사용자에게 웹 응용 프로그램에서 제공하는 서비스를 제공해 주어야 한다. // TODO 이곳에 자체 로그온 UI를 제공할 수 있는 코드를 추가한다. } LogonViewModel model = new LogonViewModel(authCheck.CurrentSSOProvider); model.SetPostInfo(authCheck, authCheck.CurrentSSOProvider); return View(model); }

@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Logon</title> @Model.SSOCheckUrl <script type="text/javascript"> function OnLogon() { if (document.forms["frmLogon"].txtUserID.value == "") { alert("사용자 ID를 입력하세요"); document.forms["frmLogon"].txtUserID.focus(); return; } if (document.forms["frmLogon"].txtPwd.value == "") { alert("사용자의 로그온 비밀번호를 입력하세요"); document.forms["frmLogon"].txtPwd.focus(); return; } document.forms["frmLogon"].target = "_top"; document.forms["frmLogon"].submit(); } function OnLoad() { if (document.forms["frmLogon"].txtUserID.value == "") { document.forms["frmLogon"].txtUserID.focus(); } else { document.forms["frmLogon"].txtPwd.focus(); } } </script> </head> <body> <div> <form id="frmLogon" name="frmLogon" method="post" action="@Model.SSOServerLogonUrl"> <table> <tr> <td>사용자 ID : </td> <td><input type="text" id="txtUserID" name="@Model.UserIdTagName" style="width: 150px;" /></td> </tr> <tr> <td>비밀번호 : </td> <td><input type="password" id="txtPwd" name="@Model.PwdTagName" style="width: 150px;" /></td> </tr> <tr> <td colspan="2"><input type="button" id="btnLogon" name="btnLogon" onclick="OnLogon();" value="로그온" /></td> </tr> </table> <input type="hidden" name="@Model.CredTypeTagName" value="BASIC" /> <input type="hidden" name="@Model.ReturnUrlTagName" value="@Model.ReturnUrl" /> <input type="hidden" name="@Model.SiteTagName" value="@Model.SiteID" /> </form> </div> </body> </html>