카카오톡 로그인 메서드 구현 kakaoLogin() { const redirect_uri = 'http://localhost:8182/kakaojoin'; const clientId = '자신의 키'; const Auth_url = `https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${clientId}&redirect_uri=${redirect_uri}`; window.location.href = Auth_url; } created 함수 적용 카카오디벨로퍼스에 미리 정해 놓은 클라이언트 측 redirect_uri 페이지를 component로 작성한다. 그 뒤 해당 페이지가 로딩되자마자 인자로 받았던 인가코드를 빼내어 카카오톡에게 ..

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

[토큰 요청] 2탄에서 토큰을 요청하기 위해 컨트롤러를 사용했다. 그러면 컨트롤러로 @Autowired 된 service 부분을 살펴보자 @Autowired private LoginService loginService; // 토큰을 요청하여 얻음 String kakaoToken = loginService.requestToken(code); System.out.println("카카오토큰" + kakaoToken); 주석을 달아 놓았지만 조금 더 자세하게 설명해 보자면 2탄 마지막쯤에 언급했던 본문의 필수 내용들을 모두 가지고 요청을 해야 한다. 파라미터를 세팅 해주어야 한다. 문자 입력 스트림에서 텍스트를 읽고 문자, 배열, 행(lines)을 효율적으로 읽을 수 있게 문자를 버퍼링 해주는 BufferedW..

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