vue.js 에서 axios를 이용하여 백단에게 데이터를 넘겨주었다면 백엔드에서는 해당 값들을 이용하여 카카오톡 서버와 통신하여 값을 주고받는 일을 한다. [컨트롤러] package com.example.demo.kakaologin; import java.util.HashMap; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.CrossOrigin; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.PathVariable..

지난 4편까지는 로그인하는 회원의 정보를 얻어오는 카카오톡 api 작업을 마무리했다. 이제는 프로젝트 서버의 데이터베이스에 저장하고 비교해 회원가입을 진행시켜 클라이언트가 서비스를 이용할 수 있도록 해주는 작업을 진행해야 한다. 카카오로 로그인 하기를 누르면 카카오에서 받아온 이메일과 닉네임이 자동으로 들어가는 것을 볼 수 있다. 왜냐하면 vue 에서 토큰을 받는 메서드를 통해 data에 저장시켜 주었기 때문이다. getToken() { //토큰 냅다 받아~~ const self = this; self.$axios.get('http://localhost:8181/kakaologin/' + self.code) .then((res) => { console.log(res) self.form.email = re..

3탄에서 응답으로 아래와 같은 토큰 값을 받았다. 이번에는 이 토큰을 이용해서 로그인 한 사용자의 정보를 가져오는 것을 진행해 보려고 한다. 2탄에서 언급한 vue 의 getToken() 메서드를 통해 진행되는 것이며 여러 번 나눠서 포스팅했지만 사실은 이게 모두 한 개의 요청으로 이루어진다는 사실... 아직 이 메서드 진행이 끝나지 않았다... 백앤드에서 받은 @GetMapping("/kakaologin/{code}") 중 '토큰을 요청하여 얻음' 까지 진행이 완료되었고 얻은 토큰으로 사용자 정보를 요청하려고 한다. // 코드를 빼와서 access token 을 얻어다 줄 것임 @GetMapping("/kakaologin/{code}") public HashMap kakaoLogin(@PathVaria..

[동의 항목 설정] 카카오톡 로그인 서비스를 ON으로 돌리면 흔히 보는 동의 설정이 가능한 목록들이 나온다. 여기서 필요한 정보만 상태를 설정해서 가져오면 된다. 근데 우선 나는 TEST 버전이라 설정할 수 있는 내용이 딱히 많지 않았다. 그중 필요한 정보만 동의받는 걸로 설정을 해주었다. 선택한 동의 항목들이 이렇게 로그인 후 해당 웹사이트에 가입 할 때 나타난다. [인가 코드 받기] 이제 기본적인 설정은 끝이 났다! 본격적인 코드를 짜보러 가보자! 첫 번째로 인가코드 받기이다. 일단 인가코드 받는 건 너무너무 쉽다. 카카오톡 디벨로퍼스 -> 문서 -> 카카오 로그인 -> REST API에 들어가서 오른쪽 리스트 중 인가코드 받기 하기와 같은 페이지를 만날 수 있다. 여기서 필요한 건 카카오에서 친절하..