21.06.09 TIL BOOT+JPA - 카카오 로그인 : 블로그

김정훈·2021년 6월 9일
1
post-thumbnail

📌 BOOT+JPA 블로그(기능 : 카카오 로그인)

📑 카카오 로그인 기본 설정

1. 카카오 개발자 센터 - 내 애플리케이션 - 애플리케이션 추가

  • 이름, 사업자명 입력 후 완료

2. REST API키 복사해놓기

3. 플랫폼 등록

  • 주소는 localhost:8080

4. 카카오 로그인 활성화

5. RedirectURI : 카카오 로그인을 하고 로그인이 정상적으로 되면 응답을 받을 주소
→ 즉, 이 주소로 카카오쪽에서 정보를 전달한다.


ex. localhost:8080/auth/kakao/callback [ 포스팅에선 이 주소로 사용할 예정 ]

6. 동의항목은 프로필 정보 + 이메일
: 프로필 정보는 필수이고, 이메일은 선택사항이다.

7. 카카오 로그인 버튼을 user/loginForm.jsp에 만들어준다. callback/~ : 뒤쪽으로 인증코드가 날라온다. → 이 인증코드를 이용해서 AccessToken을 받는다.


📬 카카오 인증코드 받아서 Access Token 요청하기

8. 로그인 요청 주소( 카카오 개발자 센터 - 문서 - 카카오 로그인 - REST API - 인가코드 받기 - Request부분)
https://kauth.kakao.com/oauth/authorize
?client_id={REST_API_KEY}
&redirect_uri={REDIRECT_URI}
&response_type=code

여기서 REST_API_KEY와 REDIRECT_URI는 위에 있는 정보대로 넣어준다.
그렇다면 REDIRECT_URI는 /auth/kakao/callback 될 것이고,
결과적으로 카카오 로그인을 처리하려면 UserController에 @GetMapping("/auth/kakao/callback")을 만들어줘야 한다.
자! 저기 매개변수로 code 부분에는 바로 우리가 받은 인가코드가 들어갈 것이다.

9. 토큰 발급 요청 주소
(카카오 개발 센터 - 문서 - 카카오로그인 - REST API - 토큰 받기 - Request부분)
https://kauth.kakao.com/oauth/token (POST방식)

그리고 이제 우리가 HttpBody부분에 실어보내야 하는 것들을 살펴보자.

Content-Type : application/x-www-form-urlencoded;charset=utf-8 (key=value 형태로 보내라)
grant_type=authorization_code
client_id=948dfcab19b378a4b34564c781522a30 //REST API키
redirect_uri=http://localhost:8080/auth/kakao/callback //로그인 콜백 주소
code={동적이다}

이렇게 받은 토큰을 이용해서 우리는 사용자의 정보를 가져와야 한다.
💢 이해하기 쉽도록, 한 군데에 다 넣어서 처리했는데, 이런 부분은 가급적이면 분리를 조금 시켜주는 것이 가독성이 좋다.


🌠 토큰을 이용해서 사용자 정보를 가져오자.


1. 주황색 박스 : oauthToken.getAccess_token
: 우리가 앞서 얻은 카카오가 준 Access Token이다.
2. 💣💣💣 빨간색 박스 : 오른쪽 그림의 application.yml부분은 실제 서비스를 하는 상황이라면 저 값을 절대 노출되면 안된다. → 저 값이 노출된다면 계정만 알아도 다 로그인을 할 수 있게 된다.
⇒ 비밀번호인데 고정값? 고정값이여도 상관없는 이유가 카카오 로그인이기 때문이다.

3. 그리고 기존에 카카오로 회원가입이 되어있는 유저라면 ⇒ if문을 타고 join함수를 실행한 다음에
로그인 처리가 될 것이고, 기존 가입자인 경우 그대로 로그인을 진행하게 한다.

💢. 이 노란색 박스 부분이 조금 문제인데
이렇게 세션을 사용하는 방법은 좀 복잡해서 이런 방식으로 안 쓰고 @AuthenticationPrincipal 어노테이션을 이용해서 처리하는데, 이 부분은 다음주? 정도까지 해서 처리해서 다시 올릴 예정이다.

➽ 어쩌다보니 카카오 로그인 기능을 먼저 포스팅하게 되었는데, 이번 주 안으로 블로그 기능을 모두 마무리 짓고, KIM★GRAM의 팔로우 기능, 좋아요 기능등 넘어갈 예정이다. 다음 포스팅은 게시글 작성, 상세보기, 목록 → 회원정보 수정(여기서는 카카오로 회원가입한 유저는 변경이 안 되게 막을 것이다.) → 페이징, 댓글 이렇게 하면 아마 블로그 만들기는 마무리가 될 것 같다.

profile
WebDeveloper

0개의 댓글