React에서 카카오 API 소셜 로그인✅

React에서 카카오 API를 활용한 소셜 로그인 구현

카카오로 회원가입/로그인 적용하기🙏🏼

도움받은 블로그

1차 프로젝트에서 기존의 회원가입/로그인 기능은 적용해본 터라, 2차 프로젝트에는 소셜로그인 만 가능한 사이트를 만들어 보기로 하였다.(카카오와 구글 소셜 로그인을 다 구현하려 했으나, 구글은 이제 http://localhost:3000 은 지원하지 않아서 적용해보지 못했다는 슬픈이야기.. 나중에 AWS로 배포하면 다시 구현해보기로 했다!)

1. 카카오 개발자 사이트 에서 js key를 발급 받는다.🔑

https://developers.kakao.com 에서 가입 후 나만의 애플리케이션을 만들고 고유한 js key를 발급 받는다.

2. 플랫폼 등록 및 동의항목 설정🌐

• 카카오 로그인 기능을 사용할 플랫폼을 등록한다! 기존에 배포된 사이트라면 사이트 주소를 정확히 입력하면 되고, 우리의 경우 로컬 호스트에서 사용할 것이므로 http://localhost:3000을 등록했다.
• 혹시 서버를 여러개 띄울지도 모르니, http://localhost:3001, http://localhost:3002를 추가로 등록 해 놓았다.
• 제품설정-카카오로그인-동의항목으로 이동해 받고자 하는 정보를 (필수동의 or 선택동의) 선택해서 저장한다.

3. kakao react package 설치🙌🏼

• 리액트에서 간편히 사용하기 위해 패키지를 설치한다.
• 터미널에서 npm install react-kakao-login 명령어를 입력하면 설치 완료!
• login.js 파일 상단에 import KaKaoLogin from 'react-kakao-login import 해준다.

4. React에 적용하기💦

• 카카오 로그인 버튼이 필요한 자리에 아래와 같이 적용해 준다.

  <KaKaoBtn
    //styled component 통해 style을 입혀 줄 예정 
                jsKey={'dkflksdflsjdflskjdflskjf(가칭)'}
    //카카오에서 할당받은 jsKey를 입력
                buttonText='카카오 계정으로 로그인'
    //로그인 버튼의 text를 입력
                onSuccess={this.responseKaKao}
    //성공했을때 불러올 함수로서 fetch해서 localStorage에 저장할 함수를 여기로 저장 
                getProfile={true}
              />

5. fetch 해서 localStorage에 저장하고 token 정보 backend에 넘겨주기 💨

  responseKaKao = (res) => {
    const { data } = this.state;

    this.setState({
      data: res,
    });

    fetch(`${API_URL_LOGIN}/user/signin/kakao`, {
      //백엔드에서 원하는 형태의 endpoint로 입력해서 fetch한다. 
      method: 'GET',
      headers: {
        Authorization: res.response.access_token,
        //받아오는 response객체의 access_token을 통해 유저 정보를 authorize한다. 
       
      },
    })
      .then((res) => res.json())
      .then((res) => localStorage.setItem('token', res.token), 
            //백엔드에서 요구하는 key 값(token)으로 저장해서 localStorage에 저장한다.
            //여기서 중요한것은 처음에 console.log(res)해서 들어오는 
            //access_token 값을 백엔드에 전달해줘서 백엔드에 저장 해두는 
            //절차가 있으므로 까먹지 말 것! 
            alert('로그인 성공하였습니다'));
  };

6. Styled Component사용해서 style 주기👑

• 원하는 사이즈 별로 적용해서 입력하면 완료!

const KaKaoBtn = styled(KaKaoLogin)`
  padding: 0;
  width: 300px;
  height: 45px;
  line-height: 44px;
  color: #783c00;
  background-color: #ffeb00;
  border: 1px solid transparent;
  border-radius: 3px;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  &:hover {
    box-shadow: 0 0px 15px 0 rgba(0, 0, 0, 0.2);
  }
`;