느린 개발자

Nuxt + express로 카카오로그인 자료가 많이 없어 개발하면서 내용 정리한다.

※ 추후에 다시 설명하지만 현재 설명하는 방식은 Nuxt에서 전부 처리하고 서버로 필요한 정보를 보내는 방식이다.

1. 인가코드를 받기

2. Nuxt에서 인가코드로 엑세스토큰 받기

3. 엑세스 토큰으로 유저정보 조회하기

4. 조회된 유저정보에서 필요한 정보 (ex 닉네임,이메일,id... 등) 서버로 보내어 저장하기

 

---

 

 

카카오 로그인 OAuth 신청

• 카카오 개발자 계정과 애플리케이션 등록이 필요하다.
• https://developers.kakao.com 에 접속하여 계정과 애플리케이션을 생성해보자.

Kakao Developers

 

카카오 로그인을하고  내 애플리케이션 추가하기를 진행하자.

 

 

도메인을 등록한다.

도메인은 여러개 등록가능하고, 카카오 계정정보를 받을 콜백 받을 도메인이기 때문에 필히 작성하자. 

 

 

도메인이 아직 없고, 로컬로 작업하기때문에 Nuxt 포트로 맞춰서 적어주자. 

 

카카오 로그인을 활성화, Redirect URI 작성하자.

• Redirect URI 인가코드와 토큰을 받을 페이지 URI 이다.
• Nuxt에서 URI와 맞게 페이지를 만들어주면 된다.

 

 

 

카카오 정보 동의 항목 설정하자.

• 필요한 정보를 설정하면 된다.

 

 

프로젝트에 앱키를 설정하자.

반응형

 

 

 

초기에 얘기했듯이 Nuxt에서 인가코드로 엑세스토큰과 유저정보를 조회한다.

이런 방식이 보안상 이슈가 생길수도 있지만(..?)  어차피 다른방식은 인가코드를 서버에 넘겨주고 서버에서 똑같이

엑세스토큰과 유저정보를 받아오면 된다. 

 

다음포스팅에서 카카오 인가코드 받고 정보 호출하는 방법을 소개하겠다.