리춘뽕
20
2020-11-10 12:22:13
3
499

컨트롤러에서 자바스크립트로 값을 넘기고 싶어요...도와주세요..


회원가입란에서 이메일 인증을 구현하고 있는 완전초보자입니다.


이메일 인증 버튼을 누르면 인증 팝업창이 뜨게 되고 인증번호 전송버튼을 누르면 인증번호가 실제 메일주소로 전달되서 인증번호를 입력하면 성공 메세지가 뜨며 팝업창이 닫히게 까지 구현하였습니다.

근데 지금 문제가 이메일인증 성공시에 emailcount라는 변수를 만들어 0에서 1로 올리게 하여 1이 였을 때 회원가입 완료가 되게끔 하고 싶은데 계속 아래의 그림같이 문제가 발생합니다.




//이메일 인증번호 보내기
@RequestMapping(value = "/emailcertification.do")
public ModelAndView emailcertification(HttpServletRequest req, HttpServletResponse resp, String useremail) throws IOException {
	Random r = new Random();
	int dice = r.nextInt(4589362) + 49311;
	
	String setfrom = "ggg@gmail.com";
	String tomail = req.getParameter("useremail"); //받는 사람 이메일
	String title = "회원가입 인증 이메일 입니다."; //제목
	String content =
	
	System.getProperty("line.separator") + //한줄씩 줄간격을 두기 위해 작성
	System.getProperty("line.separator") + 
	"안녕하세요. 회원님 저희 홈페이지를 찾아주셔서 감사합니다."
	+ System.getProperty("line.separator") + 
	System.getProperty("line.separator") + 
	" 인증번호는 " + dice + "입니다." 
	+ System.getProperty("line.separator") +
	System.getProperty("line.separator") +
	"받으신 인증번호를 홈페이지에 입력해 주시면 다음으로 넘어갑니다.";
	
	try {
	  MimeMessage message = mailSender.createMimeMessage();
	  MimeMessageHelper messageHelper = new MimeMessageHelper(message, true, "UTF-8");
	  
	  messageHelper.setFrom(setfrom); //보내는사람 생략하면 정상작동을 안함
	  messageHelper.setTo(tomail); //받는사람 이메일
	  messageHelper.setSubject(title); //메일 제목은 생략이 가능하다
	  messageHelper.setText(content); //메일 내용
	  
	  mailSender.send(message);
	} catch (Exception e) {
	  System.out.println(e);
	}
	
	ModelAndView mv = new ModelAndView();
	mv.setViewName("join/emailcertification");
	mv.addObject("dice", dice);
	mv.addObject("email", tomail);
	
	System.out.println("mv : " + mv);
	
	resp.setContentType("text/html; charset=UTF-8");
	PrintWriter out_email = resp.getWriter();
	out_email.println("<script>alert('이메일이 발송되었습니다. 인증번호를 입력해주세요.');</script>");
	out_email.flush();
	
	System.out.println(emailcount);
	
	return mv;
}

이메일 인증번호를 발송하는 코드입니다.



@RequestMapping(value = "/emailcertificationEnter.do{dice}")
public ModelAndView emailcertificationEnter(String certificationnumber, String useremail, @PathVariable String dice, HttpServletRequest req, HttpServletResponse resp) throws IOException {
	System.out.println("마지막 : certificationnumber : " + certificationnumber);
	System.out.println("마지막 : dice : " + dice);
	
	ModelAndView mv = new ModelAndView();
	
	if (certificationnumber.equals(dice)) {
		emailcount = 1;
		mv.setViewName("join/joinForm");
		mv.addObject("e_mail", certificationnumber);
		mv.addObject("emailcount", emailcount);
		
		resp.setContentType("text/html; charset=UTF-8");
		PrintWriter out_equals = resp.getWriter();
		out_equals.println("<script>alert('인증번호가 일치하였습니다. 회원가입창으로 이동합니다.'); "
				        	+ "window.opener.parent.location.reload(); "
						+ "window.close();</script>");
		out_equals.flush();
		
		System.out.println(emailcount);
		
		return mv;
		
	} else if (certificationnumber != dice) {
		String tomail = req.getParameter("useremail");
		ModelAndView mv2 = new ModelAndView();
		mv2.setViewName("join/emailcertification");
		mv2.addObject("email", tomail);
		
		resp.setContentType("text/html; charset=UTF-8");
		PrintWriter out_equals = resp.getWriter();
		out_equals.println("<script>alert('인증번호가 일치하지 않습니다. 인증번호를 다시 입력해 주세요.');</script>");
		out_equals.flush();
		
		return mv2;
	}
		
	return mv;
}

이메일에 날라온 인증번호와 번호가 맞는지 확인하는 코드입니다. 이 부분에서 인증번호가 맞다면 

emailcount를 1로 올려주고 ModelAndView addObject에 담아 보내주고 자바스크립트에서 받으려는데 어떻게 하는지 모르겠습니다....



  var emailcount = "${emailcount}";
  
  $('#joinsubmit').click(function(event) {
	var pw = $('#pw').val();
	var pwLen = pw.length;
	
	if (pwLen < 1) {
	  $('#pw').addClass("is-invalid");
	  $('#pwfeedback').text('비밀번호를 입력해 주세요.');
	  event.preventDefault();
	} else if (!getPw.test($('#pw').val())) {
	  $('#pw').addClass("is-invalid");
	  $('#pwfeedback').text('숫자와 영문자 조합으로 8~20자 입력해 주세요.');
	  event.preventDefault();
	} else {
	  $('#pw').removeClass("is-invalid");
	  $('#pw').addClass("is-valid");
	}
	
	var chkpw = $('#chkpw').val();
	var chkpwLen = chkpw.length;
	
	if (chkpwLen < 1) {
	  $('#chkpw').addClass("is-invalid");
	  $('#chkpwfeedback').text('비밀번호를 입력해 주세요.');
	  event.preventDefault();
	} else if ($('#pw').val() != $('#chkpw').val()) {
	  $('#chkpw').addClass("is-invalid");
	  $('#chkpwfeedback').text('비밀번호가 일치하지 않습니다.');
	  event.preventDefault();
	} else {
	  $('#chkpw').removeClass("is-invalid");
	  $('#chkpw').addClass("is-valid");
	}
	
	if (emailcount == 1) {
	  return true;
	} else if (emailcount != 1) {
	  alert('이메일 인증을 해주세요.');
	  return false;
	}
  });

자바스크립트 부분인데 밑에 부분을 emailcount가 만약 1일 경우라면 회원가입을 완료시키고 아닌경우엔 계속 alert를 뜨게 해서 막아주려고 하는데 emailcount 값이 넘어오질 않는거 같습니다... 완전 초보자라서 그런지 어렵네요.. 도와주세요...

0
  • 답변 3

  • daywalker
    1k
    2020-11-10 12:46:19

    웹서버가 어떻게 동작하는지에 대해서 공부하시기 바랍니다.

    javascript 는 browser 에서 동작하고 spring 은 서버에서 동작합니다.

    웹은 기본적으로 채팅처럼 소켓으로 연결되어 있지 않습니다.

    요청을 하면 서버가 응답을 하고 연결을 끊어버립니다. 

    따라서 javscript 로 spring에 요청을 한뒤 callback 으로 값을 받아와서 처리를 해야 되는것입니다.

    ajax라는게 뭔지 공부해보시기 바랍니다.

  • INNEWWILD
    24
    2020-11-10 12:53:33

    저는 Node.js 공부하고 있어서... 자바 쪽은 잘 모릅니다만,

    회원가입 등 input을 이용한 form 작성으로 데이터를 주고 받을 때,

    express.js의 경우(이게 자바랑 비슷할지는 모르겠지만 Node 쪽에서 아주 흔하게 쓰이는 벡엔드 서버에요)는

    body-parser를 이용해서 데이터를 받아 옵니다. 즉, 유저가 html에서 무언가를 작성해서 submit 시키면 그걸 파싱해서 읽을 수 있도록 해주는 게 body-parser입니다.


    여기에 더해서 cookie-parser라는게 있는데, 이건 현재 로그인된 유저 정보 등 브라우저에서 저장(?)해두고 쓰는 cookie 데이터를 파싱해서 쓸 수 있도록 해요.


    쉽게 말하자면, 자바로 구성한 벡엔드 환경에서 사용할 수 있는 cookie-parser 같은 걸 알아보셔야 할 것 같아요.


    그걸 미들웨어로 이용해서 중간에서 쿠키 데이터(말씀하신, emailcounter가 되겠네요)를 받아와서 자바스크립트로 쓸 수 있도록 해주시면 될 것 같습니다.

  • 모찌모찌
    196
    2020-11-10 14:30:49

    window.opener.parent.location.reload();

    부분이 걸리네요..

    새로고침 하셨을때 emailcounter 값을 확인해보시는게 좋을것같습니다..

    아닐수도 있겠지만 제 생각으로는 emailcounter 를 mv에 담은다음에 return을 해도 새로고침하면

    emailcounter가 초기화될것같아서요 


  • 로그인을 하시면 답변을 등록할 수 있습니다.