카카오 로그인 구현하기

이메일 로그인을 구현했으니 이제 카카오 로그인을 구현해보자. 카카오 로그인 구현단계는 다음과 같다.

1. Kakao Developer 사이트 가입 및 앱 생성

• 먼저, Kakao Developer 사이트에 가입: https://developers.kakao.com/
• 로그인 한 후, 내 애플리케이션 페이지에서 새로운 앱을 생성
• 앱을 생성한 후, 앱 설정에서 플랫폼에 웹을 추가하고, 사이트 도메인과 Redirect URI를 설정

2. 카카오 로그인 버튼 생성

• 로그인 버튼 컴포넌트를 생성하고, 버튼에 이벤트 핸들러를 추가

3. 카카오 JavaScript SDK 추가

• 웹 앱에 카카오 JavaScript SDK를 추가
  예시:
• <script src="https://developers.kakao.com/sdk/js/kakao.min.js"></script>

4. 카카오 SDK 초기화 및 로그인 처리

• 카카오 SDK를 초기화하고, 로그인 이벤트 핸들러를 구현
  예시:

// src.components/Login/KakaoLogin.jsx

import React from 'react';
import styled from 'styled-components';
import { SharedBtn } from './LoginModal/LoginModalStyle';
import { palette } from '../../styles/globalColor';

const KakaoBtn = styled(SharedBtn)`
  background-color: ${palette.yellowColor};
  font-weight: 500;
  font-size: 16px;
  color: ${palette.blackColor};
`;
const KakaoLoginBtn = () => {
  const handleKakaoLogin = () => {
    window.Kakao.Auth.login({
      success: authObj => {
        console.log('Kakao login success:', authObj);

        // 사용자 정보 가져오기
        window.Kakao.API.request({
          url: '/v2/user/me',
          success: res => {
            console.log('User info:', res);
          },
          fail: error => {
            console.error('Failed to get user info:', error);
          },
        });
      },
      fail: error => {
        console.error('Kakao login failed:', error);
      },
    });
  };

  return (
    <KakaoBtn type='button' onClick={handleKakaoLogin}>
      카카오톡 계정으로 로그인
    </KakaoBtn>
  );
};

export default KakaoLoginBtn;

이 과정을 통해 카카오 로그인을 구현할 수 있다.