PC에서 웹 결제 프로그램을 이용하다보면 많이 보게 되는 숫자 키패드는 생각보다 간단하게 만들 수 있다. 물론 PG사 특성상 보안 프로그램으로 2중 체크하여 처리하겠지만 보안 프로그램을 제외한다면 별반 다를것 없이 제작할 수 있다.
이번에 소개할 웹 프로그램은 PHP 와 JQUERY 를 이용하여 만든 안전 숫자 키패드 프로그램으로 간단하게 만들었기때문에 구조만 잘 판단하여 좀더 확장된 프로그램을 만들 수 있을거라 생각한다.
우선 간단하게나마 안전 숫자 키패드 프로그램에 대해 설명하자면 아래와 같다.
- 키값 원리 : 숫자+보안키로 구성
- 보안키: 세션아이디+숫자로 구성
- 키패드: 매번 랜덤하게 생성
- 키 입력 시 스크립트를 활용하여 마우스 클릭 처리
- 최종 전송 시 보안키값을 콤마(,) 단위로 하여 POST 전송
- 전송 데이터 받을 시 보안키값 데이터를 배열화하여 숫자와 매칭 하여 출력
<?php
// -> 키값 정의
$arr_num = range(0,9);
shuffle($arr_num);
$arr_key = array();
foreach($arr_num as $k=>$v){
$secure_num = md5(session_id().$v);
$arr_key[$secure_num] = $v;
}
// -> 입력값이 있을 경우
if( !empty($_POST['secureKey'])){
$rv_arr_key = explode(",",$_POST['secureKey']);
$rv_arr_num = array();
foreach($rv_arr_key as $k=>$v){
$rv_arr_num[] = $arr_key[$v];
}
$pw = implode("",$rv_arr_num);
echo '<h1>입력된 비밀번호: '.$pw.'</h1>';
echo '<hr/>';
echo '<a href="keypad.php">다시입력</a>';
exit;
}
// -> 키패드 생성
echo '<input type="password" name="pw" value="" placeholder="키패드를 이용하여 입력해 주세요." autocomplete="new-password" disabled/>';
echo '<ul>';
for($i=0;$i<12; $i++){
$each = array();
if( $i != 0 && $i%3 == 0){ echo '</ul><ul>'; }
if(in_array($i, array(9))){ echo '<li><a class="null" > </a></li>';continue;}
if(in_array($i, array(11))){ echo '<li><a class="delete off" href="#none" onclick="return false;" >←</a></li>';continue;}
$each = each($arr_key);
echo '<li><a class="key" href="#none" onclick="return false;" data-key="'.$each['key'].'" data-num="'.$each['value'].'">'.$each['value'].'</a></li>';
}
echo '</ul>';
echo '<a href="#none" onclick="return false;" class="submit">전송</a>';
?>
<!-- jquery 3.5.1 -->
<script src="//code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<!-- script -->
<script>
// -> 배열 초기화 (입력키값, 입력숫자)
var inputKey = new Array();
var inputNum = new Array();
// -> 키값 클릭 이벤트
$(document).on('click','a.key',function(e){
var thisData = $(this).data();
inputKey.push(thisData.key);
inputNum.push(thisData.num);
padInit();
});
// -> 키값 삭제 이벤트
$(document).on('click','a.delete.on',function(e){
var index = inputKey.length-1
inputKey.pop(inputKey[index]);
inputNum.pop(inputNum[index]);
padInit();
});
// -> 키값 전송 이벤트
$(document).on('click','a.submit',function(e){
submit();
});
// -> 키값 갱신 함수
function padInit(){
var $delete = $('a.delete');
if( inputKey.length > 0){
$delete.removeClass('off');
$delete.addClass('on');
}
else{
$delete.addClass('off');
$delete.removeClass('on');
}
var $pw = $('input[name="pw"]');
$pw.val(inputNum.join(''));
}
// -> 키값 전송 함수
function submit()
{
var $pw = $('input[name="pw"]');
var secureKey = inputKey.join(',');
var form = $('<form></form>');
form.attr("name","form");
form.attr("method","post");
form.attr("action","keypad.php");
form.append($('<input />',{type:'hidden',name:'secureKey', value:secureKey}));
form.appendTo('body');
form.submit();
}
</script>
<!-- css style -->
<style>
*{
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
word-break: break-all;
}
input{ width:50%; margin:30px 0; padding:50px; font-size:30px; }
a{ text-decoration: none;; display: inline-block; text-align:center; width:100%; line-height: 80px;; font-size: 30px; font-weight:900; color:#333;}
a:active{ color:#fff; background: #95afc9; }
a.null{ background:#eee;}
a.delete.off{ background:#eee; color:#999;}
a.delete.off:active{background:#eee; color:#999;}
a.submit{ width:50%; border:solid 1px #333; margin-top:30px; }
ul{ margin:0; padding:0; clear:both; display:table; border-collapse:collapse; width:50%; }
ul li{ margin:0;padding:0;float: left; list-style:none; border:solid 1px #366;display:table-cell; width:33.3%;}
ul > li { margin-top:-1px; margin-right:-1px;}
</style>
참고로 프로그램 및 CSS를 이용한 디자인을 좀더 신경 쓰고 싶었지만 라이브러리 제공 목적이 아니기에 간단한 실습 자료수준으로 제작을 하였으니 참고 하여 커스텀 하길 바란다.