매일 조금씩

Spring MVC 에 소셜로그인(카카오로그인) 구현하기 - JavaScript 키 본문

빅데이터 플랫폼 구축을 위한 자바 개발자 양성과정/랜선여행 커뮤니티 프로젝트

Spring MVC 에 소셜로그인(카카오로그인) 구현하기 - JavaScript 키

mezo 2021. 4. 27. 16:01
728x90
반응형

1. 사용자의 카카오로그인 아이디인 이메일주소를 웹의 아이디로 설정한다.

2. 만약 카카오로그인으로 로그인하는 것이 처음인 경우, 필수정보(닉네임 등)를 설정하기 위해 회원정보수정창으로 이동한다.

3. 만약 카카오로그인이 처음이 아닌 경우, 일반로그인과 같다. 

 

 

[설정]

가장 먼저 kakao developer에 로그인해서 애플리케이션을 하나만든다.

 

그러면 해당 애플리케이션은 아래처럼 앱키를 받는다.

이 중 아무거나 선택해서 사용하면 되는데 난 JavaScript 키를 사용했다.

 

 

아래의 플랫폼을 클릭한다.

 

플랫폼을 클릭한뒤 아래로 내리면 Web 설정이있다. 

여기서 내 사이트 도메인 주소를 추가한다. (하나밖에 안됨)

난 원래 http://localhost:8081 이었는데

NCLOUD에 호스팅한 이후로 NCLOUD의 IP주소로 바꿨다.

그리고 Redirect URI를 등록이란게 있는데

이건 카카오 로그인 후 연결될 페이지를 말하는 것이다.

REST API면 필수로 해주어야하지만 난 JavaScript 키를 사용해서 설정해주지 않아도 무방한듯 하나..

확실하지 않으니 그냥 해주기로 한다.

 

아래처럼 '등록하러 가기'를 클릭한다.

역시나 NCLOUD 에 호스팅한 이후 이므로 

원랜 http://localhost:8081/want/loginForm.do 였으나

위 사진처럼 바꿔주었다. 

 

 

다음은 동의항목 설정이다. 

왼쪽 메뉴에서 '동의항목'을 클릭하여 원하는대로 설정해준다.

 

그럼 kakao developer에서 설정해줘야할 건 모두 끝났다.

 

남은건 카카오 계정의 데이터를 어떻게 가져오느냐인데

아래처럼 문서 > 카카오로그인 > JavaScript 를 누르면 그에 관한 정보가 나온다.

 

 

[적용]

1. JSP

> view > user > loginForm.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<%
	if( request.getAttribute( "flag" ) != null && !request.getAttribute( "flag" ).equals( "" ) ) {
		int flag = (Integer)request.getAttribute( "flag" );
		
		out.println( " <script type='text/javascript'> " );
		if( flag == 0 ) {	//로그인성공
			out.println( " alert('로그인에 성공했습니다.'); " );
			out.println( " location.href='./home.do'" );
		} else if( flag == 1 ) {	//비번틀림
			out.println( " alert('비밀번호가 틀립니다.'); " );
			out.println( " location.href='./loginForm.do' " );
		} else if( flag == 2 ) {	//회원정보없음
			out.println( " alert('회원정보가 없습니다. 회원가입해주세요.'); " );
			out.println( " location.href='./loginForm.do' " );
		} else {					//기타 에러났을 때 또는 맨처음 시작
			out.println( " location.href='./loginForm.do' " );
		}
		out.println( " </script> " );
	}
%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Want 로그인</title>
<jsp:include page="../include/index.jsp"></jsp:include>

<!-- CSS File -->
<link href="./resources/css/loginForm.css" rel="stylesheet" />
<link href="./resources/css/navbar.css" rel="stylesheet">


<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>

<script>
	
	window.onload = function() {
		document.getElementById('login_submit').onclick = function() {
			
			if ( document.wfrm.id.value.trim() == '' ) {
				alert( 'ID를 입력해주세요' );
				return false;
			}
			if ( document.wfrm.password.value.trim() == '' ) {
				alert( 'Password를 입력해주세요' );
				return false;
			}
			document.login_frm.submit();
		}
	}
	
	//d2d78fe4b3e00dbdb6af02d56f8c765a
	window.Kakao.init("d2d78fe4b3e00dbdb6af02d56f8c765a");
	
	function kakaoLogin(){
		window.Kakao.Auth.login({
			scope:'profile,account_email,birthday',
			success: function(authObj){
				//console.log(authObj);
				window.Kakao.API.request({
					url: '/v2/user/me',
					success: res => {
						const email = res.kakao_account.email;
						const name = res.properties.nickname;
						const birth = res.kakao_account.birthday;
						
						console.log(email);
						console.log(name);
						console.log(birth);
						
						$('#kakaoemail').val(email);
						$('#kakaoname').val(name);
						$('#kakaobirth').val(birth);
						document.login_frm.submit();
					}
				});
				
			}
		});
	}

	
</script>

</head>
<body>
	<!-- 메뉴바 
		 현재페이지 뭔지 param.thisPage에 넣어서 navbar.jsp에  던짐 -->
	<jsp:include page="../include/navbar.jsp">
		<jsp:param value="loginForm" name="thisPage" />
	</jsp:include>
	
	<br /><br /><br /><br />

<div class="login-form">
    <form method="post" class="form-horizontal" name="login_frm">
    	<input type="hidden" name="login_ok" value="1"/>  <!-- form넘어갈때 얘도 같이넘어가서 회원정보비교함   -->
      	<div class="row">
        	<div class="col-8 offset-4">
				<h2>로그인</h2>
			</div>	
      	</div>			
        <div class="form-group row">
			<label class="col-form-label col-4">아이디</label>
			<div class="col-8">
                <input type="text" class="form-control" name="id" placeholder="ID 입력..." required="required">
            </div>        	
        </div>

		<div class="form-group row">
			<label class="col-form-label col-4">비밀번호</label>
			<div class="col-8">
                <input type="password" class="form-control" name="password" placeholder="Password 입력..." required="required">
            </div>        	
        </div>
		<div class="form-group row loginbtn">
			<button type="submit" id="login_submit" class="btn btn-primary btn-lg">로그인</button>
		</div>		
		
		<div class="form-group row">
			<div class="or-seperator"><b>or</b></div>
		</div>
		
		<div class="form-group row" id="kakaologin">
			<div class="kakaobtn">
				<input type="hidden" name="kakaoemail" id="kakaoemail" />
				<input type="hidden" name="kakaoname" id="kakaoname" />
				<input type="hidden" name="kakaobirth" id="kakaobirth" />
				<a href="javascript:kakaoLogin();"> 
					<img src="./resources/img/kakao_login_medium_wide.png" />
				</a>
			</div>
		</div>
		     
    </form>
    
    <%-- kakaoemail을 넘기기 위한 숨겨진 form --%>
     <%--
    <form action="./kakaologin.do" method="post" name="lfrm" hidden>
    	<input type="text" name="kakaoemail" id="kakaoemail" value="" />
    </form>
    --%>
	<div class="text-center">비밀번호가 기억나지 않습니까? <a href="./pwFindForm.do">비밀번호 찾기</a></div>
	<div class="text-center">아직 회원이 아니십니까? <a href="./signupForm.do">회원가입</a></div>
</div>

</body>
</html>

 

▶ 카카오 로그인 버튼 부분

<a href="javascript:kakaoLogin();"> 
    <img src="./resources/img/kakao_login_medium_wide.png" />
</a>

kakao developer에서 가져온 버튼 이미지 파일을 버튼에 사용한다.

 

 

▶ 키를 사용해서 정보를 가져오는 부분

아까 [설정]에서의 JavaScript 키를 사용하여 코드를 javascript로 작성한다.

//d2d78fe4b3e00dbdb6af02d56f8c765a
window.Kakao.init("d2d78fe4b3e00dbdb6af02d56f8c765a");

function kakaoLogin(){
    window.Kakao.Auth.login({
        scope:'profile,account_email,birthday',
        success: function(authObj){
            //console.log(authObj);
            window.Kakao.API.request({
                url: '/v2/user/me',
                success: res => {
                    const email = res.kakao_account.email;
                    const name = res.properties.nickname;
                    const birth = res.kakao_account.birthday;

                    console.log(email);
                    console.log(name);
                    console.log(birth);

                    $('#kakaoemail').val(email);
                    $('#kakaoname').val(name);
                    $('#kakaobirth').val(birth);
                    document.login_frm.submit();
                }
            });

        }
    });
}

이 코드는 kakao developer에 이렇게 쓰라고 다 나와있는 것을 가져와서 나에게 맞게 바꾼것이다. 

 

아래는 위 코드에 대한 설명이다.

 

2. Controller

> UserController.java

// ==================== 카카오 로그인 ========================
System.out.println("카카오로그인");
System.out.println(request.getParameter("kakaoemail"));
System.out.println(request.getParameter("kakaoname"));
System.out.println(request.getParameter("kakaobirth"));

// kakaoemail을 kakaoid에 저장
String kakaoid = request.getParameter("kakaoemail");

UserTO userTo = new UserTO();

// kakaoid를 to의 id로 세팅
userTo.setId(kakaoid);

// 카카오계정으로 로그인한 적이 있는지 없는지 
int result_lookup = userDao.loginLookup(userTo);

if (result_lookup == 0) { // 회원이 아닌경우 (카카오 계정으로 처음 방문한 경우) 카카오 회원정보 설정 창으로 이동
    System.out.println("카카오 회원 정보 설정");

    request.setAttribute("kakaoid",request.getParameter("kakaoemail"));
    request.setAttribute("kakaoname",request.getParameter("kakaoname"));
    request.setAttribute("kakaobirth",request.getParameter("kakaobirth"));
    request.setAttribute("kakaoemail",request.getParameter("kakaoemail"));

    // 회원가입창으로 이동
    return "user/kakaoLogin_editForm";

} else { // 이미 카카오로 로그인한 적이 있을 때 (최초 1회 로그인때 회원가입된 상태)
    // id, nick, profile을 가져와서
    userTo = userDao.loginOkNick(userTo);
    // id를 세션에 저장
    session.setAttribute("kakaoid", userTo.getId());
    // nick을 세션에 저장
    session.setAttribute("nick", userTo.getNick());
    // 프로필 사진 (profile)을 세션에 저장
    session.setAttribute("profile", userTo.getProfile());

    request.setAttribute("flag", 0);

    System.out.println("kakaoid : " + userTo.getId());
    System.out.println("nick : " + userTo.getNick());
    System.out.println("profile : " + userTo.getProfile());
}

controller에선 일반 로그인과 카카오로그인일때의 경우를 조건문으로 구분한 후, 

카카오로그인인 경우 위 코드로 처리하면 된다. 

 

 

 

 

이러면 카카오 로그인 완성!

728x90
반응형
저작자표시

'빅데이터 플랫폼 구축을 위한 자바 개발자 양성과정 > 랜선여행 커뮤니티 프로젝트' 카테고리의 다른 글

Spring MVC 로 메세지 기능 구현  (42) 2021.04.27
Spring MVC 로 무한 스크롤, 검색 구현하기  (8) 2021.04.22
Spring MVC 로 댓글(답글) 구현하기  (16) 2021.04.21
Spring MVC 로 하트(좋아요) 구현하기 - 모달창 포함  (10) 2021.04.21
Web socket을 활용한 실시간 댓글 알람 기능 구현  (0) 2021.03.30
'빅데이터 플랫폼 구축을 위한 자바 개발자 양성과정/랜선여행 커뮤니티 프로젝트' Related Articles more