everyday com-eat
카테고리
작성일
2022. 4. 20. 15:00
작성자
갱수터
728x90

문자 한 건에 20원(포인트)

처음 가입하면 300포인트 지급되어서 15건 테스트할 수 있음

 

결과

 

참고블로그

https://ohrora-developer.tistory.com/m/5

 

Spring Boot + CoolSMS

1. CoolSMS란? 카카오 알림톡 및 문자메시지 웹 발송을 지원해주는 REST API 제공 서비스이다. 단문, 장문, 포토 메시지 등을 보낼 수 있다. 2. CoolSMS 회원가입 및 API KEY 생성 https://coolsms.co.kr/ 세상에..

ohrora-developer.tistory.com

 

https://25gstory.tistory.com/88

 

Spring boot로 지금 하고 있는 프로젝트에서 coolsms연동해서 문자 인증 구현하기

일단 coolsms 가입해서 api인증키를 받아오셔야 구현하실 수 있습니다. https://coolsms.co.kr/ 세상에서 가장 안정적이고 빠른 메시지 발송 플랫폼 - 쿨에스엠에스 손쉬운 결제 전용계좌, 신용카드, 계좌

25gstory.tistory.com

 

 

 

 

sts4에서 구현하기

1. CoolSMS 가입 후 api key 발급받고, SDK다운받기

https://developer.coolsms.co.kr/SDK_Java_Getting_Started_ko

 

Getting Started - Getting Started - 쿨에스엠에스

RestAPI JAVA v2.1 10월 16일 이후로 발신번호 사전등록제로 인해 등록된 발신번호로만 문자를 보내실 수 있습니다. 아래 관련링크를 참조해주세요. - 발신번호 사전등록제 공지사항 - JAVA SDK 발신번호

developer.coolsms.co.kr

 

 

2. springboot에 라이브러리 설치

리소스 폴더에 lib 폴더 안에 다운받은 라이브러리 jar 파일 추가하고

프로젝트 우클릭 > [Build Path] > [Configure Build Path]

 

[Libraries] 탭에서 [Add JARs] 클릭후 lib 폴더에 넣었던 jar파일 2개 추가하기

 

 

3. VIEW단 작성

HTML

<div class="form-group phoneCertifyDiv">
	<label class="inputTitle">휴대폰 번호</label><br>
	<div class="phoneNum-formgroup">
		<input th:if="${memberPhone != null}" type="text" name="memberPhone" class="phoneNum" readonly th:value="${memberPhone}">
		<input th:unless="${memberPhone != null}" type="text" name="memberPhone" class="phoneNum" >
		<input type="button" id="memberPhoneCheck" class="btn memberPhoneBtn active" value="인증번호 전송">
	</div>
	<div class="phoneNum-formgroup" id="phoneCertifyDiv">
		<input type="text" name="memberPhoneCertify" class="phoneNum">
		<input type="button" id="certifyCheck" class="btn memberPhoneBtn" value="인증하기">
	</div>
</div>

form으로 controller 단에 넘기기엔 이미 from안에 들어있는 구성요소라 ajax로 controller로 보냄

 

JS

//휴대폰번호 인증번호 보내기 버튼 클릭 이벤트
$('#memberPhoneCheck').click(function(){

	var to = $('input[name="memberPhone"]').val();
	$.ajax({
		url : "/memberPhoneCheck",
		type : "POST",
		data : "to=" + to,
		dataType : "json",
		success : function(data) {
			const checkNum = data;
			alert('checkNum:'+ checkNum);
			
            //인증하기 버튼 클릭 이벤트
			$('#certifyCheck').click(function(){
				const userNum = $('input[name="memberPhoneCertify"]').val();		
				if(checkNum == userNum){
					alert('인증 성공하였습니다.');
				}else {
					alert('인증 실패하였습니다. 다시 입력해주세요.');
				}
			});
            
		},
		error : function() {
			alert("에러")
		}
	});
});

 

 

4. Controller 작성

//문자 인증
@PostMapping("/memberPhoneCheck")
public @ResponseBody String memberPhoneCheck(@RequestParam(value="to") String to) throws CoolsmsException {
		
	return paymentService.PhoneNumberCheck(to);
}

 

 

5. Service 작성

//휴대폰번호 인증문자 보내기
public String PhoneNumberCheck(String to) throws CoolsmsException{
	String api_key = "발급받은 api key";
	String api_secret = "발급받은 api secret";
	Message coolsms = new Message(api_key, api_secret);
		
	
	Random rand = new Random(); 
	String numStr = "";
	for(int i=0; i<4; i++) {
		String ran = Integer.toString(rand.nextInt(10)); 
		numStr += ran;
	}
	  
	HashMap<String, String> params = new HashMap<String, String>();
    params.put("to", to);    // 수신전화번호 (ajax로 view 화면에서 받아온 값으로 넘김)
    params.put("from", "01000000000");    // 발신전화번호. 테스트시에는 발신,수신 둘다 본인 번호로 하면 됨
    params.put("type", "sms"); 
    params.put("text", "AI 쌍방향 홈트레이닝 인증번호는 [" + numStr + "] 입니다.");

    coolsms.send(params); // 메시지 전송
		  
		  
	return numStr;
	 
}