#29 OAuth2.0과 카카오 연동 로그인2 (로그인 서비스 완료)

 

AccessToken을 통해 카카오 회원정보 가져오기

 

이전까지 code를 받는 인증처리 완료와 AccessToken을 받아 권한을 부여받는 과정까지 했다.

이번 시간엔 AccessToken으로 카카오쪽으로 카카오로 로그인한 회원의 개인정보를 요청해보겠다.

 

우선 필요한건 body 데이터니까 return response; 에서 response.getBody()로; 코드를 수정한다.

 

이 정보를 오브젝트에 담아야 한다.

이거랑 똑같이 생긴 오브젝트를 하나 만들어보자 변수명도 정확히 같아야 한다.

 

model 패키지에 OAuthToken 클래스를 생성하고

 

body 데이터를 담을 오브젝트인 OAuthToken을 만들었다.

getter/setter를 생성해줘야하니 @Data 어노테이션을 꼭 작성해야한다. 

이 JSON 데이터를 처리하기 힘드니까 이 JSON 데이터를 오브젝트에 담으면 된다.

 

 

JSON 데이터를 담을 때 사용하는 라이브러리인 ObjectMapper를 사용해서 코드를 작성한다.

 

UserController.java

UserController.java

try/catch문을 작성해야 하는 코드는 꼭 작성해주자

 

UserController.java

쉽게 말해서 json 데이터를 java object로 변경해 자바에서 처리하기 위해서

objectMapper 라이브러리를 사용한 것이다.

그런데 이렇게 코드를 작성하면 외부에서 oauthToken을 사용할 수 없으니 try문 밖에 빼내준다.

 

UserController.java

만약 JSON 데이터가 자바 오브젝트로 잘 변환됐다면 해당문구가 이상없이 출력될 것이다.

 

실행결과 :

 

자바 오브젝트로 잘 변환된 것을 확인할 수 있다.

 

UserController.java

스프링을 모르는 사람 입장에선 해당 getAccess_token()이 어디 있었는데? 할 수 있는데

 

OAuthToken.java

getter, setter, 생성자 등을 직접 작성하지 않고 @Data 어노테이션으로

@Getter, @Setter, @RequiredArgsConstructor, @ToString, @EqualsAndHashCode 를 한꺼번에 설정해주었기 때문에

getter를 꺼내 쓸 수 있는 것이다.

 

 

다시 돌아와서, 현재 AccessToken 으로 회원정보를 가져오는 것이 목표이다.카카오 개발자 사이트에 가서 AccessToken로 어떤 정보를 가져올 것인지 확인하자

식별자인 회원번호와 카카오계정 정보들 중에서

프로필(닉네임)과 이름 이메일을 가져올 것이다.

 

왼쪽 메뉴에서 REST API를 눌러, 스크롤을 내려 AccessToken 사용을 확인한다.

GET / POST를 모두 지원한다는 것인데, 여기서는 POST로 하자

 

요청 주소 : https://kapi.kakao.com/v2/user/me

헤더 값 :

Authorization: Bearer ${ACCESS_TOKEN}

Content-type: application/x-www-form-urlencoded;charset=utf-8

 

body 값은 없다. 

 

이제 AccessToken 토큰을 사용해 회원정보를 요청하는 코드를 작성해보자

앞서 만들었었던 POST 로 AccessToken을 받는 코드랑 방식이 같기 때문에

작성했었던 해당 코드를 복사하고

해당 코드를 복사한다.

여기다가 붙여넣고,

 

body 데이터를 필요없으니 다 삭제하고, rt , headers 등 변수들의 이름을 수정한다. 

아까 카카오 개발자 사이트에서 확인했듯이

AccessToken 사용 요청 헤더 값이

Content-type: application/x-www-form-urlencoded;charset=utf-8 말고도 

Authorization: Bearer ${ACCESS_TOKEN}가 있었으니 해당하는 헤더값을 추가적으로 작성해준다.

 

AccessToken 토큰을 사용해 회원정보가 제대로 가져와지는지 실행해보자

 

실행결과 :

 

BOM으로 인한 오류 발생

 

??

코드 제대로 작성한게 맞나 계속 확인하고 링크도 확인했는데 아무 이상이 없었다.

30분동안 오류 때려잡으려고 키보드치다가 오류창을 확인해보니 

링크에 %EF%BB%BF같은 이상한 글자가 낀 것이 보였다.

검색해보니 메모장으로 utf-8 파일을 수정할 때 발생할 수 있는 오류라고 한다.

 

해당 링크를 메모장에 정리해두고 컨트롤러 파일에 붙여넣기 해서 작성했었는데 오류가 발생한 것이다.

 

1. 왜 이런 오류가 발생한 것일까?

2. 다음엔 이런 오류가 나지 않게 하거나 줄일 방법이 있을까?

 

 

왜 이런 오류가 발생한 것일까?

 

유니코드 인코딩의 방식으로 UTF-8, UTF-16 등이 있는데,

이렇게 비슷한 방식을 사용하는 문서는 Byte Order Mark(BOM)로 구별이 된다.

문서 맨 앞에 눈에 보이지 않는 특정 바이트를 넣어 어떤 인코딩 방식이 사용되었는지 알아내는 방법이다.

UTF-8의 BOM은 EE BB BF 이다. 

메모장에서 UTF-8로 저장해 BOM이 추가되었는데 이걸 복사해 가져와서 붙였더니

BOM이 컨트롤러 파일에 가져와져서 오류가 발생했던 것이다.

 

다음엔 이런 오류가 나지 않게 하거나 줄일 방법이 있을까?

 

검색을 해보니 이제는 UTF-8의 경우에 BOM이 필수도 아니고 사용을 권장하지도 않는다고 한다.

현대의 에디터(메모장 포함)은 이제 BOM이 없어도 UTF-8을 인식할 수 있다.

오히려 BOM이 오류를 유발하는 경우가 많고 웹 개발할 때 특히 메모장으로 뭘 잘못 건들면

바로 BOM이 추가되고 이로 인해서 웹에서 오류가 나는 경우가 많다고 한다.

따라서 다음에 이런 오류가 나는 것을 방지하기 위해서

윈도우 메모장을 쓰지 않고 에디트 플러스를 사용하기로 했다.

이게 EditPlus이다.

 

에디트 플러스는 기본 설정이 BOM 제거이기 때문이다.

+ BOM이 아닌, 일반 UTF-8로 설정하면 된다.

 

 

 

다시 돌아와서, BOM을 제거하고 다시 작성했더니

다람쥐 카카오 계정의 닉네임과 프로필사진,

화면엔 안 보이지만 오른쪽 끝에 이메일도 가져왔다.

 

json viewer 확장 프로그램을 사용해서 보면,

이렇게 AccessToken을 통해 회원정보를 성공적으로 가져온 것을 확인할 수 있다.

프로필 사진 링크 ex

http://k.kakaocdn.net/dn/dpk9l1/btqmGhA2lKL/Oz0wDuJn1YV2DIn92f6DVK/img_110x110.jpg

 

 

이제부턴 단순 구현이다.

이 AccessToken를 통해 얻은 정보를 가져와 강제로 회원가입을 시키고 로그인시키면 되기 때문이다.

 

 

학습자료 : https://youtu.be/WACDTFroYNI