[SpringBoot][React] coolSMS 휴대전화 인증

coolSMS를 이용해 회원가입 또는 가입 후 휴대전화 인증 구현coolSMS 사용 준비

coolSMS 사용 준비

• coolSMS 회원가입 하기
• coolSMS 개발자센터에 접속

쿨에스엠에스 - 우주에서 가장 빠르고 안정적이고 쉬운 문자메시지(SMS) 서비스를 제공합니다.

JAVA 클릭

아래 화면에 보이는 step1과 step2를 차례대로 실행

⇒ API KEY와 API SECRET 생성 후, git에서 SDK 다운로드⇒ 인텔리제이 기준 (File - Projects Structure - Libraries - + 버튼 클릭 후 추가)

git에서 다운받은 SDK의 압축을 풀고 lib 폴더안에있는 두개의 파일을 라이브러리에 추가

⇒ 인텔리제이 기준 (File - Projects Structure - Libraries - + 버튼 클릭 후 추가)

 

 

pom.xml 의존성 추가

<!--본인인증 의존성 추가-->
<dependency>
	<groupId>net.nurigo</groupId>
	<artifactId>javaSDK</artifactId>
	<version>2.2</version>
</dependency>

 

 

코딩

css 작업 하나도 안함

번호를 입력 후 [인증번호전송] 버튼을 누르면 axios로 input에 입력된 번호가 controller로 전송된다.

Random 메소드를 통해 인증번호 4자리를 랜덤으로 생성

인증번호전송 버튼 -> 알림창

Controller

//회원가입 시 본인 인증
    @GetMapping("/sendSMS")
    public String sendSMS (@RequestParam String u_phone) {
        Random rnd  = new Random();
        StringBuffer buffer = new StringBuffer();
        for (int i=0; i<4; i++) {
            buffer.append(rnd.nextInt(10));
        }
        String cerNum = buffer.toString();
        System.out.println("수신자 번호 : " + u_phone);
        System.out.println("인증번호 : " + cerNum);
        userService.certifiedPhoneNumber(u_phone, cerNum);
        return cerNum;
    }

Service

//회원가입 시 본인 인증
    public void certifiedPhoneNumber(String u_phone, String cerNum) {
        String api_key = "본인의 API KEY";
        String api_secret = "본인의 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", u_phone); // 수신전화번호
        params.put("from", "010-0000-0000"); // 발신전화번호. 테스트시에는 발신,수신 둘다 본인 번호로 하면 됨
        params.put("type", "SMS");
        params.put("text", "[BitMovie] 문자 본인인증 서비스 : 인증번호는 " + "[" + cerNum + "]" + " 입니다.");
        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());
        }
    }

 

Front

React의 axios 이용해서 랜덤으로 생성된 4자리 인증번호와 인증번호 input에 입력된 번호가 일치할 경우 인증 성공

인증 실패 시 알림창

인증 성공 시 알림창

const sendSMS = () => {
    let url = localStorage.url + "/user/sendSMS?u_phone=" + input.u_phone;
    axios.get(url)
        .then(res => {
            input.randomNum = res.data;
        })
}

const checkSMS = () => {
    if (input.randomNum == input.checkSMS) {
        alert("휴대폰 인증이 정상적으로 완료되었습니다.");
    } else {
        alert("인증번호가 올바르지 않습니다.")
    }
}

<tr>
    <th style={{width:'130px',backgroundColor:'#ddd'}}>전화번호</th>
    <td>
        <input type={'text'} className={'form-control'} style={{marginLeft:"20px",width:'300px'}}
               name={"u_phone"} value={input.u_phone} onChange={changeData}/>
    </td>
    <button type={"button"} variant={"outlined"} color={"success"}
            onClick={() => {
                sendSMS();
                alert("인증번호 발송 완료!!");
            }}>
        인증번호 전송
    </button>
</tr>
<tr>
    <th style={{width:'130px',backgroundColor:'#ddd'}}>인증번호</th>
    <td>
        <input type={'text'} className={'form-control'} style={{marginLeft:"20px",width:'300px'}}
               name={"checkSMS"} onChange={changeData}/>
    </td>
    <button type={"button"} variant={"outlined"} color={"success"}
            onClick={() => {
                checkSMS();
            }}>
        인증번호 확인
    </button>
</tr>