본문 바로가기
bitcamp/면접족보

면접족보_21/02/17(Kakao_REST API)

yeanhee 2021. 2. 17. 18:17

1. v4 템플릿을 적용하여, 카카오 로그인을 구현하시오.

<SocialController.java>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
@Log4j
@AllArgsConstructor
@Controller
public class SocialController {
    private KakaoService kakaoService;
    
    @RequestMapping("/social")
    public String social(Model model) {
        log.info("social");
        model.addAttribute("url", kakaoService.getAuthorizationUrl());
        return "kakao/index";
    }
        
    @RequestMapping("/callback")
    public String callback(String code, Model model) {
        log.info("callback");
        
        KakaoAuth auth = kakaoService.getKakaoTokenInfo(code);
        KakaoVO kakaoVO= kakaoService.getKakaoProfile(auth.getAccess_token());
        model.addAttribute("user", kakaoVO);
 
        return "kakao/success";
    }
}
 cs


<KakaoService.java>

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
@Service
public class KakaoService{
    private final static String client_id = " ";
    private final static String redirect_uri = "http://localhost:8282/ex/callback";    
    private final static String token_uri = "https://kauth.kakao.com/oauth/token";
    private final static String profile_uri = "https://kapi.kakao.com/v2/user/me";
    
    public String getAuthorizationUrl() {
        String url = "https://kauth.kakao.com/oauth/authorize?client_id=" + client_id + "&redirect_uri=" + redirect_uri + "&response_type=code";
        return url;
    }
 
    public KakaoAuth getKakaoTokenInfo(String code) {
        RestTemplate rt = new RestTemplate();
        HttpHeaders headers = new HttpHeaders();
        headers.add("Content-type", "application/x-www-form-urlencoded;charset=utf-8");
        
        MultiValueMap<String, String> params = new LinkedMultiValueMap<>();
        params.add("grant_type", "authorization_code");
        params.add("client_id", client_id);
        params.add("redirect_uri", redirect_uri);
        params.add("code", code);
        
        HttpEntity<MultiValueMap<String, String>> kakaoTokenRequest = new HttpEntity<>(params, headers);
        
        ResponseEntity<String> response = rt.exchange(
                token_uri,
                HttpMethod.POST,
                kakaoTokenRequest,
                String.class
        );
        
        Gson gson = new Gson();
        if (response.getStatusCode() == HttpStatus.OK) {
            return gson.fromJson(response.getBody(), KakaoAuth.class); 
        }
        
        return null;
    }
    
    public KakaoVO getKakaoProfile(String accessToken) {        
        RestTemplate rt = new RestTemplate();
        
        HttpHeaders headers = new HttpHeaders();
        headers.setContentType(MediaType.APPLICATION_FORM_URLENCODED);
        headers.set("Authorization", "Bearer " + accessToken);
        
        HttpEntity<MultiValueMap<String, String>> request = new HttpEntity<>(null, headers);
        Gson gson = new Gson();
        try {
            ResponseEntity<String> response = rt.postForEntity(profile_uri, request, String.class);
            
            if (response.getStatusCode() == HttpStatus.OK)
                System.out.println(response.getBody());
                KakaoVO kakaoVO = gson.fromJson(response.getBody(), KakaoVO.class);
                return kakaoVO;           
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }
}
 cs

 

<KakaoAuth.java>

1
2
3
4
5
6
7
8
9
10
11
@Data
@NoArgsConstructor
@AllArgsConstructor
public class KakaoAuth {
    private String access_token;
    private String token_type;
    private String refresh_token;
    private int expires_in;
    private String scope;
    private int refresh_token_expires_in;
}
 cs

 

<KakaoProperties.java>

1
2
3
4
5
6
7
8
@Data
@NoArgsConstructor
@AllArgsConstructor
public class KakaoProperties {
    private String nickname;
    private String thumbnail_image;
    private String profile_image;
}
 cs

 

<KakaoVO.java>

1
2
3
4
5
6
7
8
9
@Data
@NoArgsConstructor
@AllArgsConstructor
public class KakaoVO {
    private int id;
    private String connected_at;
    private KakaoProperties properties;
    private KakaoAccount kakao_account;
}
 cs

 

<KakaoProfile.java>

1
2
3
4
5
6
7
8
@Data
@NoArgsConstructor
@AllArgsConstructor
public class KakaoProfile {
    private String nickname;
    private String thumbnail_image_url;
    private String profile_image_url;
}
 cs

 

<KakaoAccount.java>

1
2
3
4
5
6
7
@Data
@NoArgsConstructor
@AllArgsConstructor
public class KakaoAccount {
    private boolean profile_needs_agreement;
    private KakaoProfile profile;
}
 cs

 

<index.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
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Login V4</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<!--===============================================================================================-->    
    <link rel="icon" type="image/png" href="${pageContext.request.contextPath}/resources/v4/images/icons/favicon.ico"/>
<!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/resources/v4/vendor/bootstrap/css/bootstrap.min.css">
<!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/resources/v4/fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/resources/v4/fonts/iconic/css/material-design-iconic-font.min.css">
<!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/resources/v4/vendor/animate/animate.css">
<!--===============================================================================================-->    
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/resources/v4/vendor/css-hamburgers/hamburgers.min.css">
<!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/resources/v4/vendor/animsition/css/animsition.min.css">
<!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/resources/v4/vendor/select2/select2.min.css">
<!--===============================================================================================-->    
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/resources/v4/vendor/daterangepicker/daterangepicker.css">
<!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/resources/v4/css/util.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/resources/v4/css/main.css">
<!--===============================================================================================-->
<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 
</head>
<body>
    <div class="limiter">
        <div class="container-login100" style="background-image: url('${pageContext.request.contextPath}/resources/v4/images/bg-01.jpg');">
            <div class="wrap-login100 p-l-55 p-r-55 p-t-65 p-b-54">
                <form class="login100-form validate-form">
                    <span class="login100-form-title p-b-49">
                        Login
                    </span>
 
                    <div class="wrap-input100 validate-input m-b-23" data-validate = "Username is reauired">
                        <span class="label-input100">Username</span>
                        <input class="input100" type="text" name="username" placeholder="Type your username">
                        <span class="focus-input100" data-symbol="&#xf206;"></span>
                    </div>
 
                    <div class="wrap-input100 validate-input" data-validate="Password is required">
                        <span class="label-input100">Password</span>
                        <input class="input100" type="password" name="pass" placeholder="Type your password">
                        <span class="focus-input100" data-symbol="&#xf190;"></span>
                    </div>
                    
                    <div class="text-right p-t-8 p-b-31">
                        <a href="#">
                            Forgot password?
                        </a>
                    </div>
                    
                    <div class="container-login100-form-btn">
                        <div class="wrap-login100-form-btn">
                            <div class="login100-form-bgbtn"></div>
                            <button class="login100-form-btn">
                                Login
                            </button>
                        </div>
                    </div>
 
                    <div class="txt1 text-center p-t-54 p-b-20">
                        <span>
                            Or Sign Up Using
                        </span>
                    </div>
 
                    <div class="flex-c-m">
                        <a href="${url}" class="login100-social-item bg1">
                            <i class="fa fa-facebook"></i>
                        </a>
 
                        <a href="#" class="login100-social-item bg2">
                            <i class="fa fa-twitter"></i>
                        </a>
 
                        <a href="#" class="login100-social-item bg3">
                            <i class="fa fa-google"></i>
                        </a>
                    </div>
 
                    <div class="flex-col-c p-t-155">
                        <span class="txt1 p-b-17">
                            Or Sign Up Using
                        </span>
 
                        <a href="#" class="txt2">
                            Sign Up
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
 
    <div id="dropDownSelect1"></div>
    
<!--===============================================================================================-->
    <script src="${pageContext.request.contextPath}/resources/v4/vendor/jquery/jquery-3.2.1.min.js"></script>
<!--===============================================================================================-->
    <script src="${pageContext.request.contextPath}/resources/v4/vendor/animsition/js/animsition.min.js"></script>
<!--===============================================================================================-->
    <script src="${pageContext.request.contextPath}/resources/v4/vendor/bootstrap/js/popper.js"></script>
    <script src="${pageContext.request.contextPath}/resources/v4/vendor/bootstrap/js/bootstrap.min.js"></script>
<!--===============================================================================================-->
    <script src="${pageContext.request.contextPath}/resources/v4/vendor/select2/select2.min.js"></script>
<!--===============================================================================================-->
    <script src="${pageContext.request.contextPath}/resources/v4/vendor/daterangepicker/moment.min.js"></script>
    <script src="${pageContext.request.contextPath}/resources/v4/vendor/daterangepicker/daterangepicker.js"></script>
<!--===============================================================================================-->
    <script src="${pageContext.request.contextPath}/resources/v4/vendor/countdowntime/countdowntime.js"></script>
<!--===============================================================================================-->
    <script src="${pageContext.request.contextPath}/resources/v4/js/main.js"></script>
 
</body>
</html>
 cs

 

<success.jsp>

1
2
3
4
5
6
<body>
    <h1>카카오 로그인 성공!</h1>
    <p>${user.kakao_account.profile.nickname}님환영합니다.</p>
    <a href="${pageContext.request.contextPath}/board/list">게시판 리스트</a>
   <a href="http://developers.kakao.com.logout">Logout</a>
</body>
 cs

 

<로그인 전 화면>

 

<로그인 후 화면>

 

<로그아웃 화면>

'bitcamp > 면접족보' 카테고리의 다른 글

면접족보_21/02/19  (0) 2021.02.19
면접족보 21/02/16_스프링시큐리티  (0) 2021.02.17
면접족보 21/02/15_ AOP  (0) 2021.02.17
면접족보 21/02/10_RESTful, Intercptor  (0) 2021.02.17
면접족보 21/02/09_트랜잭션  (0) 2021.02.17

'bitcamp/면접족보' Related Articles

티스토리툴바