GET "/check-email-token" token=${token} email=${email} 요청 처리
- 이메일이 정확하지 않은 경우에 대한 에러 처리
- 토큰이 정확하지 않은 경우에 대한 에러 처리
- 이메일과 토큰이 정확한 경우 가입 완료 처리
- 가입 일시 설정
- 이메일 인증 여부 true로 설정
인증 확인 뷰
- 입력값에 오류가 있는 경우 적절한 메시지 출력
- 인증이 완료된 경우, 환영 문구와 함께 몇번째 사용자인지 보여줄 것
GET "/check-email-token" 요청을 위해 AccountController에 메소드 작성
package me.weekbelt.studyolle.account;
@RequiredArgsConstructor
@Controller
public class AccountController {
// 기존 코드 ............
private final AccountRepository accountRepository;
// 기존 코드 ............
@GetMapping("/check-email-token")
public String checkEmailToken(String token, String email, Model model) {
// 입력받은 이메일에 대한 유저가 있는지 확인
Account account = accountRepository.findByEmail(email);
String view = "account/checked-email";
if (account == null) {
model.addAttribute("error", "wrong.email");
return view;
}
// 이메일은 있지만 토큰 값이 다른지 확인인
if(!account.getEmailCheckToken().equals(token)){
model.addAttribute("error", "worng.token");
return view;
}
account.setEmailVerified(true);
account.setJoinedAt(LocalDateTime.now());
model.addAttribute("numberOfUser", accountRepository.count());
model.addAttribute("nickname", account.getNickname());
return view;
}
}
인증 확인 뷰작성
/account/checked-email.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<style>
.container {
max-width: 100%;
}
</style>
</head>
<body class="bg-light">
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<a class="navbar-brand" href="/" th:href="@{/}">
<img src="/images/logo_sm.png" width="30" height="30">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<form th:action="@{/search/study}" class="form-inline" method="get">
<input class="form-control mr-sm-2" name="keyword" type="search" placeholder="스터디 찾기"
aria-label="Search"/>
</form>
</li>
</ul>
<ul class="navbar-nav justify-content-end">
<li class="nav-item" sec:authorize="!isAuthenticated()">
<a class="nav-link" th:href="@{/login}">로그인</a>
</li>
<li class="nav-item" sec:authorize="!isAuthenticated()">
<a class="nav-link" th:href="@{/sign-up}">가입</a>
</li>
</ul>
</div>
</nav>
<div class="py-5 text-center" th:if="${error}">
<p class="lead">스터디올래 이메일 확인</p>
<div class="alert alert-danger" role="alert">
이메일 확인 링크가 정확하지 않습니다.
</div>
</div>
<div class="py-5 text-center" th:if="${error == null}">
<p class="lead">스터디올래 이메일 확인</p>
<h2>
이메일을 확인했습니다. <span th:text="${numberOfUser}">10</span>번째 회원,
<span th:text="${nickname}">김주혁</span>님 가입을 축하합니다.
</h2>
<small class="text-info">이제부터 가입할 때 사용한 이메일 또는 닉네임과 패스워드로 로그인 할 수 있습니다.</small>
</div>
</body>
</html>
참고: https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-JPA-%EC%9B%B9%EC%95%B1#
'스프링과 JPA 기반 웹 어플리케이션 개발 > 1부 (개발환경, 회원가입, 로그인, 계정설정)' 카테고리의 다른 글
10. 회원 가입: 가입 완료 후 자동 로그인 (0) | 2020.04.18 |
---|---|
09. 회원 가입: 인증 메일 확인 테스트 및 리팩토링 (0) | 2020.04.18 |
07. 회원 가입: 패스워드 인코더 (0) | 2020.04.18 |
06. 회원 가입: 리팩토링 및 테스트 (0) | 2020.04.17 |
05. 회원 가입: 폼 서브밋 (0) | 2020.04.17 |