[프로젝트] 문자 API
회원가입 시 문자 인증을 통해 가입할 수 있도록 하기 위하여 문자 API를 사용해보았다.
타이머를 생성하여 인증번호 전송 후 3분동안 인증할 수 있도록 하였고, 3분이 지나면 인증번호 확인 버튼을 비활성화 시키도록 작성하였다.
문자 API 코드 및 키 발급
https://console.coolsms.co.kr/oauth2/login?message=%EB%A1%9C%EA%B7%B8%EC%9D%B8%EC%9D%B4+%ED%95%84%EC%9A%94%ED%95%A9%EB%8B%88%EB%8B%A4&returnUrl=http%3A%2F%2Fconsole.coolsms.co.kr%2Fdashboard
console.coolsms.co.kr
1. sendVO
VO를 생성하여 사용자의 핸드폰 번호를 저장할 변수와 사용자가 받은 인증번호를 비교할 변수를 선언하였다.
2. sendDAO
1) sendmsg 함수
random 함수를 사용하여 4자리의 랜덤 숫자를 생성하였다.
key : to value : 사용자가 입력한 번호
key : from value : 사용자에게 인증문자를 보낼 관리자의 번호
key : type value : 인증할 방식
key : text value : 사용자에게 보여줄 문자형식
2) sendCheck
발송한 랜덤 인증문자와 사용자가 입력한 인증문자가 동일한지 확인하는 함수
동일할 경우 1 반환, 동일하지 않을 경우 0반환
3. signup.jsp(사용자의 번호를 입력하는 부분)
사용자의 번호를 입력하는 input 태그와 이벤트를 발생시킬 버튼의 id명을 부여하였다.
인증번호 입력하는 부분
인증번호 발생 버튼 클릭 시 인증번호를 입력하는 div태그가 출력되도록 하였으며, 타이머를 설정할 span 태그를 포함하고 있다.
4. signup.js(이벤트 발생)
인증번호를 저장할 변수를 생성, 인증번호 발송 버튼 클릭 시 sendAuthNum 함수가 실행된다.
타이머 시간을 180초(3분)으로 지정하였고, timer id명을 가진 span 태그가 출력되도록 하였다.
sendAuthNum 함수를 통하여 startTimer 함수가 실행된다.
url로 sendMSG 요청을 하게 되고 phone 파라미터값과 함께 서블릿 파일로 이동한다.
5. sendMSG.java(sendMSG 요청된 서블릿)
사용자의 번호 파라미터 값을 VO 객체의 Phone 변수에 저장하고 위 DAO에서 선언한 sendmsg 함수의 인자로 사용한다.
=> 인증번호가 생성되고 사용자에게 인증번호가 전송된다.
4번의 ajax 하단 부분
인증번호를 json 문자열로 가져와 인증번호 발송에 성공했다면 '인증번호 전송 완료' 문구가 출력된다.
6. signup.js (타이머 시작, 인증번호 전송 다음으로 이벤트 발생)
인증번호 발송 성공과 함께 타이머가 출력된다. 만약 타이머가 설정된 시간(3분)을 초과할 시 인증번호 초기화와 함께 버튼이 비활성화 되도록 하였다.
7. signup.js(인증번호 확인 부분)
3번에서 인증번호 확인 부분에 인증번호를 입력하고 버튼 클릭 시 발생하는 이벤트이다.
버튼 클릭 시 랜덤 인증번호와 사용자가 입력한 인증번호 데이터를 가지고 sendCheck을 요청하게 된다. => 서블릿 이동
8. sendCheck.java(서블릿)
sendCheck 요청을 받은 후 서블릿으로 이동하고 랜덤 인증번호와 사용자가 입력한 인증번호의 파라미터 값을 VO 객체에 set 해준다.
DAO에서 선언한 sendCheck 메서드를 통해 두 인증번호가 서로 일치하는지 확인하고 반환값을 다시 ajax로 응답처리 한다.
7번의 하단 부분
서블릿으로부터 응답받은 result 값을 통하여 인증번호가 서로 일치할 때 (result ==1) 타이머를 초기화 시키고 '본인 인증 성공' 문구가 출력되도록 하였다.
결과 값
번호 입력 후 인증번호 요청 시
실제 문자로 전송된 인증번호
