본문 바로가기
CLASS/SPRINGBOOT

#4-2 / Bootstrap - 회원가입

by hingu 2024. 8. 19.

bootstrap example/checkout 가져옴

  👀 NICE 인증  

보안 👎

실제론 돈주고 라이브러리 다운받아서 같이 사용

 

- jsp

<head>
<meta charset="UTF-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="../css/bootstrap.min.css" rel="stylesheet">
<title>Bootstrap - 회원가입</title>

<style>
.bd-placeholder-img {
	font-size: 1.125rem;
	text-anchor: middle;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

@media ( min-width : 768px) {
	.bd-placeholder-img-lg {
		font-size: 3.5rem;
	}
}
</style>
<link href="form-validation.css" rel="stylesheet">
</head>

<body class="bg-light">

	<div class="container">
		<div class="py-5 text-center">
			<h2>회원가입</h2>
			<p class="lead">회원가입 샘플 페이지</p>
		</div>

		<div>
			<h4 class="mb-3">MEMBERSHIP</h4>
			
			<form class="needs-validation" id="frm" novalidate>
				<input type="hidden" name="nicekck" value="">
				<div class="row">
					<div class="col-md-6 mb-3">
						<label for="firstName">고객명</label> <input type="text"
							class="form-control" id="mname" placeholder="고객명을 입력하세요."
							value="" required>
					</div>
					<div class="col-md-6 mb-3">
						<label for="lastName">아이디</label> <input type="text"
							class="form-control" id="mid" placeholder="아이디를 입력하세요." value=""
							required>
					</div>
				</div>

				<div class="row">
					<div class="col-md-6 mb-3">
						<label for="firstName">패스워드</label> <input type="password"
							class="form-control" id="mpass" placeholder="패스워드를 입력하세요."
							value="" required>
					</div>
					<div class="col-md-6 mb-3">
						<label for="lastName">패스워드 확인</label> <input type="password"
							class="form-control" id="mpass2" placeholder="동일한 패스워드를 입력하세요." value=""
							required>
					</div>
				</div>

				<div class="mb-3">
					<label for="username">연락처</label>
					<div class="input-group has-validation">
						<input type="text" class="form-control" id="mtel"
							placeholder="연락처를 입력하세요." required>
						<button type="button" class="btn btn-secondary" style="margin-left:5px;" onclick="fnPopup()">인증 확인</button>
					</div>
				</div>

				<div class="mb-3">
					<label for="email">이메일</label>
					<input type="email" class="form-control" id="email"
						placeholder="이메일을 입력하세요." required>
				</div>

				<div class="mb-3">
					<label for="address">주소 입력</label> 
					<div style="display:flex; justify-content:space-between;">
						<input type="text" class="form-control" id="address" placeholder="우편번호" style="width:calc(100% - 95px)" readonly>
						<button type="button" class="btn btn-secondary">주소찾기</button>
					</div>
					<input type="text" class="form-control" id="address2" placeholder="도로명 주소" style="margin-top:5px;" readonly>
					<input type="text" class="form-control" id="address3" placeholder="상세 주소" style="margin-top:5px;">
				</div>

				<div class="mb-3">
					<label for="address2">캐릭터 이미지<span class="text-muted">(Optional)</span></label>
					<input type="file" class="" id="files"
						placeholder="대표이미지">
				</div>
				<hr class="mb-4">
				<button class="btn btn-primary btn-lg btn-block" type="submit">회원가입</button>
			</form>
			
			<form name="form_chk" method="post">
				<input type="hidden" name="m" value="checkplusSerivce">					
				<input type="hidden" name="EncodeData" value="AgAFRzk5MTZ5bGwjPvVVgtPgjjtX60MpxLCLNasf+OES5QU4oR2M6TDy6dxQgVnXcRehs54OqG7Ks3/alMFewELcvKADU9zW/4Po5W9HNsgaJWdjMRkMcgAPjkKCsOteYxYy4P85W6gx67fhMc5MEw4Ub3XAw32pTnjnZkho1/34K0cnooSsrSD0GIuuuC68mC/fVrm7nhNJ0xmvkEtW1K9MJWpppYzVEsiwltK1kVgOuo5bhZ3z2TUbgv8yFrInvCFboa9+6mx1ejBsOGheYo+Uqxqv7lhD4y9Yd7Y5FtlIZQDKk7rE+LVojHsdK7eHFf66e7BQDGiODH0WMJGMc4MJaqpFjoWJW8woB3adYSyxeUFGXJhJbDOqOSgF6UDLdfEmpFBzRXeA7KR45dy3cm6OKdBGE0OeuXG+KueH9ntMcSZfScGvlcEFWHPmhRR0Z8voozXD0tmAEOQsUH4cTgyf/DbQjZIEop8EWE9ddQZ9x0qTy3oj3lOtbC5PuIRrZEL1QxD0oZM=">	
				
				<input type="hidden" name="param_r1" value="">
				<input type="hidden" name="param_r2" value="">
				<input type="hidden" name="param_r3" value="">
			</form>
			
		</div>
	</div>

	<footer class="my-5 pt-5 text-muted text-center text-small">
		<p class="mb-1">&copy; 2017-2022 Company Name</p>
		<ul class="list-inline">
			<li class="list-inline-item"><a href="#">Privacy</a></li>
			<li class="list-inline-item"><a href="#">Terms</a></li>
			<li class="list-inline-item"><a href="#">Support</a></li>
		</ul>
	</footer>
	</div>
</body>

<script>
	document.title = "NICE I-PIN 인증 및 휴대폰 인증";
	
	function fnPopup(){
		window.open('', 'popupChk', 'width=500, height=550, top=100, left=100, fullscreen=no, menubar=no, status=no, toolbar=no, titlebar=yes, location=no, scrollbar=no');
		document.form_chk.action = "https://nice.checkplus.co.kr/CheckPlusSafeModel/checkplus.cb";
		document.form_chk.target = "popupChk";
		document.form_chk.submit();
	}
</script>

callback 핸들링도 해줘야함

ajax - 동기화,post로 처리 하는게 좋음

 

 

✅

<form name="form_chk" method="post">
<input type="hidden" name="m" value="checkplusSerivce">					
<input type="hidden" name="EncodeData" value="AgAFRzk5MTZ5bGwjPvVVgtPgjjtX60MpxLCLNasf+OES5QU4oR2M6TDy6dxQgVnXcRehs54OqG7Ks3/alMFewELcvKADU9zW/4Po5W9HNsgaJWdjMRkMcgAPjkKCsOteYxYy4P85W6gx67fhMc5MEw4Ub3XAw32pTnjnZkho1/34K0cnooSsrSD0GIuuuC68mC/fVrm7nhNJ0xmvkEtW1K9MJWpppYzVEsiwltK1kVgOuo5bhZ3z2TUbgv8yFrInvCFboa9+6mx1ejBsOGheYo+Uqxqv7lhD4y9Yd7Y5FtlIZQDKk7rE+LVojHsdK7eHFf66e7BQDGiODH0WMJGMc4MJaqpFjoWJW8woB3adYSyxeUFGXJhJbDOqOSgF6UDLdfEmpFBzRXeA7KR45dy3cm6OKdBGE0OeuXG+KueH9ntMcSZfScGvlcEFWHPmhRR0Z8voozXD0tmAEOQsUH4cTgyf/DbQjZIEop8EWE9ddQZ9x0qTy3oj3lOtbC5PuIRrZEL1QxD0oZM=">	

<input type="hidden" name="param_r1" value="">
<input type="hidden" name="param_r2" value="">
<input type="hidden" name="param_r3" value="">

</form>

<script>
document.title = "NICE I-PIN 인증 및 휴대폰 인증";

function fnPopup(){
	window.open('', 'popupChk', 'width=500, height=550, top=100, left=100, fullscreen=no, menubar=no, status=no, toolbar=no, titlebar=yes, location=no, scrollbar=no');
	document.form_chk.action = "https://nice.checkplus.co.kr/CheckPlusSafeModel/checkplus.cb";
	document.form_chk.target = "popupChk";
	document.form_chk.submit();
}
</script>

- 요거 추가함

'CLASS > SPRINGBOOT' 카테고리의 다른 글

#5-2 / thymeleaf로 데이터 출력 2  (0) 2024.08.20
#5-1 / thymeleaf로 데이터 출력 1 : text , ArrayList , Map , dao, 조건문 , checked  (0) 2024.08.20
#4-1 / Spring boot - 파일 업로드  (0) 2024.08.19
#3-1 / 회원 로그인 (외부 로그인 API 연동)  (0) 2024.08.14
#2-3 / AOP+springboot+로그기록(aop에서 dao 값 가져오기)  (0) 2024.08.13

관련글

티스토리툴바