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..

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

파이널 프로젝트에 들어가면서 제일 해보고 싶었던 게 연동 로그인 구현이었다. 카카오 공화국 답게 요즘 카카오톡 연동 서비스 없는 웹사이트 어디에도 없다고요ㅠ 유행에 뒤처지고 싶지 않은 나, 일단 구현하는 것에 도전해 보기로 한다. Java를 사용하여 REST API로 개발하고 백엔드에서는 Spring Boot와 JPA를 사용했으며, 프론트엔드에서는 Vue.js를 사용하였다. 카카오톡 api를 구현할 때 제일 어려웠던 부분이 다른 분들이 사용한 언어와 방식이 모두 달라서 정작 나에게 맞는 방식을 찾을 수가 없다는 것이었다. 유튜브도 없고, 진짜 머리 좀 엄청 싸맸는데 혹시 나와 같은 개발도구를 사용하는 분들이 보고 꼭꼭 도움이 되었으면 좋겠꾸여? 일단 각각의 큰 틀부터 말하자면 로그인 카카오 디벨로퍼스 가..