ε Spring 네아로 로그인

@雲原ジェリー·2022년 1월 2일

Spring Framework

목록 보기

5/6

스프링 프레임워크에서 네아로 (네이버 아이디로 로그인) 사용하기!

스프링 프레임워크에서 네아로 사용하기입니다.
'네아로' 라고 네이버에서 제공하는 로그인 API 을 사용하는데 카카오랑 약간 다릅니다.
저는 네이버 로그인부터 Controller에 정보를 받는것까지 정리하겠습니다.
자세한건 시작하면서 알아보겠습니다.

참고사항(필독!)

제 기억에 의존해서 만든 자료입니다. 틀린 부분이 많을 수 있습니다.

정석적인 방법이 아닙니다. 참고용으로 봐주세요.

네이버 개발자센터에서 먼저 설정을 해주세요.

저는 로그인시 정보제공은 전부 필수로 설정했습니다.
필요한 정보에 알맞게 바꾸세요.

NAVER Developers

참고 사이트 1

참고 사이트 2

서비스 URL & Callback URL ?

서비스 URL이란?
네아로를 서비스 할 기본 주소.
저는 http://localhost:8080/ 를 사용했습니다.

Callback URL이란?
로그인 완료 시 정보를 받을 페이지의 주소.
카카오 로그인의 redirect_uri와 비슷한 개념.
저는 http://localhost:8080/member/callBack 을 사용했습니다.

login.jsp 생성

login.jsp에 네아로 API를 사용하기 위한 SDK를 호출합니다.
네이버 로그인을 사용하기 위한 버튼을 생성합니다.

<%@ 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>
  
<!-- 네아로 SDK -->
<script type="text/javascript" src="https://static.nid.naver.com/js/naveridlogin_js_sdk_2.0.0.js" charset="utf-8"></script>
  
</head>
<body>
  
	<!-- 네이버 로그인 버튼 생성 위치 -->
	<div id="naverIdLogin"></div>
  
</body>
<script type="text/javascript">
	var naverLogin = new naver.LoginWithNaverId(
		{
			clientId: "CLIENT_ID",
  			// 본인의 Client ID로 수정, 띄어쓰기는 사용하지 마세요.
			callbackUrl: "http://localhost:8080/member/callBack",
  			// 본인의 callBack url로 수정하세요.
			isPopup: false,
			loginButton: {color: "white", type: 3, height: 60}
  			// 네이버 로그인버튼 디자인 설정. 한번 바꿔보세요:D
		}
	);
naverLogin.init();
</script>
</html>

여기까지 진행하셨으면 로그인창이 뜰겁니다. 이제 callBack.jsp를 설정해봅시다.

callback의 구조

사용자가 네이버 로그인을 시도.

로그인 성공 시 네이버 서버에서 정보를 callback url로 전달

callback url에서 정보를 받은 후 용도에 맞게 처리

즉, callback url로 설정한 jsp가 정보를 받는 jsp입니다.
정보는 JSON 타입으로 주며, JSON안의 요소는 String 타입으로 되있습니다.
그럼 컨트롤러에서 callBack 페이지 요청을 처리해주는 메서드를 만들러 가봅시다.

@Controller


@RequestMapping(value="callBack", method=RequestMethod.GET)
public String callBack(){
	return "member/callBack";
}

callBack.jsp만 출력해주면 되므로 코드는 매우 간단합니다.
그럼 callBack.jsp로 가봅시다.

callBack.jsp

네이버에서 제공하는 개인 정보는 user라는 객체에 담겨서 오게됩니다.
JSON타입을 그대로 Controller로 보내 처리하는 방법이 있지만 제 부족한 실력으로 인해 모든 데이터 (프로필사진 제외)를 보내 처리했습니다.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!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 type="text/javascript" src="https://static.nid.naver.com/js/naveridlogin_js_sdk_2.0.0.js" charset="utf-8"></script>
<script>
	var naverLogin = new naver.LoginWithNaverId({
		clientId: "CLIENT_ID", // 본인걸로 수정, 띄어쓰기 금지.
		callbackUrl: "http://localhost:8080/member/memberMain", // 아무거나 설정
		isPopup: false,
		callbackHandle: true
	});
	naverLogin.init();

	window.addEventListener('load', function () {
	naverLogin.getLoginStatus(function (status) {

	if (status) {
		/* console.log(naverLogin.user); */
		var age = naverLogin.user.getAge();
		var birthday = naverLogin.user.getBirthday();
		var email = naverLogin.user.getEmail();
		var gender = naverLogin.user.getGender();
		var id = naverLogin.user.getId();
		var name = naverLogin.user.getName();
		var nickName = naverLogin.user.getNickName();

		$.ajax({
			type: 'post',
			url: 'naverSave',
			data: {'n_age':age, 'n_birthday':birthday, 'n_email':email, 'n_gender':gender, 'n_id':id, 'n_name':name, 'n_nickName':nickName},
			dataType: 'text',
			success: function(result) {
				if(result=='ok') {
					console.log('성공')
					location.replace("http://localhost:8080/member/Main") 
				} else if(result=='no') {
					console.log('실패')
					location.replace("http://localhost:8080/member/login")
				}
			},
			error: function(result) {
				console.log('오류 발생')
			}
		})

	} else {
		console.log("callback 처리에 실패하였습니다.");
	}
	});
});
</script>
</body>
</html>

여기까지 했으면 정보를 받기만 하면 끝입니다.
ajax안에 location.replace()로 정보를 받은 뒤 갈 주소를 작성하시면 됩니다.
원래는 json으로 보내고, 받아야하는것이 정석이지만 제가 아직 코딩실력이 미숙해 못한점 이해해주세요.
그럼 Controller에서 정보를 받기 전 DTO에 담을 준비를 해봅시다.

NaverDTO

package com.spring.project.dto;

import lombok.Data;

@Data
public class NaverDTO {

	private long n_number;	// pk로 쓸 값
	private String n_age;
	private String n_birthday;
	private String n_email;
	private String n_gender;
	private String n_id;
	private String n_name;
	private String n_nickName;
	
}

DTO의 각 field값이 무엇을 의미하는지 잘 알고 계실거라 믿습니다.
그럼 Controller로 넘어갑시다.

@Controller

ajax에서 데이터를 보낸 주소를 처리하는 메서드를 하나 만듭니다.

@RequestMapping(value="naverSave", method=RequestMethod.POST)
	public @ResponseBody String naverSave(@RequestParam("n_age") String n_age, @RequestParam("n_birthday") String n_birthday, @RequestParam("n_email") String n_email, @RequestParam("n_gender") String n_gender, @RequestParam("n_id") String n_id, @RequestParam("n_name") String n_name, @RequestParam("n_nickName") String n_nickName) {
	System.out.println("#############################################");
	System.out.println(n_age);
	System.out.println(n_birthday);
	System.out.println(n_email);
	System.out.println(n_gender);
	System.out.println(n_id);
	System.out.println(n_name);
	System.out.println(n_nickName);
	System.out.println("#############################################");

	NaverDTO naver = new NaverDTO();
	naver.setN_age(n_age);
	naver.setN_birthday(n_birthday);
	naver.setN_email(n_email);
	naver.setN_gender(n_gender);
	naver.setN_id(n_id);
	naver.setN_name(n_name);
	naver.setN_nickName(n_nickName);
    
	// ajax에서 성공 결과에서 ok인지 no인지에 따라 다른 페이지에 갈 수 있게끔 result의 기본값을 "no"로 선언
	String result = "no";
    
	if(naver!=null) {
		// naver가 비어있지 않는다는건 데이터를 잘 받아왔다는 뜻이므로 result를 "ok"로 설정
		result = "ok";
	}

	return result;
    
	}