[vue.js / spring boot] 카카오 로그인 api 해보기 (1)

* 공부 과정이기 때문에 정확한 답, 코드가 아님을 사전에 알려드립니다! 

 

 

먼저 카카오 로그인 api 구현할 순서!!!!!!

1. 프론트(vue) 에서 백엔드(spring boot) 한테 카카오로그인 할수있는 URI 가 뭔지 물어본다
2. 로그인 진행
3. 카카오 서버에서 백엔드한테 code를 알려준다 (kakao callback)
4. 백엔드는 code를 바탕으로 token을 요청한다
5. 백엔드는 발급받은 token을 바탕으로 정보를 요청한다
6. 백엔드는 프론테한테 로그인 정보를 알려준다

 

SnsLogin.vue

  methods : {
  
    kakaoLoginBtn(){
      axios.get('/api/login')
            .then((response) => {
              console.log(response.data)
              console.warn("warn : " + response);
              window.location.href = response.data;
            })
    },
    
  },

window.location.href로 받은 url로 페이지 이동 시켜줬다

 

 

HomeController

 

@Controller
public class HomeController {

	@RequestMapping(value = "/login", method = {RequestMethod.GET})
	@ResponseBody
	public String main() {
		String url = "https://kauth.kakao.com/oauth/authorize?client_id=25abd73010194d66da5351385689ddc4&redirect_uri=http://localhost:8080/login/kakao&response_type=code";
		System.out.println("login 컨트롤러 접근");
		return url;
	}
	
}

이때 url은

카카오 개발자 페이지에서 (https://developers.kakao.com/) 가져온 url이다

 

${REST_API_KEY} 

 

 

${REDIRECT_URI}

 

 

각자 키와 URI에 맞게 넣어주면 된다 !

 

 

 

그럼 카카오로그인 버튼 누르면

위와 같이 잘 뜬다

 

 

 

이제 카카오 콜백으로 코드를 받아와 주면 된다.  

아래는 코드가 잘 받아지는지 확인하는 소스

@Controller
public class HomeController {

	@RequestMapping(value = "/login", method = {RequestMethod.GET})
	@ResponseBody
	public String main() {
		String url = "https://kauth.kakao.com/oauth/authorize?client_id=25abd73010194d66da5351385689ddc4&redirect_uri=http://localhost:8080/login/kakao&response_type=code";
		System.out.println("login 컨트롤러 접근");
		return url;
	}
	
	/*
	 * kakao callback
	 * 
	 */
	
	@RequestMapping(value="/login/kakao")
	public void kakaoCallback(@RequestParam String code) {
		System.out.println("kakao callback 컨트롤러 접근");
		System.out.println(code);
	}
	
	
	
}

 

 

 

code가 잘 찍혀서 나온다 !!!!!