8일차

오늘은 ajax를 배운 겸 포기했던 아이디 중복 검사를 다시 구현하고 이메일 인증을 구현해보려고 한다.

 

먼저 아이디 중복 검사

Controller

//아이디 중복 검사
@PostMapping("/checkId")
@ResponseBody
public ResponseEntity<Boolean> checkId(@RequestParam("memberId") String memberId) {
    boolean result = false;

    // 입력된 memberId가 비어있는지 검사
    if (memberId.trim().isEmpty()) {
        result = false;
    } 
    else {
        // memberId가 비어있지 않으면 서비스 계층에서 중복 여부를 확인
        if (memberService.checkId(memberId)) {
            // 중복된 아이디인 경우
            result = false;
        } 
        else {
            // 중복되지 않은 경우
           result = true;
        }
    }

    // ResponseEntity를 사용하여 결과를 반환
    return ResponseEntity.ok(result);
}

 

Mapper

 

//아이디 중복 검사
	public int countById(@Param("memberId") String memberId);

 

Service

 

//아이디 중복 검사
public boolean checkId(String memberId) {
    return memberMapper.countById(memberId) > 0;
}

 

JavaScript

 

//아이디 중복검사
function idDupl(){

    var id = $("#memberId").val();
    var idRegExp = /^[a-z0-9A-Z]{5,50}$/;

    if(id === ""){
        $("#idDupl").text("아이디를 입력해주세요.").css("color", "red");
        return false;
    }
    else if(!idRegExp.test(id)){
        $("#idDupl").text("잘못된 아이디 방식입니다.").css("color", "red");
        return false;
    }
	$.ajax({
		url:"/checkId",
		type:"post",
        dataType:"json",
		data:{"memberId" : id},
        success: function(result){
			if(result == true){
				$("#idDupl").text("사용 가능한 아이디입니다.").css("color", "green");
				return true;
			}
			else{
				$("#idDupl").text("중복된 아이디입니다.").css("color", "red");
				return false;
			}
		}
	});
	
}

 

Mapper.xml 파일

<!-- 아이디 중복 검사 -->
<select id="countById" resultType="int" parameterType="java.lang.String">
    SELECT COUNT(*) FROM member WHERE memberId = #{memberId}
</select>

 

이제 테스트를 해보면, 지금 DB에 있는 아이디 목록은 다음과 같다.

 

 

회원가입 폼에서 이 아이디 들 중 하나를 입력해보면,

 

 

일단 중복 검사는 성공. 

 

다음은 이메일 인증 구현.

가장 먼저 pom.xml에 다음 문구를 추가해준다.

 

		<dependency>
		    <groupId>org.springframework.boot</groupId>
		    <artifactId>spring-boot-starter-mail</artifactId>
		</dependency>

 

그 다음 application.properties에 다음 문구를 추가

 

spring.mail.host=smtp.gmail.com
spring.mail.port=587
spring.mail.username=qwert850528@gmail.com
spring.mail.password=yfqe hnkt krsr qhjk
spring.mail.properties.mail.smtp.auth=true
spring.mail.properties.mail.smtp.timeout=5000
spring.mail.properties.mail.smtp.starttls.enable=true

 

이제 본격적으로 코드 입력

 

Controller

	//이메일인증
	@ResponseBody
	@PostMapping("/mail")
	public String mailSend(String mail) {
		int number = memberService.sendMail(mail);
		String num = "" + number; //랜덤으로 생성된 숫자 가져오기
		
		//내가 전달받은 숫자가 맞는지 확인용으로 가져옴
		return num;
	}

 

Service

가장 먼저 @RequiredArgsConstructor를 추가해준다.

 

@Service
@RequiredArgsConstructor
public class MemberService {

	//이메일 인증
	private final JavaMailSender JavaMailSender;
	private static final String senderEmail = "qwert850528@gmail.com";
	private static int number;
	
	public static void makingNumber() {
		number = (int)(Math.random()*(1000)) + 9000;
	}
	
	public MimeMessage createMail(String mail) {
		makingNumber();
		MimeMessage message = JavaMailSender.createMimeMessage();
		
		try {
			message.setFrom(senderEmail);
			message.setRecipients(MimeMessage.RecipientType.TO, mail);
			message.setSubject("이메일 인증");
			String content = "";
			content += "<h3>" + "다음 인증번호를 입력해주세요." + "<h3>";
			content += "<h1>" + number + "<h1>";
			message.setText(content, "utf-8", "html");
		} 
		catch (MessagingException e) {
			e.printStackTrace();
		}
		return message;
	}

 

마지막 JavaScript

 

//이메일 인증
function sendEmail(){
    if (!$("#memberEmail").val()) {
    	$("#emailMessage").text("이메일을 입력해주세요.");
    	return;
    }
    $("#emailCheck").css("display","block");    
    $.ajax({
        url:"/mail",
        type:"post",
        dataType:"json",
        data:{"mail" : $("#memberEmail").val()},
        success: function(data){
            $("#emailMessage").text("인증번호가 발송되었습니다.");
            $("#Confirm").attr("value",data);
        }
    });
}

function checkEmail(){
    var number1 = $("#checkNumber").val();
    var number2 = $("#Confirm").val();

    if(number1 == number2){
        $("#emailConfirmMessage").text("인증번호가 일치합니다.").css("color", "green");
        return true;
    }else{
        $("#emailConfirmMessage").text("인증번호가 일치하지 않습니다.").css("color", "red");
        return false;
    }
}

 

 

이제 시험해본다.

 

 

 

 

 

성공. 오늘 목표했던 기능들을 모두 구현하는데 성공했다.

 

이제 추가로 회원정보 수정 기능을 넣어보고자 한다.

 

일단 임시로 로그인 기능을 만들어 두고, 회원정보를 수정해야한다.

 

mapper.xml

    <!-- 임시 로그인 -->
    <select id="getLogin" resultType="com.camel.project.dto.Member" parameterType="java.util.Map">
		select * from member
		where memberId = #{memberId}
		and memberPw = #{memberPw}
	</select>
    <!-- 회원 정보 수정 -->
    <update id="updateMember" parameterType="com.camel.project.dto.Member">
		UPDATE member SET memberId = #{memberId}, memberPw = #{memberPw}, 
		memberName = #{memberName}, memberEmail = #{memberEmail}, memberPhone = #{memberPhone}
		WHERE memberNo = #{memberNo}
	</update>

 

Controller

	//임시 로그인
	@PostMapping("/login")
	public String getLogin(Model model,
			     @RequestParam("memberId") String memberId,
			     @RequestParam("memberPw") String memberPw,
			     HttpSession session) {
		
		Member member = memberService.getLogin(memberId, memberPw);
		
		if(member != null) {
			session.setAttribute("loginSession", member);
			return "redirect:/";
			
		} else { 
			model.addAttribute("e", "일치하는 회원 정보가 없습니다.");
			model.addAttribute("member", new Member());
			return "login";
		}
	}
	
    //회원 정보 수정 이동
    @GetMapping("/MyInfo")
    public String myInfoPage(HttpSession session, Model model) {
    	Member member = (Member) session.getAttribute("loginSession");
		if(member == null) {
			return "redirect:/";
		}
		model.addAttribute("updateProfile", member);
		return "MyInfo";
    }
    
    //회원 정보 수정
    @PostMapping("/updateProfile")
    public String updateMember(HttpSession session, Member updateMember) {
    	Member member = (Member) session.getAttribute("loginSession");
    	
		if(member == null) {
			return "redirect:/";
		}
		
		updateMember.setMemberNo(member.getMemberNo());
		memberService.updateMember(updateMember);
		session.setAttribute("loginSession", updateMember);
		return "redirect:/MyInfo";
    }

 

Mapper

	//임시 로그인
	Member getLogin(@Param("memberId") String memberId,
			@Param("memberPw") String memberPw);
	
	//회원 정보 수정
	void updateMember(Member member);

 

Service

    //임시 로그인
	public Member getLogin(String memberId, String memberPw) {
		
		return memberMapper.getLogin(memberId, memberPw);
		
	}
	
	//회원정보 수정
	public void updateMember(Member member) {
		
		memberMapper.updateMember(member);
	}

 

이제 실험해보자. 덤으로 헤더에서 로그인 이후 바뀌는 기능도 시험해보기.

임시 로그인 페이지

로그인 전

 

 

로그인 후

 

 

일단 헤더는 기능을 한다.

 

다음은 정보 수정 페이지

 

 

 

정보 수정 페이지는 회원가입 페이지를 기반으로 만들었다. 정보 수정하기 버튼을 누르면

 

 

 

성공.

 

오늘 목표치는 초과 달성했고, 내일은 회원 탈퇴 기능을 구현할 예정이다.