해당 프로젝트는 2023/01/25 ~ 2023/03/12 내에 진행되는
아카데미 내 수강생들끼리 팀을 나누어 진행한 모의 프로젝트입니다.
팀원은 5명이었으며, 프로젝트 리더를 맡았습니다.
이전 글 목록
1) 주어진 RFP를 바탕으로 주제 선정 - Spring Project(OTT 서비스)
2) ERD 설계 - Spring Project(OTT 서비스)
3) 회원 가입 기능 구현 - Spring Project (OTT 서비스)
4) 로그인, 로그아웃 기능 구현 - Spring Project (OTT 서비스)
5) 상세 페이지 및 회원 정보 수정 - Spring Project (OTT 서비스)
6) CRUD를 한번에 → 게시판 만들기(QNA게시판) - Spring Project(Mybatis) (OTT 서비스)
7) 게시판 페이징 처리 - Spring Project (OTT 서비스)
8) 카카오 지도 API 사용하기 - Spring Project (OTT 서비스)
네이버 로그인 API 이용하기
https://developers.naver.com/products/login/api/api.md
네이버 로그인 - INTRO
환영합니다 네이버 로그인의 올바른 적용방법을 알아볼까요? 네이버 로그인을 통해 신규 회원을 늘리고, 기존 회원은 간편하게 로그인하게 하려면 제대로 적용하는 것이 중요합니다! 이에 올바
developers.naver.com
네이버에서 API 이용 신청을 통한 애플리케이션 등록을 해야 한다.
사용할 URL과 콜백 시 사용될 URL을 설정하자.
https://developers.naver.com/docs/login/web/web.md
Web 애플리케이션 - LOGIN
네이버 로그인은 서버 사이드 언어인 PHP나 Java로 개발한 웹 애플리케이션에도 적용할 수 있습니다. 또한 프런트엔드에서 사용하는 JavaScript를 사용해도 적용할 수 있습니다. API 호출 예제 예제
developers.naver.com
네이버에서 로그인 API의 자세한 사용법에 대한 문서도 제공된다.
사용하기
naverlogin.js
var naverLogin = new naver.LoginWithNaverId({
clientId: "XMsvnx3R1_T_0aXB93xf",
callbackUrl: "http://localhost:8080/user/naverLogin",
isPopup: false, /* 팝업을 통한 연동처리 여부 */
loginButton: {color: "green", type: 1, height: 20}
});
naverLogin.init();/* 설정정보를 초기화하고 연동을 준비 */
navercallback.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>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://static.nid.naver.com/js/naveridlogin_js_sdk_2.0.0.js" charset="utf-8"></script>
<script>
/* 02.10최종완료 - */
/* 네이버 아이콘 클릭 시 콜백되는 화면, 해당 화면에서 ApiLoginController의 Naver메서드들과 데이터를 주고받으며 가입처리 및 로그인 처리 */
const naverLogin = new naver.LoginWithNaverId({
clientId: "내 클라이언트ID",
callbackUrl: "설정했던 콜백URL",
isPopup: false, /* 팝업을 통한 연동처리 여부 */
callbackHandle: true
});
naverLogin.init();/* 설정정보를 초기화하고 연동을 준비 */
window.addEventListener('load', function () {
naverLogin.getLoginStatus(function(status) {
if (status) {
const email = naverLogin.user.getEmail();
const nickName = naverLogin.user.getNickName();
const id = naverLogin.user.getId();
console.log(naverLogin);
$.ajax({
type : 'post',
url : 'naverSaved',
data : {"email" : email, "nickname" : nickName, "id" : id},
dataType : 'text',
success: function(result) {
/* success 1 : 가입해야 할 경우 */
if(result=='ok') {
/* success 1-1 : 닉네임 입력받아 가입시키기 */
/* 닉네임 입력 시 가입, 미입력 시 주소 리턴 */
var newNickname = prompt('사용하실 닉네임을 입력해주세요');
if(newNickname != null){ /* 입력 시 데이터 전송으로 자동로그인 처리 및 메인 페이지 이동 */
$.ajax({
type : 'post',
url : 'naverSignin',
data : {"email" : email, "nickname" : newNickname, "id" : id}
});
alert(newNickname + "님 환영합니다");
location.href = "/video/list";
}
else { /* 가입 거절 시 로그인화면 리턴 */
location.href = "/user/signin"
}
/* success 2 : 기가입 */
} else if(result != null) {
alert(result + "님 반갑습니다.")
location.href = "/video/list"
}
},
error: function(result) {
console.log('오류 발생')
}
})
} else alert("콜백 실패");
});
});
</script>
</body>
</html>
네이버 로그인을 사용하기 위해 네이버에서 제공되는 스크립트를 받아왔다.
<script type="text/javascript" src="https://static.nid.naver.com/js/naveridlogin_js_sdk_2.0.0.js" charset="utf-8"></script>
제작중인 프로젝트의 USER TABLE에 네이버 로그인 시 받아오는 정보를 가지고 회원가입 여부를 체크한 뒤
1. 비회원이면 간단히 닉네임 입력 후 DB에 정보 저장
2. 회원이라면 "닉네임"님 환영합니다. 문구를 출력 후 메인 페이지로 넘어가게 처리했다.
2023.04 ~ 백엔드 개발자의 기록
포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!
