카카오 로그인 OAuth2.0
지난 포스팅에서 OAuth2.0에 대한 개념과 인증방식 유형에 대해서 살펴보았다. 이번 포스팅에서는 OAuth2.0 인증 프로토콜을 사용해서, 카카오 로그인을 구현해 보도록 하겠다. 인증 코드 그랜트의 예제로 구현해 보자. 인가 코드 그랜트와 암시적 코드 그랜트의 개념에 대해서 아직 이해가 안된다면 아래 포스팅을 참고하면 좋다.
인가 코드 그랜트 적용단계
1단계 - 클라이언트 애플리케이션 등록
2단계 - 코드(태그) 얻기
3단계 - 코드(태그)로 엑세스 토큰 교환
4단계 - 엑세스토큰으로 나의 정보 얻기
1단계는 스프링으로 만든 나의 앱을 카카오 개발자 사이트에 등록한다.
2단계는 클라이언트 사이드에서 엑세스 토큰을 얻기위한 코드를 받는다.
3단계는 카카오에서 받은 코드를 이용해서 엑세스 토큰을 얻는다.
4단계는 액세스 토큰을 이용해서 나의 정보 또는 카카오 친구 목록을 얻어온다.
✅OAuth2 인증 - 인가 코드 그랜트에서는 나의 서버 사이드에서 카카오 서비스 코드(태그)를 받고, 나의 서버사이드에서 받은 코드(태그)로 엑세스 토큰을 요청했다. 여기서는 아래와 같은 방식으로 인가 코드 그랜트를 진행해나갈 예정이다.
(1) 나의 클라이언트 사이드 에서 코드(태그)요청
(2) 서버사이드에서 코드(태그) 받아서 클라이언트 사이드로 전달
(3) 클라이언트 사이드에서 받은 코드를 나의 서버로 전달
(4) 나의 서버는 받은 코드로 카카오 서버에 전달
(5) 카카오 서버는 나의 서버로 엑세스토큰 정보 전달
(6) 나의 서버에서 클라이언트로 엑세스 토큰 전달
(7) 나의 클라이언트에서 엑세스 토큰으로 나의 서버에 나의 카카오 정보 요청
(8) 나의 서버는 엑세스 토큰을 받아서 카카오 서버에 나의 정보 요청
(9) 나의 서버는 카카오 서버로 부터 응답을 받아서 클라이언트에 응답
이전 포스팅에서도 말했듯이, 인가 코드 그랜트를 설계하는 방법에 따라서 코드와 엑세스 토큰을 다양한 경로로 요청하고 받을 수 있다. 여기서 구현을 하면서 인지해야될 부분은 먼저 코드를 요청하고 응답 받은 뒤, 이 코드로 엑세스 토큰을 요청한다는 점이다. 그리고 최종적으로 엑세스 토큰으로 카카오 서비스의 리소스를 요청한다는 점이다. 이 개념이 제일 중요하다.
1단계 - 클라이언트 애플리케이션 등록
클라이언트가 OAuth2.0 서비스 제공자(카카오)에게 요청을 보내기 전에 서비스 제공자는 자기에게 요청을 보내는 클라이언트가 누군지 알아야 한다. 그래서 클라이언트 애플리케이션을 등록하는 과정이 필요하다. 서비스 제공자에게 애플리케이션을 등록하면 서로 신뢰 관계가 수립된다. 일단 한번만 등록을 하면된다. 먼저 카카오 개발자 사이트에서 자신의 사이트를 등록해주자. 카카오 개발자 사이트에 로그인을 한다. 내 애플리케이션 메뉴로 들어가서 아래 보이는 애플리케이션 추가하기 버튼을 누른 다음 앱 정보에 대해서 작성해준다.
앱을 생성한 후 내 애플리케이션 => 앱설정=> 플랫폼 화면에 보면은 myApp이라는 이름의 앱을 어느 플랫폼에서 사용할 건지 설정해주는 부분이 있다. 나는 web을 사용할 것이기 때문에 web 플랫폼 등록을 선택하고 카카오 로그인기능을 사용할 주소인 localhost:8080을 주소로 넣어주었다.
그 후 web 사이트 도메인을 작성했으면 그아래 리다이렉트 url을 작성하는 부분이 있다. 클릭 한 후 로그인 처리가 완료된 후, 어느 페이지로 이동 시킬건지 주소를 작성해준다. 암시적 코드 그랜트는 바로 클라이언트에서 토큰을 받는것이 일반적이다. 그래서 localhost:8080/success.jsp 같은 페이지를 적어준다. 그러나 암시적 그랜트 유형이라도 서버로 받아서 서버에서 무엇인가 처리하고 싶다면 서버의 특정 url을 처리하는 컨트롤러로 리다이렉트 시켜준다. 나는 서버에서 세션에 넣어주려고 서버 주소를 작성했다. 리다이렉트 url 설정이 끝났으면 위의 활성화 설정을 ON으로 셋팅해준다.
카카오 로그인을 사용할 웹주소와 성공했을때 돌아갈 리다이렉트 URL을 작성했다면, 왼쪽 햄버거 메뉴를 클릭한 후 동의항목 메뉴를 선택한다. 이 화면에서 사용자의 어떤 정보를 사용할것인지 체크하고 동의를 구하는 설정을 해야 한다.
2단계 - 코드(태그) 얻기
위에서 클라이언트 등록이 끝났으면 이제 카카오 코드를 얻는 방법에 대해서 살펴보자. 먼저 jsp 로그인 페이지를 아래와 같이 작성한다. 소스 상단에는 kakao sdk를 초기화하는 코드가 작성되어 있다. script 태그로 카카오 sdk를 참조해주고, init() 함수 파라미터에 자바스크립트 앱키를 넣어주고 아래처럼 console.log()로 찍어보자. true가 리턴되면 성공적으로 초기화가 된것이다. 즉, 카카오 서비스에 나의 앱이 잘 등록되었고, 나의 앱 화면에서도 카카오 로그인 기능을 쓸 준비가 되었다는 뜻이다.
home.jsp
카카오 코드를 받으면 컨트롤러에서 세션에 넣어줄 것이기 때문에 화면에서 세션을 이용해서 코드를 받았으면 보여주고, 받지 않았으면 보여주지 않게 처리한다. 세션에 카카오에서 받은 코드가 있으면 이제 이 코드로 엑세스 토큰을 요청할 수가 있다. 세션체크 밑에는 이 코드를 이용해서 엑세스 토큰을 요청할 a 태그가 작성되어 있다. 엑세스 토큰 받아오기 구현은 아래부분에서 진행한다. 카카오 로그인 버튼은 카카오 개발자 사이트에서 그대로 샘플을 가져왔다. 로그인 버튼이 눌리면 Kakao.Auth.authorize 함수가 실행되고 로그인 창이 뜬다. Kakao.Auth.authorize 함수 파라미터에는 리다이렉트 주소를 적어준다. 리다이렉트 주소는 카카오 개발자 사이트에 등록되어 있어야 한다.
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page contentType="text/html; charset=UTF-8" language="java"%>
<html>
<head>
<title>카카오 로그인</title>
<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
<script>
// SDK를 초기화 합니다. 사용할 앱의 JavaScript 키를 설정해 주세요.
Kakao.init('070e574cef4ec45be518f989611aff42');
// SDK 초기화 여부를 판단합니다.
console.log(Kakao.isInitialized());
</script>
</head>
<body>
<h1>
Hello world!
</h1>
<a id="custom-login-btn" href="javascript:loginWithKakao()">
<img
src="//k.kakaocdn.net/14/dn/btqCn0WEmI3/nijroPfbpCa4at5EIsjyf0/o.jpg"
width="222"
/>
</a>
<br>
<%
String code = null;
session = request.getSession();
if(session.getAttribute("code") != null){
code = (String)session.getAttribute("code");
out.print("<h5>code: " + code + "</h5>" + "<br>");
%>
<input type="hidden" id="code" value=<%=code%> />
<a id="mytoken" href="javascript:selectMyAccessTockenWithKakao()">나의 토큰 정보 얻기</a>
<%
}else{
out.print("*로그인 후 code를 받으세요." +"<br>");
}
%>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
var code = null;
if(document.getElementById("code") != null){
//코드 체크
var code = document.getElementById("code").value;
if(code != null){
//코드 존재
console.log("code 존재");
console.log(code);
Kakao.Auth.setAccessToken(code);
}else{
console.log("code 없음");
}
}
//카카오 로그인
function loginWithKakao() {
Kakao.Auth.authorize({
redirectUri: 'http://localhost:8080/oauth'
});
}
</script>
</body>
</html>
카카오 로그인 버튼이 있는 화면
카카오 로그인 화면
위의 카카오계정으로 로그인을 누르면 카카오 SDK에서 로그인 창을 띄워준다. 카카오 아이디와 카카오 비밀번호를 넣고 로그인 버튼을 누르면 먼저 요청이 카카오 서버로 간다. 카카오 서버에서 나의 클라이언트 init 함수에 기입해준 javascript 키와 카카오 서비스 서버에 등록된 javascript 키등 여러가지 인증 정보를 비교한다. 성공적으로 인증이 완료되면 내가 작성해둔 리다이렉트 주소로 엑세스 토큰을 응답해준다. 지금은 서버에 리다이렉트 컨트롤러를 만들지 않았기 때문에 오류가 날 것이다. 아래에서 리다이렉트를 처리해줄 컨트롤러를 만든다.
카카오 리다이렉트 컨트롤러 주의점
카카오 리다이렉트 컨트롤러는 아래와 같다. 단순하다. @RequestMapping으로 리다이렉트 받을 주소를 Get 방식으로 적어준다. 그리고 중요한것이 있는데 바로 @RequestParam String code 이다. 카카오에서 리다이렉트 URL/?code = 엑세스코드 형식으로 응답해 주기 때문에 파라미터를 code로 반드시 적어줘야 한다. 만약에 @RequestParam String mycode 이런 식으로 적어주면 아래와 같은 오류가 발생한다. 아니면 다른 어노테이션이나 Map으로 받아 처리해도 된다. code라는 이름의 key가 응답되다는것만 알고있자.
아래와 같이 적어주면 카카오에서 리다이렉트 해준 응답 값을 받아서 세션에 넣고, 메인화면으로 다시 리다이렉트 할 수 있다.
//카카오 로그인 리다이렉트
@RequestMapping(value = "/oauth", method = RequestMethod.GET)
public String oauth(@RequestParam String code , Model model , HttpServletRequest request) {
//받은 코드
System.out.println("code : " + code);
//코드를 세션에 넣어줌.
HttpSession session = request.getSession();
session.setAttribute("code", code);
return "redirect:/";
}
카카오 로그인 테스트
컨트롤러가 작성되었다면 서버를 재시작해서 조금전 위에서 했던 카카오 로그인을 진행해보자. 로그인 완료되면 아래와 같은 코드(태그)가 발급된 것을 확인 할 수 있다. 카카오계정으로 로그인 버튼은 나중에 코드나 엑세스 토큰을 이용해서 숨겨주거나 따로 처리하는 작업이 반드시 필요하다. 일단은 우리의 초기 목적인 인가 코드 그랜트 방식으로 엑세스 토큰을 요청할 수 있는 코드(태그)를 받는데 성공했다.
정리
이번 포스팅에서는 인가 코드 그랜트 유형 방식으로 카카오 OAuth 2 로그인 인증을 진행해 보았다. 카카오 개발자 사이트에 앱을 등록하고, 나의 클라이언트에서 카카오 코드(태그)를 요청해서 나의 서버로 응답받는 작업까지 완료했다. 다음 포스팅에서는 이 코드(태그)를 가지고 엑세스 토큰을 요청하고, 이 엑세스 토큰으로 나의 카카오 정보를 얻는 작업을 진행해 볼 예정이다.
'웹개발 > 보안' 카테고리의 다른 글
| JWT - JSON Web Token 이란 - 개념 (0) | 2021.03.05 |
|---|---|
| 카카오 로그인 OAuth2.0 - 사용자 정보 조회 (0) | 2020.12.08 |
| OAuth2 인증 - 인가 코드 그랜트 (0) | 2020.12.05 |
| OAuth2 인증 - 암시적 코드 그랜트 (0) | 2020.12.05 |
| 스프링 Session 쇼핑몰 방금 본 상품&권한체크 (0) | 2020.12.05 |
