휴대폰 sms 인증번호 구현 (네이버 클라우드 플랫폼)

인증번호 필요한 부분에 해당 기능 가져다 쓸 것

---

---

VIEW

 

 

인증번호 관련 html 코드

(나머지 html 태그는 제외)

<table>
    <tr>
        <td class="td_width">
            <input class="form-control" type="tel" id="phoneNumber" name="phone" placeholder="휴대폰 번호 (- 제외)" aria-label="default input example" required/>
        </td>
        <td>
            <button type="button" id="sendConfirmNum" class="btn btn-primary btn-default" style="background-color: #4373E6;">인증번호</button>
        </td>
    </tr>
    <tr>
        <td class="td_width">
            <input class="form-control" type="text" id="code" name="code" placeholder="인증번호" aria-label="default input example" required/>
        </td>
        <td>
            <button type="button" id="checkConfirmNum" class="btn btn-primary btn-default" style="background-color: #4373E6;">인증확인</button>
        </td>
    </tr>
    <tr>
        <td>
            <label id="checkCodeResult">★ 인증번호를 입력해주세요.</label>
        </td>
        <td></td>
    </tr>
</table>

 

 

자바스크립트

1) '인증번호' 버튼 클릭 시 서버로부터 인증번호 받기

// ● ● ● '인증번호' 버튼 클릭 시 서버로부터 인증번호 받아오기
    let num = "";
    const sendConfirmNum = document.getElementById('sendConfirmNum');
    sendConfirmNum.addEventListener('click', ()=>{
        $.ajax({
              type: "POST",
              dataType: 'json',
              url: "sms/send",
              async: false,
              data: {
                "phone": $("input[name=phone]").val() // 입력된 휴대폰번호 가져오기
              },
              success: function(data) {
                num = data.smsConfirmNum; // 받아온 인증번호를 저장 
                console.log('data : ' + data);
                console.log('num : ' + num);
               $('#smsModal').modal('show');
              },
              error: function(error) {
                console.log("인증번호 받아오기 실패...");
                console.log(error);
              }
        });
        $('#phoneNumber').attr('disabled', true); // 수정 불가
    });

≫ 서버로 보내 받아온 data가 있을 경우 그 안의 smsConfirmNum을 num에 담음

≫ 또한 인증번호 전송 시, #phoneNumber가 비활성화되도록 설정

 

2) '인증확인' 버튼 클릭 시 사용자가 입력한 인증번호와의 일치 여부 확인

// ● ● ● '인증확인' 버튼 클릭 시 입력한 인증번호와의 일치 여부 확인
    const checkConfirmNum = document.getElementById('checkConfirmNum'); // 인증확인 버튼
    const checkCodeResult = document.getElementById('checkCodeResult');
    const code = document.getElementById('code');

    checkConfirmNum.addEventListener('click', ()=>{
        if(code.value.trim() == ''){
            checkCodeResult.innerText = '휴대폰 인증을 진행해주세요.';
            checkCodeResult.style.color = '#DC6089';
        } else{
            if(code.value.trim() == num){
                checkCodeResult.innerText = '🍀인증번호가 일치합니다.';
                checkCodeResult.style.color = '#4373E6';
                flagPhone = true
                if(flagId == true){
                    $('#signUp').attr('disabled', false);
                }
            } else {
                checkCodeResult.innerText = '인증번호가 불일치합니다.';
                checkCodeResult.style.color = '#DC6089';
                $('#signUp').attr('disabled', true);
            }
        }
    });

≫ 휴대폰 번호가 비어있거나, 일치하는 경우를 비교하기 위해 조건문으로 나눔

≫ 플래그 함수를 이용하여 flagPhone 과 flagId(아이디 중복확인)이 true인 경우에만

　회원가입 버튼이 활성화될 수 있도록 설정

 

+) 플래그 함수 두 가지를 false로 미리 선언해 둠

window.onload = () =>{
    let flagId = false;
    let flagPhone = false;
}

 

3) 회원가입 버튼 클릭 시 발생할 것들

// 회원가입 버튼을 눌렀을 때,
// 1. 폰 번호 넘길 수 있도록 하기, 2. 모달 보여주기
    const signUpBtn = document.getElementById('signUp');
    signUpBtn.addEventListener('click', ()=>{
        $('#phoneNumber').attr('disabled', false);
        $('#signUpModal').modal('show');
    });

≫ #phoneNumber 는 사용자가 입력한 휴대폰 번호를 받는 input 태그,

　속성이 'disabled' 일 경우 서버로 데이터 전송이 되지 않음.

　따라서 회원가입 버튼 클릭 시 이벤트 발생하게 하여 disabled를 false로 변경 + 모달 발생

 

 

---

MODEL

 

 

Message 객체

// import 생략

@AllArgsConstructor
@NoArgsConstructor
@Setter
@Getter
@Builder
public class Message {
	private String to;	// 사용자 입력 값 = 휴대폰 번호
}

 

 

SmsRequest 객체

// import 생략

@AllArgsConstructor
@NoArgsConstructor
@Setter
@Getter
@Builder
public class SmsRequest {	// 네이버에 요청 보내는 애
	private String type;
	private String contentType;
	private String countryCode;
	private String from;
	private String content;
	private List<Message> messages;
	
}

 

 

SmsResponse 객체

// import 생략

@AllArgsConstructor
@NoArgsConstructor
@Setter
@Getter
@Builder
public class SmsResponse {		// 네이버로부터 응답받는 애
	private String requestId;
	private LocalDateTime requestTime;
	private String statusCode;			// 요청 성공하면 HTTP 상태코드가 200!
	private String statusName;
	private String smsConfirmNum;
}

 

 

---

CONTROLLER

 

 

SmsController

(아니 무슨 import가 이렇게 많지?)

package semi.project.bookmaroo.member.controller;

// import 생략

@Controller
@RequiredArgsConstructor
public class SmsController {
	
	private final SmsService smsService;
	
	@PostMapping("/sms/send")
	@ResponseBody		// 데이터 객체에 "phone"이란 이름으로 사용자가 입력한 휴대폰번호가 담김
	public String sendSms(String phone , Model model) throws JsonProcessingException, RestClientException, URISyntaxException, InvalidKeyException, NoSuchAlgorithmException, UnsupportedEncodingException {
//		System.out.println("ㅎㅎ");
		SmsResponse response;
		ObjectMapper objectMapper = new ObjectMapper();
		String responseJson = "";
		try {
	        
			Message message = new Message(phone);	// Message 객체 생성해서 입력받은 phone 값 'to' 속성에 넣어줌
			response = smsService.sendSms(message);
//			model.addAttribute("response", response);						// json 타입의 String 으로 변환
			responseJson = objectMapper.registerModule(new JavaTimeModule()).writeValueAsString(response);
//			System.out.println(responseJson);						// pom.xml에 'Jackson Datatype : JSR310' 설정
		} catch (Throwable e) {
			e.printStackTrace();
		}
		System.out.println("responseJson : " + responseJson);
		return responseJson;
	}
}

－@ResponseBody 어노테이션 : 해당 메소드의 반환 값을 HTTP 응답의 body로 사용하도록 지정

－ObjectMapper 인스턴스 생성 : 해당 인스턴스는 객체를 JSON 문자열로 변환 or JSON 문자열을 객체로 변환 시 사용

－responseJson = objectMapper.registerModule(new JavaTimeModule()).writeValueAsString(response);

　: response 객체를 JSON 문자열로 변환하여 responseJson 변수에 할당

　이때 JavaTimeModule을 등록하여 날짜와 시간을 JSON 문자열로 직렬화할 수 있도록 설정

 

 

---

SERVICE

@Service
public class SmsServiceImpl implements SmsService {
	
	// @Value : 설정 파일(properties) 값 가져오는 역할
	@Value("${naver-cloud-sms.accessKey}")
	private String accessKey;	// 키를 통해 가져와 변수에 담음
	
	@Value("${naver-cloud-sms.secretKey}")
	private String secretKey;
	
	@Value("${naver-cloud-sms.serviceId}")
	private String serviceId;
 
	@Value("${naver-cloud-sms.senderPhone}")
	private String phone;
	
	public String makeSignature(Long time) throws NoSuchAlgorithmException, UnsupportedEncodingException, InvalidKeyException {
		String space = " ";
        String newLine = "\n";
        String method = "POST";
        String url = "/sms/v2/services/"+ this.serviceId+"/messages";
        String timestamp = time.toString();
        String accessKey = this.accessKey;
        String secretKey = this.secretKey;
 
        String message = new StringBuilder()	// Builder
                .append(method)
                .append(space)
                .append(url)
                .append(newLine)
                .append(timestamp)
                .append(newLine)
                .append(accessKey)
                .toString();
 
        SecretKeySpec signingKey = new SecretKeySpec(secretKey.getBytes("UTF-8"), "HmacSHA256");
        Mac mac = Mac.getInstance("HmacSHA256");
        mac.init(signingKey);
 
        byte[] rawHmac = mac.doFinal(message.getBytes("UTF-8"));
        String encodeBase64String = Base64.encodeBase64String(rawHmac);
 
        return encodeBase64String;
	}

 

 

public SmsResponse sendSms(Message message) throws JsonProcessingException, RestClientException, URISyntaxException, InvalidKeyException, NoSuchAlgorithmException, UnsupportedEncodingException {
		String smsConfirm = createSmsKey(); // 인증번호 만들기 (아래 메소드 있음)
		Long time = System.currentTimeMillis();
		
		HttpHeaders headers = new HttpHeaders();
		headers.setContentType(MediaType.APPLICATION_JSON);
		headers.set("x-ncp-apigw-timestamp", time.toString());				// header
		headers.set("x-ncp-iam-access-key", accessKey);						// 네이버 클라우드가 원하는 정보 넣어주는 곳
		headers.set("x-ncp-apigw-signature-v2", makeSignature(time));
		
		List<Message> messages = new ArrayList<>();
		messages.add(message);	// 1개여도 list에 담아서 보냄 (정해진 규칙)
		
		SmsRequest request = SmsRequest.builder() // 네이버에게 요청 보내기
				.type("SMS")
				.contentType("COMM")
				.countryCode("82")					// 메소드 체이닝					
				.from(phone) // 발신자
				.content("[책마루]\n인증번호 〈" + smsConfirm + "〉를 입력해주세요(^^)♪")
				.messages(messages) // 수신 번호 리스트 (하지만 우리는 하나만 입력 받음. 위 88번째 줄)
				.build();	// 객체 생성
		
	
		ObjectMapper objectMapper = new ObjectMapper(); // 객체에 대한 매핑을 도와줌 → ObjectMapper
		String body = objectMapper.writeValueAsString(request);	// 메소드로 보낼 수 있는 형태로 만듦  	// body
								// └ 이 메소드가 객체를 JSON 형태로 바꿈 (이미 정의된 메소드)
		HttpEntity<String> httpBody = new HttpEntity<>(body, headers);
		// └ HTTP 패킷을 생성해 줌.
		// HTTP 안에는 크게 header와 body로 나뉨
		
		SmsResponse response = null;
		try {
			// ┌ 통신 도와주는 애 (서버 → 서버 로 요청 보낼 때 자주 쓰임)
			RestTemplate restTemplate = new RestTemplate();
		    restTemplate.setRequestFactory(new HttpComponentsClientHttpRequestFactory());								
//		    System.out.println(serviceId);																										// 응답 클래스 지정
		    response = restTemplate.postForObject(new URI("https://sens.apigw.ntruss.com/sms/v2/services/" + serviceId + "/messages"), httpBody, SmsResponse.class);
		    response.setSmsConfirmNum(smsConfirm);	// └ postForObject : 응답 결과를 객체로 받는 메소드
	    											// SmsResponse.class : 객체 받을 타입을 정해주는 인자(객체 만들 클래스를 지정한 것 → SmsResponse)
		} catch (Exception e) {
			e.printStackTrace();
		}
		return response;	
	}

 

 

// 인증번호 만들기
	public static String createSmsKey() {
		StringBuffer key = new StringBuffer();
		Random rnd = new Random();
		
		for(int i = 0; i < 5; i++) {
			key.append(rnd.nextInt(10));
		}
		
		return key.toString();
	}

 

 

---

APPLICATION.PROPERTIES

naver-cloud-sms.accessKey=
naver-cloud-sms.secretKey=
naver-cloud-sms.serviceId=
naver-cloud-sms.senderPhone=