Spring 회원가입양식 만들기(Ajax를 활용한 비동기 방식)(3)
- 목차 -
(1) 핸드폰 문자인증
시작전 준비해야되는 것들
coolsms 회원가입
문자 인증을 하기 위해서 가장 쉽게 접근할 수 있는 부분이 API를 이용한 접근이라고 생각합니다.(무료로 발송하는 방법을 찾아 해보려고 했지만 세상에 꽁짜는 없죠...ㅠㅠ)
coolsms에 회원가입을 하면 300포인트 정도를 무료로 주는데 간단하게 문자 인증 체계를 테스트해보기에는 충분하다고 봅니다.(문자 발송시 1건당 20포인트가 차감되고 보유 포인트가 없을 시 서비스가 중단되기 때문에 자동 결제 계좌만 연동 시켜놓지 않으면 과금 문제는 없습니다.)
pom.xml
※(Spring에서 문자 서비스를 사용하기 위해 추가할 maven은 아래와 같습니다.)
<!-- 문자 인증관련 라이브러리 -->
<dependency>
<groupId>net.nurigo</groupId>
<artifactId>javaSDK</artifactId>
<version>2.2</version>
</dependency>이제 필요한 것들은 모두 준비되었습니다. HTML5부터 차근차근 해봅시다.
(1) 핸드폰 문자 인증
HTML5
<tr class="mobileNo">
<th>
<label for="phone">휴대폰 번호</label>
</th>
<td>
<p>
<input id="phone" type="text" name="phone" title="전화번호 입력" required/>
<span id="phoneChk" class="doubleChk">인증번호 보내기</span><br/>
<input id="phone2" type="text" name="phone2" title="인증번호 입력" disabled required/>
<span id="phoneChk2" class="doubleChk">본인인증</span>
<span class="point successPhoneChk">휴대폰 번호 입력후 인증번호 보내기를 해주십시오.</span>
<input type="hidden" id="phoneDoubleChk"/>
</p>
<p class="tip">
최초 가입 시에만 사용하고 있습니다. 따로 저장되지 않습니다.(번호만 입력해주세요.)
</p>
</td>
</tr>※phoneDoubleChk은 유효성 검사를 하기 위해 추가하였습니다.
JavaScript(jQuery)
//휴대폰 번호 인증
var code2 = "";
$("#phoneChk").click(function(){
alert("인증번호 발송이 완료되었습니다.\n휴대폰에서 인증번호 확인을 해주십시오.");
var phone = $("#phone").val();
$.ajax({
type:"GET",
url:"phoneCheck?phone=" + phone,
cache : false,
success:function(data){
if(data == "error"){
alert("휴대폰 번호가 올바르지 않습니다.")
$(".successPhoneChk").text("유효한 번호를 입력해주세요.");
$(".successPhoneChk").css("color","red");
$("#phone").attr("autofocus",true);
}else{
$("#phone2").attr("disabled",false);
$("#phoneChk2").css("display","inline-block");
$(".successPhoneChk").text("인증번호를 입력한 뒤 본인인증을 눌러주십시오.");
$(".successPhoneChk").css("color","green");
$("#phone").attr("readonly",true);
code2 = data;
}
}
});
});※인증번호가 정상적으로 보내졌다면 인증번호 입력하는 input창의 disabled되어있는 부분을 false로 풀어줍니다.
그리고 핸드폰 번호를 입력했던 창은 readonly로 바꿔줌으로써 가입자가 문자 인증 후 번호를 바꿔 저장하는 문제를 방지해줄 수 있습니다.
** disabled와 readonly의 차이점 : disabled는 컨트롤러로 값을 전달하지 않습니다. 값 자체를 숨겨버립니다.
readonly는 컨트롤러로 값을 전달합니다. 값은 저장되지만 수정할 수 없는 상태로 만듭니다.
disabled : value="010-1234-5678" -> value=""
readonly : value ="010-1234-5678" -> value="010-1234-5678"
Controller
(Ajax를 사용할 때는 @ResponseBody 꼭 있어야 합니다.)
@RequestMapping(value = "/phoneCheck", method = RequestMethod.GET)
@ResponseBody
public String sendSMS(@RequestParam("phone") String userPhoneNumber) { // 휴대폰 문자보내기
int randomNumber = (int)((Math.random()* (9999 - 1000 + 1)) + 1000);//난수 생성
testService.certifiedPhoneNumber(userPhoneNumber,randomNumber);
return Integer.toString(randomNumber);
}※문자 인증시 사용할 난수를 생성해줍니다. 이번에는 컨트롤러에서 모두 작업해서 보내는 것이 아닌 서비스에서 작업할 내용을 다뤄보겠습니다.
Service
public void certifiedPhoneNumber(String userPhoneNumber, int randomNumber) {
String api_key = "coolsms 본인 API키 입력";
String api_secret = "coolsms 본인 API_secret키 입력";
Message coolsms = new Message(api_key, api_secret);
// 4 params(to, from, type, text) are mandatory. must be filled
HashMap<String, String> params = new HashMap<String, String>();
params.put("to", userPhoneNumber); // 수신전화번호
params.put("from", "자신의 번호"); // 발신전화번호. 테스트시에는 발신,수신 둘다 본인 번호로 하면 됨
params.put("type", "SMS");
params.put("text", "[TEST] 인증번호는" + "["+randomNumber+"]" + "입니다."); // 문자 내용 입력
params.put("app_version", "test app 1.2"); // application name and version
try {
JSONObject obj = (JSONObject) coolsms.send(params);
System.out.println(obj.toString());
} catch (CoolsmsException e) {
System.out.println(e.getMessage());
System.out.println(e.getCode());
}
}※API키와 API_secret 키는 coolsms 대시보드(개발 / 연동 -> API 키 관리)에서 확인 가능합니다.
API키는 좌측 첫번째에서 확인 가능합니다.
secret키는 가운데에 있는 API Secret키에서 확인 가능합니다.(지문모양을 누르면 로그인시 입력한 비밀번호를 입력하는 창이 나옵니다. 비밀번호 입력후 해당 API키의 secret키를 볼 수 있습니다.)
추가적인 DAO작업과 Mapper작업은 없습니다. Service에서 coolsms에 정보를 보내 coolsms에서 입력자 번호로 문자가 전송됩니다.
JavaScript(jQuery)
//휴대폰 인증번호 대조
$("#phoneChk2").click(function(){
if($("#phone2").val() == code2){
$(".successPhoneChk").text("인증번호가 일치합니다.");
$(".successPhoneChk").css("color","green");
$("#phoneDoubleChk").val("true");
$("#phone2").attr("disabled",true);
}else{
$(".successPhoneChk").text("인증번호가 일치하지 않습니다. 확인해주시기 바랍니다.");
$(".successPhoneChk").css("color","red");
$("#phoneDoubleChk").val("false");
$(this).attr("autofocus",true);
}
});※이제 문자을 보내고 나면 활성화된 인증번호 입력란에 인증번호를 입력하고 인증 버튼을 누르면 기존에 넘어왔던 인증번호와 사용자가 입력한 번호를 대조해주고 맞다면 마찬가지로 phoneDoubleChk에 true가 저장될 수 있도록 해줍니다.
결과
이메일도 그렇고 휴대폰 번호 입력 때도 @, .com, 전화번호에 -를 입력했는지, 번호만 입력했는지 검사하는 자바스크립트 혹은 컨트롤러에서의 작업, SQL injection등의 공격을 예방하기 위한 보안 조치등은 하지 않았습니다. 본인이 재미를 위해서 혹은 간단한 프로젝트에서 사용하는 것이 아닌 실제로 서비스를 하기 위해 사용한다면 이런 보안 조치는 필수 입니다.
악의적으로 특수 문자등 엉뚱한 내용을 입력해 공격하는 사용자가 있을 수도 있기 때문에 error페이지를 별도로 만들어 코드 유출이 안되게 한다던지 입력을 방지하는 스크립트를 만든다던지하는 조치를 하면 좋을 것 같습니다.
(본 내용에서는 이와 관련된 내용을 다루고 있지 않습니다.)