[개발 진행] 로그인 기능_미완성(with KAKAOAPI)

현재까지 개발을 진행한 사항과 그 과정에서 발생한 문제를 기록해보고자 한다.

우선 로그인 기능은 카카오API를 이용하기로 했다. 문서화가 정말 잘되어 있어서 보기가 편했다.

 

카카오 api 로그인 기능을 구현하기위해서는 두가지 방법이 있었는데,

1. javascript SDK를 사용하는 방법

2. REST API를 사용하는 방법 

이다.

 

서버개발 당담 팀원분이 REST API 구조로 통신하자고 하셔서, 미리 공부도할 겸 REST API로 구현을 하기로 했다.

https://developers.kakao.com/docs/latest/ko/kakaologin/common

Kakao Developers

 

REST API는 3단계로 진행인 된다. 

(우선 내 애플리케이션에 앱을 등록해서 키를 발급 받아야 한다.)

 

1. 인증 코드를 요청하고, 인증코드를 받는다.

2. 인증코드를 이용해  토큰을 요청하여 토큰을 받는다.

3. 토큰을 이용하여 사용자의 정보를 받아온다.

 

이런 단계이다.

 

 

 

1. 인증 코드를 요청하고, 인증코드를 받는다.

인증 코드 요청 방법

 

response로 code가 전달된다.

2. 인증코드를 이용해  토큰을 요청하여 토큰을 받는다.

필요한 파라미터에 맞게 post 요청을 해야한다.

 

요청한 토큰과 토큰정보를 response 해준다.

3. 토큰을 이용하여 사용자의 정보를 받아온다.

  위의 2단계를 통해 받아온 토큰값을 이용하여, 아래의 문서 대로 사용자의 정보를 요청 할 수 있다.

https://developers.kakao.com/docs/latest/ko/user-mgmt/rest-api

Kakao Developers

 

 

 

내가 구현할때 만난 문제점은 토큰을 가져와서 사용자의 정보를 받아올 때,

CORS,preflight 이슈가 발생하여 사용자의 정보를 받아오지 못하는 현상이 발생했다.

이를 해결 하기위해서 3일동안 정말 많이 찾아봤는데 결국 해결하지 못하였다ㅜㅜ.

윈도우에서는 문제가 나타나지 않았고, 크롬은 보안을 모두내리면 정상작동을 한다. 하지만 보안을 모두 내린다는건 현실적으로 불가능하기에(나중을 위해서라도,,,) 해결해보도록 노력했지만 잘 안되서 속상하다.

 

** [cors 란]

https://developer.mozilla.org/ko/docs/Web/HTTP/CORS

교차 출처 리소스 공유 (CORS)

 

 

 

[실행 화면]

 

url로 요청해 코드를 받아오고 받아온 코드를 이용해 토큰을 가져오는 로직이 실행된다.

토큰을 가져오는 단계는 정상으로 동작하였으나 토큰을 이용해 사용자 정보를 가져오는 로직에서 'Access-Control-Allow-Origin'이슈가 발생.

<오류 내용>

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.  가 발생.

 

<해결 방안 모색>

오류를 알아보니까 호출시 헤더파일에 access-control-allow-origin 속성을 추가하면 해결 된다고 하여진행해봤는데도 계속 오류가 났다.

- access-control-allow-origin : * 을 추가 ->but, 해결 되지 않음.

 

 

 

 

<윈도우와 크롬 보안을 내렸을 때>

- 윈도우

정상적으로 받아옴.

 

- 크롬

 

이런 오류가 계속 나고있어서 해결해 보려고 하다가 

시간을 맞춰야 하기 때문에 아마 javascript SDK로 만들어보고 정상적으로 작동하면 그걸로 갈것같다.

해당 오류를 많이 알아봤는데도 이해하기가 어려운부분이 있어서 누군가에게 물어보고싶은 마음이 좀 들었다.

얼른 로그인을 완성하고 날씨 데이터를 받아오는것까지 해야겠다.

 

코드는 깃헙에 올렸다. 주소는 나중에 추가하는 걸로...