SPRING 팀 플젝 : 네이버 아이디로 로그인 하기(네아로)
1. 내용 : Spring 팀프로젝트에서는 네이버를 활용하여 회원가입과 로그인을 하기로 했다. 물론 일반 로그인도 그대로 남겨두었다.
2. 과정 중 특이점 : 네이버로 로그인 시 메일 주소를 가지고 회원가입 여부를 확인한 후 로그인 또는 회원가입 페이지로 넘어가기 때문에 가입 시 이메일 주소는 중복이 안 되게 해두었다. 다음에 플젝을 한다면 소셜 로그인을 추가하고 메일 주소를 아이디로 사용할 것 같다.
회원가입 시 네이버에서 제공하는 정보 외에 주소, 키, 몸무게, 체형 등 필요한 정보들이 더 있어서 바로 DB로 연동하지 않고 회원가입 페이지로 정보를 담아 이동하게 했다.
3. 화면 및 코드
0) 네이버 개발자 센터에 정보 등록하기
네이버 개발자 센터( https://developers.naver.com/main/ )에 가서
가장 먼저 "내 애플리케이션" 등록을 한다.
사용 API에 네이버 로그인 기능을 등록하고 필요한 정보를 체크한다.
필요에 따라서 다르게 체크하는데 우리가 사용한 정보는 위와 같다.
그리고 Callback URL과 로고도 등록한다.
나는 callback.jsp 파일을 사용할 것이므로
"http://192.168.0.39:8080/login/callback.wow"로 등록하였다.
로고는 네이버 로그인할 때 뜨니까 발표를 위해 해두면 좋다.
1) 로그인 페이지
login.jsp 파일의 <head></head> 안에는 아래와 같이 네이버 아이디 로그인 SDK를 추가해준다.
<!-- 네아로 SDK -->
<script type="text/javascript" src="https://static.nid.naver.com/js/naveridlogin_js_sdk_2.0.0.js" charset="utf-8"></script>
아니면 naveridlogin_js_sdk_2.0.2를 resources폴더의 js 폴더에 넣은 뒤 이를 끌어와서 사용해도 된다.
아래쪽에 네이버 아이디로 로그인 버튼을 만들고
회원가입도 가능하다는 문구를 추가하였다.
<tr>
<th> </th>
<td colspan="2" class="loginmessage">
<div id="naverIdLogin"></div><br>
<c:if test="${param.message != 'joinsucess' }">
<div>네이버 로그인 버튼을 통해 <br> 회원가입도 가능합니다.</div>
</c:if>
</td>
</tr>
<script type="text/javascript">
var naverLogin = new naver.LoginWithNaverId(
{
clientId: "HlFGBwCHmEFho6aHVNc0",
callbackUrl: "http://192.168.0.39:8080/login/callback.wow",
isPopup: false,
loginButton: {color: "white", type: 3, height: 60}
}
);
naverLogin.init();
</script>2) callback.jsp
먼저 네이버 개발자 센터에서 본인 Client ID 복사해온다.
https://developers.naver.com/apps/#/list
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
</head>
<body>
<script src="<%=request.getContextPath() %>/resources/js/naveridlogin_js_sdk_2.0.2.js"></script>
<script>
var naverLogin = new naver.LoginWithNaverId({
clientId: "복사한 Client ID", //내 애플리케이션의 Client ID
callbackUrl: "http://192.168.0.39:8080/", //내가 등록한 서비스 url
isPopup: false,
callbackHandle: true
});
naverLogin.init();
window.addEventListener('load', function () {
naverLogin.getLoginStatus(function (status) {
if (status) {
console.log(naverLogin.user);
//개발자센터에서 체크했던 정보가 넘어 오는 거 받기
var name = naverLogin.user.getName();
var email = naverLogin.user.getEmail();
var nickName = naverLogin.user.getNickName();
var memPh = naverLogin.user.getMobile();
var profileImage = naverLogin.user.getProfileImage();
console.log(profileImage);
$.ajax({
url: "<c:url value='/login/naverJoinCheck.wow' />" //컨트롤러 주소
, data: {'email': email} //이메일 중복 체크를 위해 데이터 넘김
, success: function(result) {
if(result == "join"){ //이메일이 없다면 회원가입 페이지로 이동 + 파라미터로 값을 넘김
alert("회원가입을 진행해 주세요.")
location.replace("<c:url value='/join/step1.wow?memEmail="+email+"&memNickname="+nickName+"&memName="+name+"&memPh="+memPh+"' />")
}else if(result == "login"){ //이메일이 중복이라면 로그인 됨
alert("로그인 되었습니다.")
location.replace("<c:url value='/' />")
}else{ //이상한 값이 온다면? 메세지를 로그인 페이지에 넘김
location.replace("<c:url value='/login/login.wow?message=naverfail' />")
}
}
,error: function(result) {
console.log('오류 발생')
location.replace("<c:url value='/login/login.wow?message=naverfail' />")
}
});
} else {
console.log("callback 처리에 실패하였습니다.");
}
});
});
</script>
</body>
</html>ajax를 성공시
3) 로그인 Controller
위의 callback.jsp에서 ajax로 요청을 보내면 컨트롤러에서 이를 받아 처리한다.
import javax.inject.Inject;
import javax.servlet.http.HttpSession;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
@Controller
public class LoginController {
@Inject
ILoginService loginService;
@Inject
IMemberService memberService;
@ResponseBody
@RequestMapping("/login/naverJoinCheck.wow")
public String naverJoinCheck(String email, HttpSession session) {
MemberVO member = memberService.getMemberemail(email);
if(member != null) {
// 이미 가입되어 있음
UserVO user = loginService.getUser(member.getMemId());
session.setAttribute("USER_INFO", user);
return "login";
}else {
//가입되어 있지 않음
return "join";
}
}
}
참고 : https://intrepidgeeks.com/tutorial/sign-in-as-spring-near