[OAuth] 카카오 로그인 API 예제!

오늘은 카카오 로그인 API 사용을 해보도록 하겠습니다.

순서는 아래와 같으며 순차적으로 따라오시면 문제가 없을듯해요~~

시작하겠습니다.

1) 아래 카카오 홈페이지에 들어가서 로그인 해주세요~

https://developers.kakao.com/

Kakao Developers

카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.

developers.kakao.com

2) 내 애플리케이션 클릭 후 "애플리케이션 추가하기" 눌러주시면 됩니다.

3) 회사 입력 단락은 아무거나 입력하셔도 무방해보입니다. 정보를 입력해주세요

4) 어플을 생성하시면 아래와 같이 API KEY가 발급되고 JavaScript 키를 사용할겁니다.

5) 카카오 로그인 메뉴로 이동 -> "활성화 설정" 상태 "ON" 으로 바꿔주시면 됩니다!

6) Redirect URL 은 REST API 사용 시 설정하기에 넘어가고 아래와 같이 JSP에 설정해줍니다

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <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>Login Demo - Kakao JavaScript SDK</title>
    <script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>

</head>
<body>
    <a id="kakao-login-btn"></a>
    <a href="http://developers.kakao.com/logout">Logout</a>
    <script type='text/javascript'>
        //<![CDATA[
        // 사용할 앱의 JavaScript 키를 설정해 주세요.
        Kakao.init('Your KEY');
        // 카카오 로그인 버튼을 생성합니다.
        Kakao.Auth.createLoginButton({
            container: '#kakao-login-btn',
            success: function (authObj) {
                alert(JSON.stringify(authObj));
            },
            fail: function (err) {
                alert(JSON.stringify(err));
            }
        });
      //]]>
    </script>
</body>
</html>

7) 당연히 컨트롤러는 JSP를 호출해주시면 됩니다.

package com.lupin.spring;

import java.text.DateFormat;
import java.util.Date;
import java.util.Locale;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

/**
 * Handles requests for the application home page.
 */
@Controller
public class HomeController {
	
	private static final Logger logger = LoggerFactory.getLogger(HomeController.class);
	
	/**
	 * Simply selects the home view to render by returning its name.
	 */
	@RequestMapping(value = "/", method = RequestMethod.GET)
	public String home(Locale locale, Model model) {
		logger.info("Welcome home! The client locale is {}.", locale);
		
		Date date = new Date();
		DateFormat dateFormat = DateFormat.getDateTimeInstance(DateFormat.LONG, DateFormat.LONG, locale);
		
		String formattedDate = dateFormat.format(date);
		
		model.addAttribute("serverTime", formattedDate );
		
		return "home";
	}
	
}

8) 서버를 기동시키면~ 로그인해주시고 alert 메세지가 뜨면 성공입니다!

로그인 누르시면~ 아래와 같은 화면이 뜨는데요!

성공적으로 로그인이 완료되면! 이러한 alert 메세지가 나오게됩니다!

여기까지 따라오시느라 고생하셨습니다. 안되는 부분이 있다면 댓글 남겨주세요

'개발 > OAuth' 카테고리의 다른 글

[OAuth] Spring 카카오톡 Login 연동 (3) (2)	2020.07.21
[OAuth] Spring 카카오톡 Login 연동 (2) (3)	2020.07.20
[OAuth] Spring 카카오톡 Login 연동 (1) (0)	2020.07.20

'개발 > OAuth' 카테고리의 다른 글

티스토리툴바