Winnerest 로그인 페이지 구현 (Kakao API 활용)

 

 

 

👆 로그인-회원가입 구현 움짤

 

 

 

 

Pinterest clone Project

Winnerest 

 

 

 

총 5명이서 구성된 Winnerest ( FE : 3, BE : 2 )에서

2주간 오로지 학습용으로 클론을 열심히 구현했는데

그 중 로그인 페이지 / 메인 페이지 / 마이 페이지 구현을 맡은 기록을 적어보려한다

 

그 중 로그인 창 편

 

 

 

 

---

 

 

구현한 기능

 

 

 

 

• 카카오 API를 통한 로그인 기능 구현
• 회원 닉네임, 프로필 사진, 카카오계정(이메일) 를 받아 각각 필요한 유저 정보 페이지에 적용

 

 

---

 

 

 

카카오 로그인 API를 사용하기 위해서는

 

https://developers.kakao.com/ 에 들어가

먼저 내 앱 애플리케이션을 만들어야한다.

 

 

 

 

이때 발급 받은 REST API 나 javaScript 키를 이용해 구현한다.

 

 

 

 

카카오 API 구조는 생각보다 간단하다

 

 

 

 

프론트 엔드가 인가 코드를 카카오 서버에 요청하고 회원가입 절차를 마치면

다시 (프론트/백엔드)로 인가 코드를 전달한다

 

 

인가 코드를 받은 (프론트/백엔드)는 인가 코드를 담아 다시 카카오 서버에 요청해서 토큰을 발급 받고

서버가 이 토큰 유효성을 검증하여 회원가입/로그인 절차를 마친다

 

 

로그인 창을 구현하면서 백엔드 서버가 아닌 프론트 엔드 쪽에서 카카오에게 인가 코드 발급, 토큰 발급 요청을 두 번하는 방식으로 진행하게 되었다.

 

 

처음엔  REST API를 써서 URl에 인가 코드를 받아오는 것까진 성공했으나

그 이후 코드를 기반으로 토큰을 다시 요청하는 일이 까다로웠다

 

그때마다 카카오에서 에러 메세지를 띄워주고 에러가 정리되어있는 페이지를 보여주는데

그곳에도 없는 에러가 자꾸 떠서 당황스러웠다 😂

 

 

백엔드 팀에서도 로그인 관련 로직을 얼른 끝내야 다른 구현에 신경을 쏟을 수 있고

다른 페이지도 빠르게 구현해야하기 때문에 

어쩔 수 없이 js키로 인가코드와 토큰을 한번에 받아오는 로직을 썼다

 

 

일단 첫번째론 index.html 파일에 이 주소를 넣고

 

 

 

 

로직은 따로 컴포넌트로 빼서 관리했다

 

 

 

 

카카오 키는 env 파일에 따로 빼서 git 올라가지 않도록 해주었고

 

한번의 요청으로 카카오 서버에게서부터 토큰을 받아와

그걸 팀의 백엔드 서버로 보내고 다시 토큰을 받아왔다

 

 

 

 

 

---

 

 

느낀점

 

 

 

 

어렵지 않게 보았던 카카오 로그인 API가 적용하려니 생각보다 까다로워서 혼났다

결극 이렇게 해서 통신은 어렵사리 성공했지만

Rest URL을 사용하지 못해 어려모로 아쉬운 작업이었다

 

 

 

 

 

 

 

 

 

👇 구현시 쓴 Img ( 배경, 로그인 버튼)

 

 

로그인 버튼은 카카오 API 공홈에 들어가면 크기별로 다운 받을 수 있다!