리액트 카카오 로그인

카카오 홈페이지에서 앱 등록, 플랫폼 등록, web인경우 도메인 등록

카카오 로그인 모듈 설치

npm i —save react-kakao-login

스타일 컴포넌트 설치 - 나중에 자세히 알아보자

npm i —save styled-components

로그인 컴포넌트 만들고

카카오톡 로그인버튼 렌더링

성공,실패 함수 구현

성공하면 access token을 리턴받음.

이 access token은 클라이언트에 저장하는 정보가 아니다.

일단 필요한건 식별자 뿐이니 json-server에 저장하고 페이지는 넘겨보자

npm i —save -g json-server

임시 디비로쓸 디렉토리를 만듬

mkdir fake-server

디비 파일을 만들자, 아래 포멧처럼 만들면됨

{
  "users": [
    {
      "id": 1,
      "user_id": "jebi10mari@naver.com"
    },
    {
      "user_id": "pocketmarket.official@gmail.com",
      "id": 2
    }
  ]
}

일단 현재 파악된건 기본적인 rest api가 자동으로 제공이 된다는 것이다.

쿼리 스트링으로 필터도 가능하고 post로 insert도 가능하다.

그리고 id는 자동으로 시퀀스되어 post시 넣을 필요도 없고 엔드포인트로서도 사용 가능하다.

json-server실행

json-server --watch users.json --port 3001

이제 리액트에서 axios설치하고 테스트한번 해보자

비동기 함수때문에 애좀 먹었다. 어쨋든 로그인 유저가 없으면 추가하는 로직을 추가하였다.

이제 리액트 라우터에 대해 자세히 알아보자

import React, {useState} from 'react';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faComments } from '@fortawesome/free-solid-svg-icons';
import fontawesome from '@fortawesome/fontawesome';
import KaKaoLogin from 'react-kakao-login';
import styled from 'styled-components';

fontawesome.library.add(faComments);

function Login() {
    const [data, setData] = useState('');

    const responseKaKao = (res) => {
        setData(res);
        console.log(JSON.stringify(res));
    };

    const responseFail = (err) => {
        alert(err);
    }

    return (
        <div className="login">
            <div className="login__box">
                {/*<div className="kakao__login"><FontAwesomeIcon icon="comments" className="login__icon" />카카오 로그인</div>*/}
                <KaKaoBtn
                    //styled component 통해 style을 입혀 줄 예정
                    jsKey={'????'}
                    //카카오에서 할당받은 jsKey를 입력
                    buttonText='카카오 계정으로 로그인'
                    //로그인 버튼의 text를 입력
                    onSuccess={responseKaKao}
                    onFailure={responseFail}
                    //성공했을때 불러올 함수로서 fetch해서 localStorage에 저장할 함수를 여기로 저장
                    getProfile={true}
                />
                <div className="kakao__signup"><FontAwesomeIcon icon="comments" className="login__icon" />카카오 회원가입</div>
            </div>
        </div>
        );
}

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);
  }
`;

export default Login;