소셜 로그인 (네이버, 카카오톡, 페이스북) 후 프로필 확인 (내 프로젝트 적용))

Back-End/Spring 2019. 9. 24. 17:04
728x90
반응형

일반 로그인을 했을때 처럼 소셜 로그인을 한 후에 프로필을 확인할 수 있도록 구현.


카카오톡은 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 부분은 일반 로그인해서 프로필을 확인하는 부분과 동일하므로 생략함 (앞 글에 있음)





728x90
반응형
저작자표시

'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
:

티스토리툴바