[AWS/Docker] 실전 클라우드 서버 구축 올인원 패키지 Online / 패스트캠퍼스 챌린지 12일차

Ch 06. AWS Server

• 07. 카카오 로그인 - 1
• 08. 카카오 로그인 - 2
• 09. 카카오 로그인 - 3
• 10. 카카오 로그인 - 4

KakaoDevelopers

https://developers.kakao.com/

 

내 애플리케이션 버튼을 클릭한다.

 

애플리케이션 추가

앱 이름과 사업자명은 테스트용이므로 임의값을 적어준다.

키가 발급되었다. JavaScript 키 를 이용하여 카카오 로그인 서비스를 진행해볼 것이다.

 

카카오 로그인 

로그인 API 설정

좌측의 카카오 로그인 항목을 클릭하고 로그인 API를 활용하기 위해서는 활성화 ON이 되어야 한다.

ON으로 변경해주자.

플랫폼 등록

접속할 도메인정보를 등록한다. 등록하지 않으면 login.jsp에 선언된 kakao script를 호출하지 못하고 에러가 발생한다.

 

동의항목 수정

좌측의 동의항목 버튼을 클릭한다. 항목들은 모두 비활성화 되어있고 하나하나 설정이 필요하다. 

개인 정보는 민감한 정보이기 때문에 검수가 필요한 항목이 존재한다.

닉네임과 카카오계정(이메일) 두 항목 설정해보도록 하자.

강의 영상과 화면 구성이 달라져서 잘 확인하고 설정 해야 한다.

닉네임 설정

동의 단계를 선택하고 동의 목적을 입력한다. 테스트 환경이기 때문에 필수 동의로 선택했다.

카카오 계정(이메일) 설정

민감한 정보이기 때문에 필수 동의는 검수가 필요하다.

 

카카오 로그인

Kakao.init('본인의 JavaScript App key');
    // 카카오 로그인 버튼을 생성합니다.
    Kakao.Auth.createLoginButton({
      container: '#kakao-login-btn',
      success: function(authObj) {
      	// 성공적으로 로그인이 되면 토큰 정보를 response로 받는다.
        alert(JSON.stringify(authObj));
        
      },
      fail: function(err) {
         alert(JSON.stringify(err));
      }
    });

실제 토큰 정보의 response 값이다.

{
  "access_token":"Access Token value",
  "token_type":"bearer",
  "refresh_token":"Refresh Token value",
  "expires_in":7199,
  "scope":"profile_nickname",
  "refresh_token_expires_in":5183999
}

 

카카오 사용정보 요청

강의 영상에서는 url :'v1/user/me' 였지만 현재 v1은 deprecated되었고 v2로 변경 해줘야한다.

response key값도 변경되었으니 잘 확인하여 값을 처리하도록 하자.

Kakao.API.request({
  url:'/v2/user/me',
  success:function (res){
  	console.log(res)
  },
  fail:function (error){

  }
});

 

서버로 로그인 API 요청

URL이 kakaoLogin인 API로 요청한다.

$.post("/kakaoLogin", {
  id:id, 
  email : email, 
  nickname : nickname
  }
  , function (data){                        
      if(data == 1){                        
          alert("로그인이 완료 되었습니다.");          
      }                                     
     }                                         
});

POST | localhost:7000/kakaoLogin을 요청하면 UserController의 kakaoLogin Method가 호출된다.

파라미터로 UserVO로 받았는데 보통 MVC모델에서 주로 사용한다. API 요청시 Parameter들이 UserVO에 선언된

Property에 매핑된다.

usernamePasswordAuthenticationToken에서 로그인 인증을 시도하고 성공하면 세션에 해당 user을 추가한다.

@PostMapping("/kakaoLogin")
@ResponseBody
public int kakaoLogin(UserVO user) {
	ServletRequestAttributes attr = (ServletRequestAttributes) RequestContextHolder.currentRequestAttributes();
    	HttpServletRequest request = attr.getRequest();
    	HttpServletResponse response = attr.getResponse();
    	
	System.out.println("TEST");
	System.out.println(user.getEmail());
	System.out.println(user.getId());
	System.out.println(user.getNickname());
		
	UsernamePasswordAuthenticationToken userAuthenication = new UsernamePasswordAuthenticationToken(user.getId(), "pass");
		
	userAuthenication.setDetails(user);
	userService.updateUserJoin(user);
		
	SecurityContextHolder.getContext().setAuthentication(userAuthenication);
	HttpSession session= request.getSession(false);
	session.setAttribute("user", user);
	return 1;
  }

 

 

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

-> https://bit.ly/37BpXiC