Spring MVC 로그인
Spring MVC 네이버 로그인 구현
개발자 박현준
2022. 9. 3. 18:38
728x90
목록
1. Spring MVC 일반 로그인 구현
2. Spring MVC 구글 로그인 구현
3. Spring MVC 카카오 로그인 구현
4. Spring MVC 네이버 로그인 구현
이번에는 네이버 로그인을 구현해보자 !
밑에 사이트에 들어가서 api 정보를 입력해주자.
NAVER Developers
네이버 오픈 API들을 활용해 개발자들이 다양한 애플리케이션을 개발할 수 있도록 API 가이드와 SDK를 제공합니다. 제공중인 오픈 API에는 네이버 로그인, 검색, 단축URL, 캡차를 비롯 기계번역, 음
developers.naver.com
1. Application 클릭해서 애플리케이션 등록 클릭.
2. 애플리케이션 등록정보 입력.
3. 사용 API 네이버 로그인 클릭.
4. 내가 제공받고 싶은 정보 선택하고 로그인 오픈 API 서비스 환경 추가 클릭해서 PC 웹 선택.
5. 서비스 URL, 네이버 로그인 Callback URL 등록하고 등록하기 클릭.
나는 Callback URL에 intrip은 내 패키지명을 입력해줬음.
이제 Client ID와 Client Secret 발급이 완료되었다.
이제 코드들로 확인해보자.
Controller 코드
// 네이버
@GetMapping("")
public String index() {
log.info("home controller");
return "login_signup/login";
}
// 네이버
@GetMapping("login/oauth2/code/naver")
public String loginPOSTNaver(HttpSession session) {
log.info("callback controller");
return "login_signup/callback";
}
// 네이버 로그인
@PostMapping("/naverlogin")
public String naverlogin(MemberDTO memberDTO, HttpSession session, RedirectAttributes rttr, MemberDTO mmemberDTO) throws Exception {
MemberDTO returnDTO = memberService.loginMemberByNaver(memberDTO);
String mvo_ajaxid = mmemberDTO.getId();
if(returnDTO == null) { //아이디가 DB에 존재하지 않는 경우
// 네이버 회원가입
memberService.joinMemberByNaver(memberDTO);
// 네이버 로그인
returnDTO = memberService.loginMemberByNaver(memberDTO);
session.setAttribute("id", returnDTO.getId());
rttr.addFlashAttribute("mmemberDTO", returnDTO);
session.setAttribute("user", returnDTO);
session.setAttribute("isLogIn", true);
log.info("네이버 로그인 성공[DB존재X]");
}
else if(mvo_ajaxid.equals(returnDTO.getId())){ //아이디가 DB에 존재하는 경우
// 네이버 로그인
memberService.loginMemberByNaver(memberDTO);
session.setAttribute("id", returnDTO.getId());
rttr.addFlashAttribute("mmemberDTO", returnDTO);
session.setAttribute("user", returnDTO);
session.setAttribute("isLogIn", true);
log.info("네이버 로그인 성공[DB존재O]");
}
log.info("naver user : "+ returnDTO);
return "redirect:/mainpage/main";
}
DAO 코드
// 네이버 로그인 정보 DB에 저장
public int joinMemberByNaver(MemberDTO memberDTO) {
return sqlSession.insert("mapper.member.joinMemberByNaver", memberDTO);
}
// 네이버 로그인
public MemberDTO readMemberWithIDPWNaver(String id) {
return sqlSession.selectOne("mapper.member.readMemberWithIDPWNaver", id);
}
DTO 코드 (지금까지 사용했던 DTO랑 동일)
@Data
public class MemberDTO {
private String id;
private String name;
private String pwd;
private String nick_nm;
private String email;
private Date join_Date;
private Date last_update;
private String grade;
}
Service 코드
// 네이버 로그인
public MemberDTO loginMemberByNaver(MemberDTO memberDTO) throws Exception;
// 네이버 회원가입
public void joinMemberByNaver(MemberDTO memberDTO) throws Exception;
ServiceImpl 코드
// 네이버 로그인
@Override
public MemberDTO loginMemberByNaver(MemberDTO memberDTO) throws Exception {
MemberDTO returnVO = null;
try {
returnVO = memberDAO.readMemberWithIDPWNaver(memberDTO.getId());
} catch (Exception e) {
e.printStackTrace();
returnVO = null; // 실행하다 문제가 생겼을때 해당 데이터를 보내지않겠다는 의미 = 예외처리
}
return returnVO;
}
// 네이버 회원가입
@Override
public void joinMemberByNaver(MemberDTO memberDTO) throws Exception {
memberDAO.joinMemberByNaver(memberDTO);
}
Mapper.xml 코드
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="mapper.member">
<resultMap type="memberDTO" id="memberResult">
<result property="id" column="id" />
<result property="name" column="name" />
<result property="pwd" column="pwd" />
<result property="nick_nm" column="nick_nm" />
<result property="email" column="email" />
<result property="join_Date" column="join_Date" />
<result property="last_update" column="last_update" />
<result property="grade" column="grade" />
</resultMap>
<!-- 네이버 로그인 -->
<select id="readMemberWithIDPWNaver" resultType="memberDTO">
<![CDATA[
select * from P_MEMBER where id=#{id}
]]>
</select>
<!-- 네이버 로그인 데이터 넘기기 -->
<insert id="joinMemberByNaver" parameterType="java.util.Map">
<![CDATA[
insert into P_MEMBER (id, name, pwd, nick_nm, email)
values (#{id}, #{name}, #{pwd}, #{nick_nm}, #{email})
]]>
</insert>
callback.jsp 코드
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="https://static.nid.naver.com/js/naverLogin_implicit-1.0.3.js"charset="utf-8"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<script type="text/javascript"> // 내가 설정한 Callback URL
var naver_id_login = new naver_id_login("내가 입력받은Client ID", "http://localhost:8080/intrip/login/oauth2/code/naver");
// 네이버 사용자 프로필 조회
naver_id_login.get_naver_userprofile("naverSignInCallback()");
// 네이버 사용자 프로필 조회 이후 프로필 정보를 처리할 callback function
function naverSignInCallback() {
$(function() {
var date = new Date();
$.ajax({
url : '/intrip/naverlogin',
type : 'post',
data : {
"id" : naver_id_login.getProfileData('id'),
"name" : naver_id_login.getProfileData('name'),
"pwd" : naver_id_login.getProfileData('id'),
"nick_nm" : naver_id_login.getProfileData('name'),
"email" : naver_id_login.getProfileData('email')
},
success : function (data) {
alert("네이버아이디로 로그인 되었습니다.");
location.href="/intrip/mainpage/main";
}
});
});
}
</script>
</body>
</html>
login.jsp 코드
// 상단에 빼먹지말고 넣어주자!
<script type="text/javascript" src="https://static.nid.naver.com/js/naverLogin_implicit-1.0.3.js" charset="utf-8"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<body>
// 자신이 버튼 만들 코드 위치에 맞게 넣어주면됨.
// 네이버 로그인 버튼. 이미지는 규정에 맞는 이미지로 등록해주자.
<a id="naver_id_login"><img src="../resources/images/login_phj/naver.png"></a>
</body>
<script type="text/javascript"> // 내가 설정한 Callback URL
var naver_id_login = new naver_id_login("내가 입력받은Client ID", "http://localhost:8080/intrip/login/oauth2/code/naver");
var state = naver_id_login.getUniqState();
naver_id_login.setDomain("http://localhost:8080/");
naver_id_login.setState(state);
naver_id_login.init_naver_id_login();
</script>
완성된 화면.
네이버 로그인 클릭시 아이디 비밀번호 입력창 출력.
네이버 아이디 비밀번호 입력 후 로그인 버튼 클릭하면 정상적으로 로그인이 되는것을 확인할 수 있다!!
네이버 로그인도 완료되었다 !
728x90