[네아로] 네이버 소셜로그인 Spring MVC로 DB까지 : POST 방식으로 연결하기
까다롭기로 유명한 네이버 소셜로그인....
나도 그냥 똑딱 버튼 누르면 로그인이 되는건줄 알았지.. (먼산)🌄
Spring Boot가 아닌
Spring Framework + MVC + MySQL 조합으로
소셜로그인 진행하는 방법과
쉽게 헷갈릴 수 있는 부분도 짚어드릴게요.
1. 네이버 디벨로퍼 사이트에서 API 설정하기
이것은 간단하쥬?
네이버 로그인 애플리케이션 등록
주의할 점은 콜백 주소까지 다 넣어주어야 한답니다.
오타가 나거나 하면 나중에 연결했을 때 404 에러나 흰 화면으로 멈춰버려요.
의외로 많은 오류가 네아로 애플리케이션 페이지 등록부분에서 놓친 것들이 있었어요.
특히나 여러분, 네아로 검수 등록을 하게되면 API 수정이 검수 진행중일 때는 어렵답니다.
제 경험상 검수는 하루정도 꼬박 걸렸는데, 특히 그중 몇시간은 참 에러가 많이 났어요.
자, 등록이 끝나면 꼭 클라이언트 ID와 콜백 주소를 메모장에 복붙해놓구요.
2. JavaScript 코드로 시작합시다.
우리는 네이버 로그인 명세에 나와있는 자바스크립트 코드를 활용해요.
네이버 로그인 명세
혹시! 만들어 놓은 로그인 페이지가 있다면 더 좋겠죠.
저 같은 경우는 소셜로그인 외의 자체 로그인 DB가 있었기 때문에
밑에 그냥 버튼을 하나 추가해주었어요.
[로그인 페이지의 Body]
<!-- 로그인 컨테이너 login -->
<div class="form-container">
<div class="container">
<form class="p-4 border rounded" action="login.board" method="post">
<h2 class="mb-4">로그인</h2>
<div class="form-group">
<label for="userid">아이디</label> <input type="text"
class="form-control" id="userid" name="userid" value="user03"
required>
</div>
<div class="form-group">
<label for="password">비밀번호</label> <input type="password"
class="form-control" id="password" name="password" value="1234"
required>
</div>
<button type="submit" class="btn btn-primary btn-block">로그인하기</button>
<!-- 소셜 로그인 버튼 노출 영역 -->
<div class="social-group">
<div id="naver_id_login" ></div>
</form>
<hr>
</div>
</div>[로그인 페이지의 Script]
<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.0.min.js"></script>
<script type="text/javascript" src="https://static.nid.naver.com/js/naverLogin_implicit-1.0.3.js" charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- 네이버 로그인 버튼 노출 스크립트 -->
<script type="text/javascript">
var naver_id_login = new naver_id_login("클라이언트 아이디", "http://localhost:여기에 로그인 주소.jsp");
var state = naver_id_login.getUniqState();
naver_id_login.setButton("green", 3,50);
naver_id_login.setDomain("http://localhost:8080/여기에 주소/");
naver_id_login.setState(state);
naver_id_login.setPopup();
naver_id_login.init_naver_id_login();
</script>
setButton 메서드를 요리조리 바꾸면 버튼모양이 달라진답니다.
배경이 흰색이라서 green에 크기를 좀더 키워주었어요.
📌 네이버 setButton 메서드 종류
BUTTON_TYPE = 1;
BANNER_SMALL_TYPE = 2;
BANNER_BIG_TYPE = 3;
BUTTON_COLOR_WHITE = "white";
BUTTON_COLOR_GREEN = "green";
뒤에 숫자는 높이에요.
3. 콜백페이지를 만들 차례에요.
콜백함수라고 많이 들어봤을거에요.
어떤 이벤트가 종료되면 무조건 뜨는걸 콜백한다 말해요.
세상은 콜백이 거의 없는데 이것참 좋은 함수에요.
마찬가지로 OAuth2 기술을 채택하고 있는 네이버 로그인 시스템은
로그인하면 "너 누구 맞구나.." 하고 토큰과 함께 콜백해주는거에요.
우리는 그 콜백에 파라미터를 요리 조리 바꾸면서
고객의 데이터 (애플리케이션 페이지에서 미리 정했던)를 받을 수 있어요.
콜백페이지는 네이버 명세에서 잘 써주었어요.
Function까지 써주셨는데요.
저는 인터넷에 돌아다니는 GET 방식의 로그인이 아닌
POST 방식의 로그인을 만들어보고자 합니다.
쉽게 도식화 하면 이렇게 표현돼요.
네이버로부터 받는 JSON 데이터들을 누구보다 잘 처리할 수 있는..
JSON과 함께 있을 때 빛을 발하는...💖
AJAX로 받는게 좋겠습니다.
4. 코딩
🎒 준비물이 필요합니다. (읭?)
- 콜백함수로 받은 데이터를 보낼 곳 (MVC의 시작점)
- 부모페이지와 자식페이지에 대한 이해
부모-자식이 왜나오냐하면요.👫
네이버 로그인은 팝업형태로 나타나기 때문에 그렇습니다.
처음에 우리가 로그인 버튼을 눌렀던 곳이 바로 "부모"페이지로서
나중에 쓰이겠지만 window.opener라고 명명할수있겠고요.
팝업이 뜨면 그 팝업은 이제 자식이 되죠. 👼
그 팝업은 네이버 메소드로 실행이 된 자식인데요.
그 자식은 AJAX로 콜백을 받아서 MVC에 전달하고 역할이 끝나게 됩니다.
자식 팝업페이지는 나중에 잘 닫아줘야돼요.
자 그러면 전체 코드를 제일 기다리셨을테니 빠르게 올릴게요.
콜백.jsp 입니다.
<!doctype html>
<html lang="ko">
<head>
<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-3.7.0.min.js"></script>
</head>
<body>
<script type="text/javascript">
var naver_id_login = new naver_id_login("여러분의 클라이언트 아이디", "http://localhost:콜백주소.jsp");
alert(naver_id_login.oauthParams.access_token);
naver_id_login.get_naver_userprofile("naverSignInCallback()");
console.log('콜백실행')
function naverSignInCallback() {
nickname = naver_id_login.getProfileData('nickname');
name = naver_id_login.getProfileData('name');
email = naver_id_login.getProfileData('email');
id = naver_id_login.getProfileData('id');
$.ajax({
type: 'POST',
url: 'naverLogin',
data: {
'userid': nickname,
'username': name,
'email': email,
'naver_uid': id
}, // data
dataType: 'text',
success: function(result) {
if(result == 1) {
console.log('성공')
closePopupAndRedirect();
} else {
window.close();
}
},
error: function(result) {
window.close();
}
})
}
</script>
</body>
</html>
MVC Controller에서 naverLogin으로 받으면 되겠죠.
그리고 반환값은 1 또는 0이 될겁니다.
[컨트롤러]
@Controller
public class NaverController {
@Autowired
NaverService naverService;
@ResponseBody
@RequestMapping("naverLogin")
public int naverLogin(NaverDTO naverDTO) {
int result = naverService.insert(naverDTO);
return result;
}그러면 그걸 가지고 AJAX success에서 if문을 진행하게 돼요.
int로 자바에서 보내도
스크립트에서는 String이 오겠지만..
우선 빠르게 하기 위해 ==으로 비교해줬어요.
5. 마무리
팝업이 문제였다고 했어요.💥
저는 여기서 많이 헤매서, 경우의 수를 몇개는 도전하다가 찾아낸 방법이랍니다.
자식 페이지가 콜백으로 왔기 때문에 닫아주는 메소드를
저기 ClosePopupAndRedirect라고 달아주었습니다.
일단 그러면 자식이 부모한테 리다이렉트할 수 있는 메세지를 전달해주고 가야됩니다.
function closePopupAndRedirect() {
window.opener.postMessage('naverLoginSuccess', '*');
window.close();
}그러면 저기 위에 MVC 성공시 1값을 받았을 때니까
어찌됐든 성공했을 때도 팝업은 닫아줘야하니 window.close() 달아주면 되겠죠.
그리고 부모페이지에도 스크립트를 추가해줍니다.
리다이렉트에요.
<script type="text/javascript">
window.addEventListener('message', function (event) {
if (event.data === 'naverLoginSuccess') {
window.location.href = 'list.board';
}
});
</script>여기까지 네이버 소셜로그인 POST 방식으로 MVC 넣어봤습니다.
네이버 소셜로그인 하시는 분들께 도움이 되시길 바랄게요!
시간이 된다면 다른 소셜 로그인들도 적어볼게요.
그럼, 오늘도 즐거운 코딩되세요 :) 💚💚
좋은 글 감사합니다. 자주 방문할게요 :)