Kakao API 발급받기

카카오 개발자 사이트에서 일단 키를 발급받고 설명을 따라가면 javascriptSDK를 이용하여 카카오 로그인을 구현하는데

카카오 로그인 오픈소스도 따로 있어서 이 패키지를 사용하면 더 간단하게 구현이 가능하다.

npm i react-kakao-login

이렇게 패키지를 install 해주면

import KakaoLogin from 'react-kakao-login'

.js 파일 안에서 import해서 쓸 수 있다.

KakaoLogin 객체

import한 KakaoLogin 객체의 Parameter들은 다음과 같다

이미지출처

이중에서 건드릴만한 것들은 이렇다.

• jsKey : 카카오에서 발급받은 API KEY 값
• onSuccess : 로그인 인증 성공 시 실행할 함수
• onFailure : 로그인 인증 실패 시 실행할 함수
• getProfile : true로 해야 사용자 프로필 정보를 가져올 수 있다
• buttonText : 버튼의 텍스트

code

import React, {useState} from 'react'
import KakaoLogin from 'react-kakao-login'
import styled from 'styled-components'
import KAKAO_KEY from '../share/KAKAO_KEY'

const Login = () => {
    const [id, setId] = useState("") 
    const [accessToken, setAccessToken] = useState("")
    const [refreshToken, setRefreshToken] = useState("")
    const [provider, setProvider] = useState('kakao')

    const responseKakao=(res)=>{
        setAccessToken(res.response.access_token)
        const {
            profile: {
                id: id
            },
            response:{
                access_token: accessToken,
                refresh_token: refreshToken
            }
        } = res       

        // 서버에게 token넘겨주기
    }

    const responseFail = (err) => {
        console.log(err)
    }

    return(
        <div>
            <KakaoBtn
                jsKey={KAKAO_KEY}
                onSuccess={responseKakao}
                onFailure={responseFail}
                getProfile="true"
                buttonText="Login with Kakao"
            />
        </div>
    );
}

export default Login;

나는 styled-components를 사용해줬는데 꼭 해야하는 것이 KakaoLogin 객체의 스타일을 가져오는 것이다!!

이렇게👇

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