네이버 같은 경우에는 토큰을 콜백페이지에서 받아와지더라.
jQuery 랑 Ajax 이용해서 한 화면페이지에서 처리할랬는데 몇시간 내내 계속 잡아도 안되길래 일단 콜백페이지에서 처리하게끔 구현..
카카오 로그인보다 오래걸림 ㅠㅠ
loginView.jsp - 상단, 미리 선언해야 하는 태그
|
1
|
<script src="https://static.nid.naver.com/js/naveridlogin_js_sdk_2.0.0.js"></script>
|
cs |
loginView.jsp - javaScript 부분
|
1
2
3
4
5
6
7
8
9
10
|
//네이버 로그인
$(function(){
var naverLogin = new naver.LoginWithNaverId({
clientId: "{ClientId}",
callbackUrl: "{Callback URL}",
isPopup: true,
loginButton: {color: "green", type: 3, height: 45}
});
naverLogin.init();
})//e.o.naver
|
cs |
loginView.jsp - body 부분
|
1
2
3
4
5
6
|
<!-- 네이버 로그인 추가 -->
<div id="naverIdLogin" align="center">
<a id="naver-login-btn" href="#" role="button">
<img src="https://static.nid.naver.com/oauth/big_g.PNG" width="80%" height="45"/>
</a>
</div>
|
cs |
naverCallback.jsp - 2번에서 설정한 callbackUrl
|
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
|
<%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="https://static.nid.naver.com/js/naverLogin_implicit-1.0.3.js" charset="utf-8"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<script type="text/javascript">
var naver_id_login = new naver_id_login("{ClientId}", "YOUR_CALLBACK_URL");
// 접근 토큰 값 출력
//alert(naver_id_login.oauthParams.access_token);
// 네이버 사용자 프로필 조회
naver_id_login.get_naver_userprofile("naverSignInCallback()");
// 네이버 사용자 프로필 조회 이후 프로필 정보를 처리할 callback function
function naverSignInCallback() {
var id = naver_id_login.getProfileData('id')+"@n";
var nickname = naver_id_login.getProfileData('name');
//var email = naver_id_login.getProfileData('email');
$.ajax({
url : "/user/json/checkDuplication/"+id,
headers : {
"Accept" : "application/json",
"Content-Type" : "application/json"
},
success : function(idChk){
if(idChk==true){ //DB에 아이디가 없을 경우 => 회원가입
console.log("회원가입중...");
$.ajax({
url : "/user/json/addUser",
method : "POST",
headers : {
"Accept" : "application/json",
"Content-Type" : "application/json"
},
data : JSON.stringify({
userId : id,
userName : nickname,
password : "naver123",
}),
success : function(JSONData){
alert("회원가입이 정상적으로 되었습니다.");
window.close();
top.opener.location="/user/snsLogin/"+id;
}
})
}
if(idChk==false){ //DB에 아이디가 존재할 경우 => 로그인
console.log("로그인 중...");
window.close();
top.opener.location="/user/snsLogin/"+id;
}
}
})
}
</script>
<form name="defaultForm">
</form>
</body>
</html>
|
cs |
_M#]
반응형
'Backend > JAVA' 카테고리의 다른 글
| 클라이언트와 서버 구축하기 (기본) (0) | 2018.06.05 |
|---|---|
| 페이스북 로그인 API 적용 (0) | 2018.05.25 |
| 인스타그램 API 적용하여 게시물 가져오기 (0) | 2018.05.25 |
| 구글 로그인 API 적용 (0) | 2018.05.24 |
| 카카오 로그인 API 적용 (0) | 2018.05.24 |
댓글