TIL54 | 카카오 소셜 로그인 (React Hooks)

1. 카카오 개발자 사이트 에서 애플리케이션 추가하기

1-1. 카카오 개발자 사이트에서 내 어플리케이션을 추가한다.

1-2. 추가 완료

→ 그럼 이제 카카오 API 앱 키가 발급되었으니까! 확인하기 위해 추가된거 클릭! 🥳

2. 카카오 API 앱 키

2-1. JavaScript 앱 키 확인!

리액트에서 JavaScript 를 이용하기 때문에 JavaScript 키 를 메모해둔다!

3. 플랫폼 등록

3-1. Web 플랫폼 등록

앱 설정 > 플랫폼 에서 Web 플랫폼 등록 을 해줍니다!
🤚🏻 지금은 local 에서 개발하고 있기 때문에 로컬호스트 주소를 입력!

3-2. 등록 완료!

4. 카카오 로그인 활성화 설정

제품 설정 > 카카오 로그인 에서 활성화 설정을 on 해준다!!

→ 설정 완료 🙂

5. Redirect URI 설정하기

5-1. Redirect URI 등록

제품 설정 > 카카오 로그인 > Redirect URI 에서 등록해준다!

5-2. 등록 완료!

6. 동의 항목 설정

6-1. 필수/선택 항목 설정

제품 설정 > 카카오 로그인 > 동의항목 에서 설정한다.

6-2. 동의화면 미리보기

7. JavaScript SDK 추가

7-1. javascript sdk 추가

index.html 에 kakao javascript sdk 를 추가한다.

<script src="https://developers.kakao.com/sdk/js/kakao.min.js"></script> 

7-2. 확인해보기

console창에 Kakao 검색해보고, 이렇게 뜬다면 제대로 동작하는거다! 👏🏻

8. init 하기

8-1. Kakao.init 해주기

componentDidMount 라이프 사이클에서 해줘야 하는데, react hooks 를 사용하고 있어서 useEffect 를 이용해줍니다!

• Login.js

const KakaoInit = () => {
  Kakao.init('아까 발급받았던 JavaScript 키 입력해줍니다.');
}; //Kakao.init 의 파라미터로 자바스크립트 키를 넣어줍니다. ✨

const Login = () => {
  ...

  useEffect(() => {  //componentDidMount 역할을 해주는 형태의 useEffect (두번째 인자로 빈 배열)
    KakaoInit();
  }, []);
  
  ...

8-2. 확인해보기

이렇게 까지 해주고 다시 콘솔창에서 Kakao 를 입력해주면 다음과 같이 관련 API들을 사용할 수 있는 환경이 구성된 것이 확인가능하다! 👌🏻

9. 로그인 버튼에 호출 등록하기

• Login.js 에서 카카오톡으로 시작하기 버튼에 onClick 이벤트를 걸어줍니다! ✨
  

  const handleKakaoLogin = () => {
    Kakao.Auth.login({
      success: auth => {
        console.log('Login', auth); 
      },
      fail: error => {
        alert(JSON.stringify(error));
      },
    });
  };

     <Button bgColor={'#f9dc02'} color={'#361d1c'} onClick={handleKakaoLogin} >
        카카오톡으로 시작하기
     </Button>

10. 완성 🥳