카카오 로그인 만들기 백엔드(Springboot+JPA)+프론트엔드(REACT)

첫번째로 카카오 develope 홈페이지에 들어간다.

 

그 이후 프로젝트를 하나 생성해준다.

 

이런식으로 프로젝트 이름을 정하고 추가해준다.

 

이후 플랫폼 에 있는 Web 에 들어가서 사이트 도메인을 설정해준다. 일단은 로컬환경에서 개발하기 때문에 http://localhost:8080 으로 만들어 준다.

이렇게 하면 안나온다. 프론트에서 로그인 인증을 하기 때문에 프론트의 포트 번호를 적어야한다. 그래서 8080이 아니라 3000번으로 고쳐주었다.

 

이후

 

리다렉트 시켜줄 uri 도 3000번에 login 부분이기 때문에 이 경로를 적어준다. 이 경로가 쉽게 말하면 카카오 로그인 버튼이 어디있는지 알려주는것이다.

 

지금 카카오 로그인 버튼이 localhost:3000/login 에 있기 때문에 리다이렉트 uri 가 해당 경로인 것이다.

 

이후

 

프론트에서 

 

<a href="https://kauth.kakao.com/oauth/authorize?client_id=f9b67fc23cc4fdb481acccb84543b587&redirect_uri=http://localhost:3000/login&response_type=code">
          <img src={kakao} alt="kakao icon" />
        </a>

이렇게 api 키와 리다이렉트 uri 를 카카오 develope 에서 설정한 경로로 넣어주면 카카오 로그인 인증이 완료된다.

 

나중에 자동 배포 환경을 만든다면 이는 해당 url로 대체될 예정이다.

 

이제 버튼을 누르면 이렇게 나온다.

이후 카카오 서버에서 준 인증 코드를 프론트에서 받아서 다시 백엔드로 보내는 작업이 필요하다.

그렇기 때문에 카카오 서버에서 프론트로 어떤 코드를 주었는지 확인해야한다.

이를 관리자 모드를 켜서 콘솔창에 

이렇게 윈도우.로케이션.href 를 code 라는 변수에 담아찍어보면 

search 라는 파라미터안에 잘 담겨있는 것을 확인할 수 있다. 이걸 재 가공해서 백엔드에 넘겨주면 된다.

 

여기서 code = 이 뒷부분을 꺼내는 방법은 

 

 

이처럼 searchParams.get('code') 방법을 사용하면 된다.

그러면 아래에 있는 코드를 추출할 수 있고 이를 백엔드에 넘기면 된다.

 

백엔드에 코드를 넘기는 방법은 

 

 

이렇게 OAuth2RedirectHandeler.js 파일을 생성해준뒤 

 

이렇게 코드를 생성해준다. 해당 코드는 redux를 사용하기 때문에

npm install redux 라는 명령어와 npm install react-redux 라는 명령어를 실행하여 환경을 구축해주어야한다.

16번째줄의 스피너는 일단 임시로 4번째 줄에있는 로그인 페이지에 연동시켜둿다.

3번째 줄은 새로운 폴더를 생성하여 백엔드로 넘기는 코드를 빼둔 곳이다.

user.js 의 내용은 이렇다.

이렇게 하면 백엔드에 코드가 구현되어있다면 결과값이 res에 담겨 나오는데 아직 백엔드 구현을 하지 않아서 오류 발생.

 

 

 

카카오 로그인 사진 찾는 방법

---

그리고 다시 메인 페이지로 나가서 오른쪽 상단 메뉴의 도구를 누른다.

 

도구를 누른뒤 가장 아래에 있는 리소스 다운로드를 클릭한다.

 

 

 

 

백엔드 설정(Springboot +JPA)

---

이후 mvn repository 에 들어가서 gson 2.8.5 버전을 pom.xml 에 추가해준다.

 

이렇게 코드를 추가하고 메이븐 업데이트를 해준다.

 

 

기본 프로세스는 이렇다

 

 

 

 

출처 : https://data-jj.tistory.com/53

REST-API 활용한 카카오 소셜 로그인 구현(feat. React)

 

 

이 사진을 보면 어떤식으로 Oauth 가 작동하는지 이해가 가능해진다.

 

 

 

 

 

주의사항