소셜 로그인을 구현해보자!😂
2차 프로젝트에서 소셜로그인을 구현하게 되었는데 솔직히 로그인 회원가입이 UI가 화려하지않고
무언가 난이도가 쉽다고만 생각했는데 실제로 코드를 짜면서 겸손해야겠다고 생각했다....
왜 겸손해야 했는지 무엇이 부족했고 아쉬운점은 무었인지 작성해 보겠다.
공식 홈페이지를 이용하자!
많은 소셜 로그인 플랫폼 중에 가장 설명이 잘되어 있는 카카오를 선택하였다.
https://developers.kakao.com/ 카카오 로그인을 사용하려면 10번이상은 정독해야하는 사이트!
우선 백엔드 정연님과 공식홈페이지를 각자 읽어보고 구글에 검색도 하여 각자 정보를 수집한 후
이야기를 통해 어떤 방식으로 데이터가 오고 가는지 파악하였다. 🤜 🤛
로그인 flow 파악하기!
우리가 파악한 전체적인 flow는 다음과 같았다.
- 프론트에서 먼저 카카오 api를 사용하고 UI를 띄워 유저에게 동의을 구하고 로그인을 진행시킨다.
- 로그인이 되면 카카오는 token을 프론트에게 준다.
- 프론트는 그 token을 백엔드에게 Post! headers에 보내주는거 기억하자!
( Authorization: auth.access_token) - 백엔드는 받은 토큰을 다시한번 카카오 api로 보내주고 토큰의 유효성 검사를 한다.
- 유효한 토큰이라면 백엔드에게 유저의 정보를 보내준다.
- 백엔드는 유저의 정보와 자체 생성한 토큰(우리 사이트에서 사용하는 토큰)을 넘겨준다.
이 flow를 알고 일단 진행해 보았는데 생각보다 금방 연결이 되어서 띠용? 하였던거 같다.
Your House Today의 신규회원 로그인
위에 flow와 전체적으로 비슷하지만 신규회원이라면 조금 다르다.
바로 유저의 닉네임을 변경할 수 있는 기회를 주는것!! 👻
-
신규회원이라면 약관동의 항목이후 바로 닉네임을 변경할 수 있는 페이지로 이동시킨다.
-
사용자가 입력하는 동시에 실시간으로 유효성검사를 진행하고 onBlur 이벤트를 통해 마우스가 바깥으로 클릭이 되면 바로 백엔드와 통신하여 중복검사까지 진행한다.
-
중복이라면 추천 닉네임 상자를 띄워서 사용자 닉네임 뒤에 숫자를 붙혀준다!
(만약 백엔드는 DB에서 중복된 닉네임 갯수를 파악하고 예를 들어 johnkim이라면 johnkim1 이런식으로 숫자를 뒤에 붙혀 닉네임을 권유한다. johnkim이 DB에 20개라면 johnkim21 이 되겠쥬?)
4.닉네임이 수정되거나 수정되지 않아도 그대로 그 닉네임 정보를 백엔드에 다시보내준다.
5.백엔드는 다시 유저의 수정된 유저의 정보에 토큰을 포함하여 보내준다!
키워드가 되었던 코드들!
window.Kakao.init(REACT_APP_JS_KEY);
사실 init만 제대로 되면 카카오 토큰 받는것은 일도 아니다.
공식홈페이지에서 발급받은 js key를 넣어주면 끝!
<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>이거 index.html에 꼭 스크립트 해야함!!!
const loginWithKakao = () => {
setIsLogin(false);
window.Kakao.Auth.login({
success: auth => {
fetch(`${GET_SIGNIN_API}`, {
method: 'post',
headers: {
Authorization: auth.access_token,
},
})
.then(res => res.json())
.then(res => {
if (res.self_token) {
localStorage.setItem('user-info', JSON.stringify(res));
localStorage.setItem('access_token', res.self_token);
setGetInfo(JSON.parse(localStorage.getItem('user-info')));
setGetToken(localStorage.getItem('access_token'));
} else {
localStorage.setItem('user-info', JSON.stringify(res));
history.push('/editusername');
}
});
},
fail: err => {
console.error(err);
},
});
};
여기서 중요한건 바로 window.Kakao.Auth.login 이 메소드이다.
Success가 뜨면 auth를 console.log로 찍어볼 수 있는데
토큰에만 종류가 두가지고 다를 다양한 데이터를 넘겨 주는것을 볼 수 있다.
토큰을 로그인을 할 때마다 변경되었다. (이로써 카카오 토큰을 DB에 넣는것은 무의미하다는것을 알 수 있었다.)
겸손합시다...(2차 프로젝트 1주 후기)
class형 컴포넌트에 길들여 저있던 나는 세상 모든 사이트가 만만해 보였고..( 원래 조금만 아는 사람이 제일 무서운 법) 레이아웃 작성 속도가 조금씩 올라와 자신감이 최고조에 도달한 순간..
1. 스타일 컴포넌트 사용 2. 함수형 컴포넌트 사용 이라는 벽이 눈앞에 있었다.
솔직히 4일이면 다 끝냇수 있을 것이라 생각했는데 위 두가지 모두 이번 프로젝트 시작하며 처음 사용하며 멘붕의 연속이였다.
스타일 컴포넌트?
Scss에도 많이 적응이 되어 있던 터라 스타일 컴포넌트에 딥스를 쭉쭉 파며 nesting하는 나를 발견했다.... 멘토님께서 그럴꺼면 다시 scss쓰라고 하심.. ㅋㅋㅋㅋ
하지만 사용하다 보니 스타일 컴포넌트에 직접 자바스크립트로 조건을 주며 실행시키닌 너무나 편한것... 확실히 사용하는 이유가 있는것 같았다.
함수형 컴포넌트
이것도 처음에 라이프사이클이 기존 class형 컴포넌트와 사뭇 다른 느낌이 들고 useEffect에 적응이 안되서 함참 헤메었다.
공식문서를 읽는 습관이 안되어 있었는데 이번 프로젝트는 카카오도 그렇고 리액트 공식문서에 의존하는 한주였다...
