우선 구글 로그인 문제는 생각 이상으로 싱거운 이유였다...
secret_code 맨 마지막 글자 하나가 빠져 있었던 것...
왜 그런데 처음에는 uri 에러라고 뜨다가 토큰 만료 에러가 출력되었던걸까?
아무튼 허무하게 해결되었다.
소셜 네트워크 가입자에 따른 jsp 출력 변경 이유는 다음과 같다.
1. 소셜네트워크에 가입한 다음, 회원가입/아이디찾기/비밀번호 찾기를 하는 사람은 왜 발생할까?
--> 대부분은 본인이 소셜네트워크로 가입한 것을 까먹었기 때문일 것이다.
--> 그걸 알려주면 관련 기능을 쓰지 않을 확률이 높다
(굳이 따지자면 아이디+비밀번호로도 로그인하고 싶은 사람은 회원가입을 원할 것이다)
--> 로그인/회원가입 관련 다양한 기능을 사용하는 대신,
소셜네트워크 로그인 버튼만 누르고 관련 행동이 끝날 것이다.
==> 리소스의 절감!!!
2. 그러면 어떻게 처리해주어야 할까?
--> 회원가입/아이디찾기/비밀번호 찾기에서 동일 이메일을 입력하면 소셜네트워크 가입자임을 안내한다.
3. 아이디+비밀번호로도 로그인하고 싶은 별종도 있지 않을까?
--> 비밀번호 찾기를 통해 비밀번호를 로그인 가능하도록 변경시켜준다.
(있을까 싶지만, 간단한 기능이니 안 만들 이유도 없다. 세상은 넓고 별종은 많으니...)
소셜네트워크 가입자에 따른 jsp 출력 변경
javaScript
//로그인 전송을 시도할 경우, 발동
$("#registerForm").on("submit", function(event) {
event.preventDefault(); // 폼이 서버로 전송되지 않도록 기본 동작을 막음
var userId = $("#register_userId").val();
var errorSpan = $("#confirmUserEmailError");
//이메일을 입력
if (userId) {
$.ajax({
type: "POST",
url: "<c:url value='/AjaxCheckEmail'/>",
data: {
userId: userId,
},
success: function(response) {
// 입력한 아이디 이메일이 DB에 있을 경우, ajax 출력
if (response === "RegisterFail") {
errorSpan.text("이미 사용 중인 이메일입니다.");
} else
// 입력한 아이디 이메일이 소셜네트워크 회원가입자일 경우, ajax 출력
if (response === "socialRegister") {
errorSpan.text("소셜네트워크 회원가입자입니다.");
// 입력한 아이디 이메일이 DB에 없을 경우, submit 정상 작동
} else {
errorSpan.text("");
$("#registerForm")[0].submit();
}
},
error: function(error) {
console.error("이메일 등록 검사 에러:", error);
},
});
} else {
errorSpan.text("");
}
//에러 메세지가 있는지 확인
if($("#confirmUserEmailError").text() != ""){
$("#register_userId").focus();
return false;
}
return true;
});
AjaxController
//메인에서 이메일 중복 확인 에이젝스
@PostMapping("AjaxCheckEmail")
public String AjaxCheckEmail(String userId) throws NoSuchAlgorithmException, UnsupportedEncodingException, GeneralSecurityException {
MemberDTO dto = rServ.findDTOByUserId(userId);
//System.out.println("AjaxCheckEmail: "+dto);
String mesg = "RegisterSuccess";
if (dto != null) {
mesg = "RegisterFail";
}
if (dto.getGoogleConnected() == 1 || dto.getKakaoConnected() == 1 || dto.getNaverConnected() == 1) {
mesg = "socialRegister";
}
return mesg;
}
Controller
//아이디 찾기
@PostMapping("/SearchID")
public String SearchID(Model model, String secretCode) {
MemberDTO dto = serv.findDTOBySecretCode(secretCode);
System.out.println(dto);
if (dto != null) {
model.addAttribute("dto", dto);
return "member/Find_Info/viewID";
} else {
return "member/Find_Info/cantFindUserdata";
}
}
JSP
<%@page import="com.moonBam.dto.MemberDTO"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<!DOCTYPE html>
<html>
<!-- 아이디 찾기에서 아이디를 찾을 경우, 나오는 페이지의 jsp -->
<head>
<meta charset="UTF-8">
<title>아이디 출력 페이지</title>
<link rel="stylesheet" type="text/css" href="<c:url value='resources/css/member/ID.css'/>">
</head>
<body>
<h2>찾은 아이디 정보</h2>
<div>회원님의 아이디는
${dto.getUserId()}입니다.
</div><br>
<c:if test="${dto.getGoogleConnected() == '1' || dto.getNaverConnected() == '1' || dto.getKakaoConnected() == '1'}">
<c:if test="${dto.getGoogleConnected() == '1'}">
- 구글 로그인 연결됨<br>
</c:if>
<c:if test="${dto.getNaverConnected() == '1'}">
- 네이버 로그인 연결됨<br>
</c:if>
<c:if test="${dto.getKakaoConnected() == '1'}">
- 카카오 로그인 연결됨<br>
</c:if>
<p>
소셜 로그인을 확인해보세요!<br>
</p>
</c:if>
<div id="sitesShortCut">
<a href="<c:url value='/mainLogin'/>">로그인</a> | <a href="<c:url value='/FindInfo'/>">회원정보 찾기</a>
</div>
</body>
</html>
Controller
//비밀번호 변경을 위한 메일 송신
@PostMapping("/MailingPW")
public String MailingPW(Model model, String secretCode, String userId) throws Exception {
Map<String, String> map = new HashMap<>();
map.put("secretCode", secretCode);
map.put("userId", userId);
MemberDTO dto = serv.mailingPW(map);
model.addAttribute("userId", dto.getUserId());
model.addAttribute("nickname", dto.getNickname());
//소셜네트워크 회원가입자의 경우
if(dto.getKakaoConnected()==1) {
System.out.println("카카오 회원가입자");
model.addAttribute("kakaoRegister", true);
}
if(dto.getGoogleConnected()==1) {
System.out.println("구글 회원가입자");
model.addAttribute("googleRegister", true);
}
if(dto.getNaverConnected()==1) {
model.addAttribute("naverRegister", true);
}
if(dto.getKakaoConnected()==1 || dto.getGoogleConnected()==1 || dto.getNaverConnected()==1) {
return "member/Find_Info/socialRegsiter";
}
if (dto != null) {
String[] emailparts = dto.getUserId().split("@");
model.addAttribute("emailDomain", emailparts[1]);
mc.sendEmail(dto.getUserId(), dto);
return "member/Find_Info/viewAllPW";
}
return "member/Find_Info/emailErrorPage";
}
JSP
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>소셜로그인 회원가입자</title>
<link rel="stylesheet" type="text/css" href="<c:url value='resources/css/member/unfound.css'/>">
</head>
<body>
<h2>찾은 유저 정보</h2>
<p>${nickname}님은 소셜 로그인 가입자이십니다.<br>
<c:if test="${googleRegister == true}">
- 구글 로그인 연결됨<br>
</c:if>
<c:if test="${naverRegister == true}">
- 네이버 로그인 연결됨<br>
</c:if>
<c:if test="${kakaoRegister == true}">
- 카카오 로그인 연결됨<br>
</c:if>
혹시 비밀번호를 입력해서도 로그인하고 싶으신가요?<br>
<form method="POST" action="SocialMailingPW">
<input type="hidden" name="userId" value="${userId}">
<input type="submit" value="비밀번호 등록하기">
</form>
</p>
<div>
<a href="<c:url value='/mainLogin'/>">로그인</a> |
<a href="<c:url value='/FindInfo'/>">회원정보 찾기</a>
</div>
</body>
</html>
결론
- 소셜네트워크 가입 여부에 따라 JSP가 변경되어 출력된다.
- 이를 통해 소셜네트워크에 가입했음에도 이를 기억하지 못해서 회원가입/아이디찾기/비밀번호 찾기를 하려는 사람을 소셜네트워크 로그인으로 안내할 수 있다.
--> 이러한 작용을 통해 DB 접속 리소스를 감소시킬 수 있다.
'팀프로젝트 > SpringBoot' 카테고리의 다른 글
| 스프링부트 팀플) 20240414 JWT 적용(Oauth2 포함) (0) | 2024.04.14 |
|---|---|
| 스프링부트 팀플) 20240411 스프링시큐리티+소셜로그인(네이버/카카오 (0) | 2024.04.11 |
| 스프링부트 팀플) 20240410 스프링시큐리티를 통한 로그인 (0) | 2024.04.10 |
| 스프링부트 팀플) 20240405 익명게시판 댓글/대댓 (0) | 2024.04.10 |
| 스프링부트 팀플) 20240403 properties분리 / 회원가입 로딩창 구현 (0) | 2024.04.03 |