[81일차] 회원가입 페이지 폼 / 추가 작업 / daum 우편번호 api 삽입 / ID 중복체크 / 이메일 인증
20221117(목)
- 목차
- 회원가입 페이지 폼 만들기
- 추가 작업
- daum 우편번호 api 삽입
- ID 중복체크
- 이메일 인증
< 회원가입 페이지 폼 만들기 >
1. Member SQL 테이블 생성
-- 1. 회원가입 테이블
CREATE TABLE MEMBER_TBL(
MEM_ID VARCHAR2(15) CONSTRAINT PK_MEMBER_ID PRIMARY KEY,
MEM_NAME VARCHAR2(30) NOT NULL,
MEM_PW CHAR(60) NOT NULL,
MEM_EMAIL VARCHAR2(50) NOT NULL,
MEM_ZIPCODE CHAR(5) NOT NULL,
MEM_ADDR VARCHAR2(100) NOT NULL,
MEM_ADDR_D VARCHAR2(100) NOT NULL,
MEM_PHONE VARCHAR2(15) NOT NULL,
MEM_NICK VARCHAR2(20) NOT NULL UNIQUE,
MEM_ACCEPT_E CHAR(1) DEFAULT 'Y' NOT NULL,
MEM_POINT NUMBER DEFAULT 0 NOT NULL,
MEM_DATE_SUB DATE DEFAULT SYSDATE NOT NULL,
MEM_DATE_UP DATE DEFAULT SYSDATE NOT NULL,
MEM_DATE_LAST DATE DEFAULT SYSDATE NOT NULL,
MEM_AUTHCODE CHAR(1) DEFAULT 'N' NOT NULL,
MEM_ACCEPT_INFO CHAR(1) DEFAULT 'Y' NOT NULL
);
COMMIT;2. MemberVO / Controller / Mapper / Service / ServiceImpl 생성
3. 어노테이션 및 주입작업 완료
- join.jsp 내용 따와서 회원가입 폼 만들기 (부트 스트랩 이용)
- join.jsp 에 코드 추가
<div class = "container"> 부터 ~ footer.jsp 까지
< 추가 작업 >
(1) MemberVO.java 만들기
- DB 보고 MemberVO.java 만들기
- @Data 어노테이션으로 Getter, Setter, ToString 메서드 한번에 추가!
(2) MemberController.java 만들기
//회원정보저장
@PostMapping("/join")
public String join(MemberVO vo, RedirectAttributes rttr) {
return "";
}**MemberVo.java에 선언된 변수명과 join.jsp에 나오는 name이 일치하는지 확인필요!
(3) join.jsp에 있는 부트스트랩 파일 따로 빼놓기
(include ➡ common.jsp)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!-- Bootstrap core CSS -->
<link href="https://getbootstrap.com/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<!-- Custom styles for this template -->
<link href="https://getbootstrap.com/docs/4.6/examples/pricing/pricing.css" rel="stylesheet">위 코드가 사용되었던 파일들은 내용 삭제 후 common.jsp를 연결시켜준다.
➡ <%@include file = "/WEB-INF/views/include/common.jsp" %> 를 추가
** 원래 미리 계획하고 들어가야 하지만, 처음엔 쉽지 않다.😂
< daum 우편번호 api 삽입 >
(1) daum 우편번호 api 검색
https://postcode.map.daum.net/guide#usage
Daum 우편번호 서비스
우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다.
postcode.map.daum.net
(2) 원하는 템플릿 선택 후 코드 복사
(3) daum_post.html 파일 생성 후 <body>내에 위에서 복사한 코드 삽입
ex) 실행화면 1
(4) daum_post.html 안의 자바스크립트코드를<script> join.jsp 에 붙여넣어 연결시켜준다.
ex) 실행화면 2
- common.jsp에 공통관련 코드 넣기 (코드 : 참고코드 받음)
< ID 중복체크 >
(1) join.jsp에 코드추가
<script>
$(document).ready(function(){
let joinForm = $("#joinForm");
// ID 중복 체크
$("#btnIDCheck").on("click", function(){
if($("#mem_id").val() == "") {
alert("아이디를 입력하세요");
$("#mem_id").focus();
return;
}
$.ajax({
url: '/member/idCheck',
type: 'get',
dataType: 'text',
data: {men_id : $("#men_id").val()},
success:function(data) {
console.log("아이디 사용유무: " + data);
}
});
});
});
</script>(2) MemberController.java에 아이디 중복체크 코드추가
(3) MemberMapper.java에 아이디 중복체크 코드추가
(4) MemberMapper.xml에 idCheck 관련 sql 추가
- resultType : 결과값을 받아와야 할 때 넣는다.
(5) MemberService.java에 idCheck 코드추가
(6) MemberServiceImpl.java에 생성자 오버로딩
(7) MemberController.java에 주입작업 및 아이디 중복체크 코드추가
✨ 어노테이션 정리!
➡ https://dorothy-yang.tistory.com/227
[어노테이션] @ResponseBody / @ResponseEntity<T> / @RequestParam("") 정리
@ResponseBody @ResponseEntity @RequestParam("") 정리 ex) 코드예시 ✨ 여기서 잠깐! 알아두고 넘어가자! (HTTP 프로토콜) - Http 프로토콜 : 인터넷 상 데이터를 주고받기 위한 서버/클라 모델 - http Request 요청 :
dorothy-yang.tistory.com
- 중복체크결과 화면에 나타내기
(7) join.jsp에 아이디 사용유무 확인코드추가
ex) 실행화면
< 이메일 인증 >
- SMTP 프로토콜
(Simple Mail Transfer Protocol, SMTP)
인터넷에서 이메일을 보내기 위해 이용되는 프로토콜이다. 사용하는 TCP 포트번호는 25번이다.
✨ 공개된 메일서버 정보들을 가져와서 붙여넣기 작업
1. pom.xml에 메일 라이브러리 추가 (docmall의 pom.xml 참고)
<!-- 메일 주요내용 정리 -->
<!-- 스프링 메일기능을 제공하는 기본인터페이스 MailSender가 SimpleMailMessage를 이용하며, 첨부파일 등을 지원하지 않음. -->
<!-- MIME Message 를 이용한다. -->
<!-- 백신종류프로그램이 동작되어, 메일기능테스트를 실패하는 경우가 있다. 동작중인 백신프로그램 정지. -->
<!-- 스케줄링, 메일발송, 캐시 연동,Velocity 등 부가기능제공 -->
<!-- org.springframework.mail.javamail.JavaMailSenderImpl -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-context-support</artifactId>
<version>${org.springframework-version}</version>
</dependency>
<!-- 이론설명 할것. -->
<!-- 메일 관련라이브러리 javax.mail.internet.MimeMessage -->
<dependency>
<groupId>com.sun.mail</groupId>
<artifactId>javax.mail</artifactId>
<version>1.5.6</version>
</dependency>2. root-context.xml에 메일기능 관련 설정 추가 (docmall의 root-context.xml 참고)
- 윈도우즈 운영체제 / 리눅스 서버 별 버전에 따라 코드가 달라질 수 있다!
<!-- 메일기능 관련설정 -->
<!-- https://myaccount.google.com/security?rapt=AEjHL4OdkuzyEZ7kVBfl7IjImC8vCQOvguwootB5OVe6lT5TDHpILM5DO4vkNzw5y1RIQtWr_0s09Tz1gwq2JxhmNX6GQsCVRQ
메일인증방식 변경됨. 앱비밀번호. 암호화키 사용. -->
<bean id="mailSender" class="org.springframework.mail.javamail.JavaMailSenderImpl">
<property name="host" value="smtp.gmail.com" />
<property name="port" value="587" />
<property name="username" value="${email.account}" />
<property name="password" value="${email.password}" />
<property name="javaMailProperties">
<props>
<prop key="mail.smtp.auth">true</prop>
<!-- 윈도우즈 운영체제 11버전(클라이언트)에 따라 TLS변환문제가 발생이 되는 듯 추측함.
<prop key="mail.smtp.ssl.trust">smtp.gmail.com</prop>
<prop key="mail.smtp.ssl.protocols">TLSv1.2</prop>
-->
<prop key="mail.smtp.starttls.enable">true</prop>
</props>
</property>
</bean>3. gmail 인증코드 받기 (아래 링크 참고)
https://dorothy-yang.tistory.com/179
[Gmail 앱 비밀번호] 이메일 인증번호 설정하기 / SMTP
Mail API 사용 시 필요한 앱 비밀번호 받아내기 🕵️♂️ 1. Google 계정 로그인 ➡ 본인 아이콘 클릭 ➡ Google 계정 관리 2. 보안 탭 ➡ Google에 로그인 부분 ➡ 앱 비밀번호 (2단계 인증 : 사용 설정
dorothy-yang.tistory.com
4. root-context.xml의 앞에서 불러온 메일기능 관련 설정 중 메일주소와 인증키 부분에 내용을 각각 입력한다.
5. EmailController / EmailService / EmailServiceImpl / EmailDTO 파일 생성하기
6. EmailDTO.java 작성
7. EmailController 작성
**mapper는 없다!!! mapper가 있다는 의미 = DB가 잇다는 의미다.
8. EmailService.java 작성
package com.docmall.service;
import com.docmall.dto.EmailDTO;
public interface EmailService {
void sendMail(EmailDTO dto, String message);
}9. EmailServiceImple.java 작성
- JavaMailSender : MimeMessage(Java Mail API), JavaMailSenderImpl(인터페이스 구현체)
createMimeMessage()
@Service
public class EmailServiceImpl implements EmailService {
//주입 : mailSender bean 주입.
@Setter(onMethod_ = {@Autowired})
private JavaMailSender mailSender;
@Override
public void sendMail(EmailDTO dto, String message) {
//메일구성정보를 담당하는 객체(받는사람, 보내는 사람, 전자우편주소, 본문내용)
MimeMessage msg = mailSender.createMimeMessage();
try {
//받는사람 메일주소
msg.addRecipient(RecipientType.TO, new InternetAddress(dto.getReceiverMail()));
//보내는 사람(메일, 이름)
msg.addFrom(new InternetAddress[] {new InternetAddress(dto.getSenderMail(), dto.getSenderName())});
//메일제목
msg.setSubject(dto.getSubject(), "utf-8");
//본문내용
msg.setText(message, "utf-8");
mailSender.send(msg); // GMail SMTP서버를 이용하여, 메일 발송이 된다.
}catch(Exception ex) {
ex.printStackTrace();
}
}
}
스프링을 이용하여 메일발송해보자 (gmail기반)
javax.mail mail 1.4.7 org.springframework spring-context-support ${org.springframework-version} → gmail 활용 smtp true true true MailSender — SimpleMailMessage (메일제목, 단순 텍스트 내용) package com.bitcamp.mvc; import org.springframewor
kkangdda.tistory.com
10. EmailController 작성
@setter 작업시 @Autowired 임포트 해야 함
11. join.jsp에 메일인증코드 요청 추가
//메일인증코드 요청
$("#btnAuthcode").on("click", function(){
if($("#mem_email").val() == "") {
alert("메일주소를 입력하세요");
$("#mem_email").focus();
return;
}
$.ajax({
url : '/email/send',
type : 'get',
dataType : 'text',
data : {receiverMail: $("#mem_email").val() }, // Javascript Object 구문
success : function(data) {
if(data == "success") {
alert("인증메일이 발송되었습니다. 인증코드를 확인해주세요");
}else{
alert("메일발송이 실패되었습니다. 관리자에게 문의해주세요");
}
}
ex) 실행화면
(12) join.jsp에 메일인증확인 코드추가
(13) EmailController에 인증번호 확인코드 추가
ex) 실행 화면
입력값 유지하려면 실행화면에서 새고하지말고 뒤로가기 버튼 누르기!!
