[스프링 -6]Spring 네이버 로그인하기 (네아로)

'

1. 네이버 개발자 센터에서 어플리케이션 등록을 해줍니당

https://developers.naver.com/apps/#/wizard/register?auth=true

 

 view 페이지 보여지기 위해서 mapping

1
2
3
4
@RequestMapping("/naver.do")
    public String naver() {
        return "naver_login";
    }
cs

 

1. naver_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
<%@ 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>
  
<!-- 네아로 SDK -->
<script type="text/javascript" src="https://static.nid.naver.com/js/naveridlogin_js_sdk_2.0.0.js" charset="utf-8"></script>
  
</head>
<body>
  
    <!-- 네이버 로그인 버튼 생성 위치 -->
    <div id="naverIdLogin"></div>
  
</body>
<script type="text/javascript">
    var naverLogin = new naver.LoginWithNaverId(
        {
            clientId: "OJ052qiphOR5rZzvU5l6",
              // 본인의 Client ID로 수정, 띄어쓰기는 사용하지 마세요.
            callbackUrl: "http://localhost:8070/spring/callback",
              // 본인의 callBack url로 수정하세요.
            isPopup: false,
            loginButton: {color: "white", type: 3, height: 60}
              // 네이버 로그인버튼 디자인 설정. 한번 바꿔보세요:D
        }
    );
naverLogin.init();
</script>
</html>
cs

위에 네이버 아이디 로그인하기를 누르면 callback 으로 보내져用!

 

1
2
3
4
5
6
 
    @RequestMapping(value="/callback", method=RequestMethod.GET)
    public String callBack(){
        return "callback";
    }
    
cs

2. callback.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
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Insert title here</title>
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
</head>
<body>
 
<script type="text/javascript" src="https://static.nid.naver.com/js/naveridlogin_js_sdk_2.0.0.js" charset="utf-8"></script>
<script>
    var naverLogin = new naver.LoginWithNaverId({
        clientId: "OJ052qiphOR5rZzvU5l6"// 본인걸로 수정, 띄어쓰기 금지.
        callbackUrl: "http://localhost:8070/spring/home.do"// 아무거나 설정
        isPopup: false,
        callbackHandle: true
    });
    naverLogin.init();
 
    window.addEventListener('load'function () {
    naverLogin.getLoginStatus(function (status) {
 
    if (status) {
        /* console.log(naverLogin.user); */
        var age = naverLogin.user.getAge();
        var birthday = naverLogin.user.getBirthday();
        var email = naverLogin.user.getEmail();
        var gender = naverLogin.user.getGender();
        var id = naverLogin.user.getId();
        var name = naverLogin.user.getName();
        var nickName = naverLogin.user.getNickName();
 
        $.ajax({
            type: 'post',
            url: 'naverSave',
            data: {'n_age':age, 'n_birthday':birthday, 'n_email':email, 'n_gender':gender, 'n_id':id, 'n_name':name'n_nickName':nickName},
            dataType: 'text',
            success: function(result) {
                if(result=='ok') {
                    console.log('성공')
                    location.replace("http://localhost:8070/spring/home.do"
                } else if(result=='no') {
                    console.log('실패')
                    location.replace("http://localhost:8070/spring/home1.do")
                }
            },
            error: function(result) {
                console.log('오류 발생')
            }
        })
 
    } else {
        console.log("callback 처리에 실패하였습니다.");
    }
    });
});
</script>
</body>
</html>


cs

 

3. controller 생성

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
@RequestMapping("/naver.do")
    public String naver() {
        return "naver_login";
    }
    
    
    @RequestMapping(value="/callback", method=RequestMethod.GET)
    public String callBack(){
        return "callback";
    }
    
    @RequestMapping(value="naverSave", method=RequestMethod.POST)
    public @ResponseBody String naverSave(@RequestParam("n_age"String n_age, @RequestParam("n_birthday"String n_birthday, @RequestParam("n_email"String n_email, @RequestParam("n_gender"String n_gender, @RequestParam("n_id"String n_id, @RequestParam("n_name"String n_name, @RequestParam("n_nickName"String n_nickName) {
    System.out.println("#############################################");
    System.out.println(n_age);
    System.out.println(n_birthday);
    System.out.println(n_email);
    System.out.println(n_gender);
    System.out.println(n_id);
    System.out.println(n_name);
    System.out.println(n_nickName);
    System.out.println("#############################################");
 
    NaverVo naver = new NaverVo();
    naver.setN_age(n_age);
    naver.setN_birthday(n_birthday);
    naver.setN_email(n_email);
    naver.setN_gender(n_gender);
    naver.setN_id(n_id);
    naver.setN_name(n_name);
    naver.setN_nickName(n_nickName);
    
    
    System.out.println("zzzzz =" +naver.getN_age());
 
    String result = "no";
    
    if(naver!=null) {
        result = "ok";
    }
 
    return result;
    
    }
cs