반응형
자동 등록방지 코드
음성 출력 코딩 알려드립니다.
우선 저기 수시로 바뀌는 자동등록방지 코드 값을 가져와야 하는데
저의 경우는 이미 누군가가 만들어 놓은게 있어서 쉽게 값을 가져 올 수 있었습니다.
Captcha captcha = (Captcha) req.getSession().getAttribute(Captcha.NAME);
뭐 어째든 해당 값이 105135 번이면 해당 값을 저기 스피커 모양의 버튼을 누르면 가져오면 되는 겁니다.
controller 는 간단히 만들었습니다.
[백엔드 api]
@RequestMapping("/captchaSound")
@ResponseBody
public String captchaSound(HttpServletRequest req, HttpServletResponse res) throws Exception{
Captcha captcha = (Captcha) req.getSession().getAttribute(Captcha.NAME);
return captcha.getAnswer();
}
[프론트엔드]
// 내 용 : 사운드 버튼 클릭시 자동방지문자 숫자 발성 코드
$('.btn_sound').click(function() {
$.ajax({
url: '/ud/captchaSound', // 백엔드 API의 URL
method: 'GET',
success: function(response) {
var captchaValue = response; // 받은 응답에서 captcha 값을 가져옴
$("[name=wr_key]").focus();
console.log("captchaValue : " + captchaValue);
var arr_captchaValue = captchaValue.split("");
console.log("arr_captchaValue : " + arr_captchaValue);
for (var i = 0; i < arr_captchaValue.length; i++) {
var speech = new SpeechSynthesisUtterance(); // 음성 출력
speech.text = arr_captchaValue[i];
speech.lang = 'ko-KR'; // 음성 언어 설정 (한국어: 'ko-KR')
speechSynthesis.speak(speech); // 음성 출력 실행
}
},
error: function(xhr, status, error) {
console.log('요청 실패:', error);
}
});
});
음성 출력을 위해 브라우저가 지원하는 SpeechSynthesis API를 사용하고 있으므로, 해당 코드는 모든 웹 브라우저에서 작동하지는 않을 수 있습니다. 따라서, 최신 버전의 Chrome, Firefox, 또는 Safari와 같은 브라우저에서 테스트해 보시는 것이 좋습니다.
저는 방지문자를 문자열로 들고와서 숫자를 십만오천백삼십오 이렇게 읽길래 그냥 for 문 으로 나누어 읽도록 변환하였습니다.
반응형
'Web Dev' 카테고리의 다른 글
개발 초보가 기록한 Tomcat 톰캣 서버 웹페이지 배포하는 방법 (0) | 2023.07.19 |
---|---|
CSS : <div class="overflow-hidden ..."></div> overflow-hidden 이 뭐지 ? (0) | 2023.06.22 |
Netlify 에 React.js Web 웹페이지 Deploy 배포 하는 방법 쉬워요! (0) | 2023.06.16 |
Java (Spring boot): Tomcat 에러 [The following method did not exist: org.apache.tomcat.util.modeler.Registry.disableRegistry()] (0) | 2023.06.07 |
nodejs file list in directory - 파일 리스트를 어떻게 노드 js로 가져 오나? (1) | 2023.05.24 |
pm2 어떻게 쓰는지 모르면 이렇게 쓰면 될 것 같습니다. (0) | 2023.03.28 |