소셜 로그인 (네이버, 카카오톡, 페이스북) 후 프로필 확인 (내 프로젝트 적용))
Back-End/Spring 2019. 9. 24. 17:04일반 로그인을 했을때 처럼 소셜 로그인을 한 후에 프로필을 확인할 수 있도록 구현.
카카오톡은 api 규정 때문에 id를 받을 수가 없어서 닉네임을 대신 받아옴.
login_form.jsp (로그인 관련 폼)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 | <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="google-signin-scope" content="profile email"> <meta name="google-signin-client_id" content="576736845363-o0474pib5q69qlcv6lm7o42hs6lu5u59.apps.googleusercontent.com"> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta name = "viewport" content = "user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" /> <title>Insert title here</title> </head> <br><br><%@ include file="../include/header.jsp"%> <table border="1" width="300"> <tr> <td> <br> <center> <span style="color:green; font-weight : bold;">회원 로그인</span> </center> <!-- 로그인창 --> <form action ="normale_login.do" method = "post"> <center> <br> 아이디 : <input type = "text" name="user_id" placeholder=" ID를 입력하세요 "><br><br> 비밀번호 : <input type = "password" name="member_pass" placeholder=" 비밀번호를 입력하세요 "><br><br> <button type = "submit" name = "submit" >로그인</button> <br> <br> <div class = "row"> <div class="col-xs-8"> <div class="checkbox icheck"> <label> <input type = "checkbox" name = "useCookie"> 로그인유지 </label> </div> </div> </div> </center> <center> <html lang="ko"> <head> <script type="text/javascript" src="https://static.nid.naver.com/js/naveridlogin_js_sdk_2.0.0.js" charset="utf-8"></script> </head> <body> <br> <!-- 네이버아이디로로그인 버튼 노출 영역 --> <div id="naverIdLogin"></div> <!-- //네이버 아이디로 로그인 버튼 노출 영역 --> <!-- 네이버 아이디로 로그인 초기화 Script --> <script type="text/javascript"> var naverLogin = new naver.LoginWithNaverId( { //클라이언트 id와 콜백 url (결과페이지) clientId: "DphfmDygX4WFkf8nghMJ", callbackUrl: "http://localhost/hansub_project/login_result", isPopup: false, /* 팝업을 통한 연동처리 여부 */ loginButton: {color: "green", type: 3, height: 40} /* 로그인 버튼의 타입을 지정 */ } ); /* 설정정보를 초기화하고 연동을 준비 */ naverLogin.init(); </script> </center> </center> <center> <!-- 카카오톡 아이디 연동해서 로그인 --> <script src = "//developers.kakao.com/sdk/js/kakao.min.js"></script> <a id="kakao-login-btn"></a> <a href="http://developers.kakao.com/logout"></a> <script type='text/javascript'> Kakao.init('bd21082a499aaa79b4c08e01935a8a70'); //아까 카카오개발자홈페이지에서 발급받은 자바스크립트 키를 입력함 //카카오 로그인 버튼을 생성합니다. Kakao.Auth.createLoginButton({ container: '#kakao-login-btn', success: function(authObj) { Kakao.API.request({ url: '/v1/user/me', success: function(res) { console.log(res.id);//<---- 콘솔 로그에 id 정보 출력(id는 res안에 있기 때문에 res.id 로 불러온다) console.log(res.kaccount_email);//<---- 콘솔 로그에 email 정보 출력 (어딨는지 알겠죠?) console.log(res.properties['nickname']);//<---- 콘솔 로그에 닉네임 출력(properties에 있는 nickname 접근 // res.properties.nickname으로도 접근 가능 ) console.log(authObj.access_token);//<---- 콘솔 로그에 토큰값 출력 var id = res.id; //카카오톡 닉네임을 변수에 저장 var kakaonickname = res.properties.nickname; //카카오톡 닉네임을 변수에 저장 var kakaoe_mail = res.kaccount_email; //카카오톡 이메일을 변수에 저장함 window.location.replace("http://" + window.location.hostname + ( (location.port==""||location.port==undefined)?"":":" + location.port) + "/hansub_project/home?kakaonickname="+kakaonickname+"kakaotalk"+"&kakaoe_mail="+kakaoe_mail); } }) }, fail: function(error) { alert(JSON.stringify(error)); } }); </script> </center> <!-- 페이스북 아이디를 연동해서 로그인 --> <center> <button type= "button" id= "loginBtn" ><img src="C:/img/facelogin.png"/>페이스북 로그인</button> </center> <div id="access_token"></div> <div id="user_id"></div> <div id="name"></div> <div id="email"></div> <div id="gender"></div> <div id="birthday"></div> <div id="id"></div> <script> function getUserData() { /* FB.api('/me', function(response) { document.getElementById('response').innerHTML = 'Hello ' + response.name; console.log(response); }); */ FB.api('/me', {fields: 'name,email'}, function(response) { var facebookname = response.name; //페이스북 아이디를 변수에 저장함 var facebooke_mail = response.email; //페이스북 이메일을 변수에 저장함 window.location.replace("http://" + window.location.hostname + ( (location.port==""||location.port==undefined)?"":":" + location.port) + "/hansub_project/home?facebookname="+encodeURI(facebookname)+"&facebooke_mail="+facebooke_mail); }); } window.fbAsyncInit = function() { //SDK loaded, initialize it FB.init({ appId : '488986078336253', //페이스북 개발자 홈페이지에서 앱을 등록하고, 앱 id를 받아온다. cookie : true, // enable cookies to allow the server to access // the session xfbml : true, // parse social plugins on this page version : 'v3.3' // 페이스북 개발자 홈페이지에서 버전을 확인한 후 작성한다. }); //check user session and refresh it FB.getLoginStatus(function(response) { if (response.status === 'connected') { //만약 정상적으로 실행되었다면 유저의 데이터를 가져온다. //user is authorized //document.getElementById('loginBtn').style.display = 'none'; getUserData(); } else { //user is not authorized } }); }; //load the JavaScript SDK (function(d, s, id){ var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "//connect.facebook.com/ko_KR/sdk.js"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); //add event listener to login button document.getElementById('loginBtn').addEventListener('click', function() { //do the login FB.login(function(response) { if (response.authResponse) { access_token = response.authResponse.accessToken; //get access token user_id = response.authResponse.userID; //get FB UID console.log('access_token = '+access_token); console.log('user_id = '+user_id); //user just authorized your app //document.getElementById('loginBtn').style.display = 'none'; getUserData(); } }, {scope: 'email,public_profile,user_birthday', return_scopes: true}); }, false); </script> </form> <br> <!-- 아이디 찾기 --> <form action ="find.user_id.do"> <center> <button>아이디 찾기</button> </center> </form> <br> <!-- 비밀번호 찾기 --> <form action ="find.member_pass.do"> <center> <button>비밀번호찾기</button> </center> </form> <br> </td> </tr> </table> <body> <!-- 로그인 실패나 성공시 메시지를 받아서 출력하는 자바스크립트 구문 --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> $(function(){ var responseMessage = "<c:out value="${message}" />"; if (responseMessage != ""){ alert(responseMessage) } }) </script> </body> </html> | cs |
login.jsp (소셜 로그인 별로 프로필을 확인하는 각기 다른 메소드로 맵핑하게 만듦)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | <c:if test = "${sessionScope.navername != null}"> (네이버)${sessionScope.navername}님이 로그인 하셨습니다.<br><br> <form action = "naver_logout.do" method = "post"> <button type = "submit" name = "submit">로그아웃</button></form><br><br> <form action = "authentication.do" method = "post"> <button type = "submit" name = "submit">회원 인증하기 (인증을 해야 각종 기능들 사용 가능)</button></form><br><br> <form action = "naver_member_profile.do" method = "post"> <button type = "submit" name = "submit">나의 프로필 확인</button></form><br><br> </c:if> <c:if test = "${sessionScope.kakaonickname != null}"> (카카오톡)${sessionScope.kakaonickname}님이 로그인 하셨습니다.<br><br> <form action = "kakao_logout.do" method = "post"> <button type = "submit" name = "submit">로그아웃</button></form><br><br> <form action = "authentication.do" method = "post"> <button type = "submit" name = "submit">회원 인증하기 (인증을 해야 각종 기능들 사용 가능)</button></form><br><br> <form action = "kakao_member_profile.do" method = "post"> <button type = "submit" name = "submit">나의 프로필 확인</button></form><br><br> </c:if> <c:if test = "${sessionScope.facebookname != null}"> (페이스북)${sessionScope.facebookname}님이 로그인 하셨습니다.<br><br> <form action = "facebook_logout.do" method = "post"> <button type = "submit" name = "submit">로그아웃</button></form><br><br> <form action = "authentication.do" method = "post"> <button type = "submit" name = "submit">회원 인증하기 (인증을 해야 각종 기능들 사용 가능)</button></form><br><br> <form action = "facebook_member_profile.do" method = "post"> <button type = "submit" name = "submit">나의 프로필 확인</button></form><br><br> </c:if> | cs |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <c:if test = "${sessionScope.user_id == null and sessionScope.navername == null and sessionScope.kakaonickname == null and sessionScope.facebookname == null and sessionScope.admin_id == null}"> <% //url로 보낸 아이디를 세션에 저장하기 위해 변수에 저장함 String navername = request.getParameter("navername"); String kakaonickname = request.getParameter("kakaonickname"); String facebookname = request.getParameter("facebookname"); String normalname = request.getParameter("user_id"); String admin_id = request.getParameter("admin_id"); //url로 보낸 이메일를 세션에 저장하기 위해 변수에 저장함 String navere_mail = request.getParameter("navere_mail"); String kakaoe_mail = request.getParameter("kakaoe_mail"); String facebooke_mail = request.getParameter("facebooke_mail"); %> <% //아이디를 세션에 저장 session.setAttribute("navername", navername); session.setAttribute("kakaonickname", kakaonickname); session.setAttribute("facebookname", facebookname); session.setAttribute("normalname", normalname); session.setAttribute("admin_id", admin_id); //이메일을 세션에 저장 session.setAttribute("navere_mail", navere_mail); session.setAttribute("kakaoe_mail", kakaoe_mail); session.setAttribute("facebooke_mail", facebooke_mail); | cs |
MemberController.java 중 일부 (각 소셜 로그인 별로 메소드를 만들어서 session에 있는 아이디 값을 넘겨서 회원 자료를 검색하게 함)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 | //회원의 아이디로 회원 프로필을 출력하는 메소드 (네이버) @RequestMapping(value = "naver_member_profile.do") public ModelAndView naver_member_profile(HttpSession session, Date join_date, MemberDTO dto) throws Exception{ //세션에 저장되어 있는 회원의 아이디를 변수에 저장함 String user_id =(String)session.getAttribute("navername"); //데이터베이스에서 검색한 값들을 DTO타입에 LIST에 저장한다. java.util.List<MemberDTO> list = memberservice.member_profile(user_id); Map<String,Object> map = new HashMap<>(); //map에 리스트를 저장해서 출력할 view로 이동시킨다. //list가 null이면 회원정보가 없는것이므로 경고창을 출력하도록 함 ModelAndView mv = new ModelAndView(); //if문에서 list null처리를 할때에는 isEmpty()를 사용해서 null체크후 처리를 해주어야 한다. //list안에 값이 들어있을때 실행되는 구문 //join_date의 형식을 바꾸어야 하기 때문에 join_date만 따로 빼서 형식을 변경한 후에 따로 넘긴다. for (int i = 0; i<list.size(); i++) { join_date = list.get(i).getJoin_date(); } String re_join_date = new SimpleDateFormat("yyyy-MM-dd").format(join_date); map.put("re_join_date", re_join_date); map.put("list", list); mv.addObject("map",map); mv.setViewName("member/member_profile"); return mv; } //회원의 아이디로 회원 프로필을 출력하는 메소드 (카카오톡) @RequestMapping(value = "kakao_member_profile.do") public ModelAndView kakao_member_profile(HttpSession session, Date join_date, MemberDTO dto) throws Exception{ //세션에 저장되어 있는 회원의 아이디를 변수에 저장함 String user_id =(String)session.getAttribute("kakaonickname"); //데이터베이스에서 검색한 값들을 DTO타입에 LIST에 저장한다. java.util.List<MemberDTO> list = memberservice.member_profile(user_id); Map<String,Object> map = new HashMap<>(); //map에 리스트를 저장해서 출력할 view로 이동시킨다. //list가 null이면 회원정보가 없는것이므로 경고창을 출력하도록 함 ModelAndView mv = new ModelAndView(); //if문에서 list null처리를 할때에는 isEmpty()를 사용해서 null체크후 처리를 해주어야 한다. //list안에 값이 들어있을때 실행되는 구문 //join_date의 형식을 바꾸어야 하기 때문에 join_date만 따로 빼서 형식을 변경한 후에 따로 넘긴다. for (int i = 0; i<list.size(); i++) { join_date = list.get(i).getJoin_date(); } String re_join_date = new SimpleDateFormat("yyyy-MM-dd").format(join_date); map.put("re_join_date", re_join_date); map.put("list", list); mv.addObject("map",map); mv.setViewName("member/member_profile"); return mv; } //회원의 아이디로 회원 프로필을 출력하는 메소드 (페이스북) @RequestMapping(value = "facebook_member_profile.do") public ModelAndView facebook_member_profile(HttpSession session, Date join_date, MemberDTO dto) throws Exception{ //세션에 저장되어 있는 회원의 아이디를 변수에 저장함 String user_id =(String)session.getAttribute("facebookname"); //데이터베이스에서 검색한 값들을 DTO타입에 LIST에 저장한다. java.util.List<MemberDTO> list = memberservice.member_profile(user_id); Map<String,Object> map = new HashMap<>(); //map에 리스트를 저장해서 출력할 view로 이동시킨다. //list가 null이면 회원정보가 없는것이므로 경고창을 출력하도록 함 ModelAndView mv = new ModelAndView(); //if문에서 list null처리를 할때에는 isEmpty()를 사용해서 null체크후 처리를 해주어야 한다. //list안에 값이 들어있을때 실행되는 구문 //join_date의 형식을 바꾸어야 하기 때문에 join_date만 따로 빼서 형식을 변경한 후에 따로 넘긴다. for (int i = 0; i<list.size(); i++) { join_date = list.get(i).getJoin_date(); } String re_join_date = new SimpleDateFormat("yyyy-MM-dd").format(join_date); map.put("re_join_date", re_join_date); map.put("list", list); mv.addObject("map",map); mv.setViewName("member/member_profile"); return mv; } | cs |
Service, DAO, Mapper, 프로필 출력하는 view 부분은 일반 로그인해서 프로필을 확인하는 부분과 동일하므로 생략함 (앞 글에 있음)
'Back-End > Spring' 카테고리의 다른 글
| 베스트게시물 게시판 (디자인 코드 추가, 내 프로젝트에 적용) (2) | 2019.09.27 |
|---|---|
| 베스트 게시물 관련 게시판 구현 (내 프로젝트에 적용) (0) | 2019.09.26 |
| 프로필보기 기능 구현 (내 프로젝트에 적용) (0) | 2019.09.23 |
| java에서 List형태로 저장한 값 출력 및 날짜형식 변환 (0) | 2019.09.20 |
| java에서 List null 체크 (0) | 2019.09.20 |