[React] 소셜 로그인 API

네이버

    const { naver } = window;
    const location = useLocation();
    const NAVER_CALLBACK_URL = 'NAVER_CALLBACK_URL 넣어주세요.';
    const NAVER_CLIENT_ID = '클라이언트 ID';

    const initializeNaverLogin = () => {
        const naverLogin = new naver.LoginWithNaverId({
            clientId: NAVER_CLIENT_ID,
            callbackUrl: NAVER_CALLBACK_URL,
            isPopup: false,
            loginButton: { color: 'white', type: 1, height: '47' },
        });
        naverLogin.init();
    };

    const getNaverToken = () => {
        if (!location.hash) return;
        const token = location.hash.split('=')[1].split('&')[0];
        console.log(token);
    };

    useEffect(() => {
        initializeNaverLogin();
        getNaverToken();
    }, []);

 

카카오

npm i react-kakao-login --save

import KaKaoLogin from 'react-kakao-login';

                <KaKaoLogin
                    token={'token ID'}
                    onSuccess={console.log}
                    onFail={console.error}
                    onLogout={console.info}
                    id="kakao"
                />

 

페이스북

npm i react-facebook-login --save

import FacebookLogin from 'react-facebook-login';

                <FacebookLogin
                    appId="app ID"
                    onSuccess={(response) => {
                        console.log('Login Success!');
                        console.log('id: ', response.id);
                    }}
                    onFail={(error) => {
                        console.log('Login Failed!');
                        console.log('status: ', error.status);
                    }}
                    onProfileSuccess={(response) => {
                        console.log('Get Profile Success!');
                        console.log('name: ', response.name);
                    }}
                />

구글

npm i react-google-login --save

import { GoogleLogin } from 'react-google-login';

                <GoogleLogin
                    clientId={'Client ID'}
                    onSuccess={(res) => {
                        console.log(res);
                    }}
                    onFailure={(err) => {
                        console.log(err);
                    }}
                >
                </GoogleLogin>

 

결과 화면

Front 화면

페이스북 버튼 클릭시

카카오 버튼 클릭시