많은 사이트들이 소셜 로그인을 연동하여 간편하게 회원가입&로그인을 진행하고 있다.
나도 자주 이용하고 있는데 문득, 내가 자주 이용한다 === 즉 내가 언젠가는 꼭 해야하는 것. 이라는 생각이 들었고, 이번 기회에 한번 해보고 싶었다.
진짜 우당탕탕 연동기였다. 쉽지않았고, 다음을 위해 로그인 연동을 정리해보기로.

로그인 과정

버튼을 눌러 로그인 화면 띄우기
카카오에게 인가 코드 받아오기
인가코드는 주소의 쿼리스트링에 담아져서 제공. 이걸 파싱해서 백엔드에게 전달.
백엔드는 우리가 준 코드를 토큰으로 반환
그 토큰을 받아서 로그인을 유지

1번 부터 고난이였다… 왜 1번부터 어렵지,,, 3,4번은 카카오 API를 통해서 진행해 보았다.

로그인 화면 띄우기

카카오 개발자 계정 생성 및 앱 등록

카카오 개발자 센터에서 새 애플리케이션 등록
1. 내 애플리케이션에서 애플리케이션 추가 후 앱 이름, 회사명(개인) 등 설정
앱 설정
1. 카카오 로그인 설정
  앱 대시보드 → 제품 설정 → 카카오 로그인 → 활성화
2. Redirect URI 설정
  앱 대시보드 → 제품 설정 → 카카오 로그인 → Redirect URI 작성
3. JavaScript 키 확인
  앱 키 → JavaScript 키 확인

카카오 SDK 로드

index.html 파일에 스크립트 태그 추가
1
<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
window.Kakao 객체를 통해 SDK를 사용할 수 있음.
KakaoLogin.jsx 파일 생성
```javascript import { useEffect } from “react” import Button from “./Button”;

const KakaoLogin = () => { useEffect(() => { if (!window.Kakao.isInitialized()) { window.Kakao.init(‘JAVASCRIPT_KEY’); } }, []);

const onLoginKakao = () => {
    window.Kakao.Auth.login({
        success: function(authObj) {
            console.log(authObj);
        },
        fail: function(err) {
            console.error(err);
        },
    });
};

return (
    <Button
        type={'kakao'}
        onClick={onLoginKakao}
        text={'SIGN IN/JOIN WITH KAKAO'}
    />
) }

export default KakaoLogin;

```javascript
// Login.jsx

<div>
    <KakaoLogin />
</div>

문제

문제 1.

버튼을 누르면 팝업이 띄워지긴 하지만 앱 관리자 설정 오류라고 KOE001 오류 발생.

카카오가 알려준 해결방안 링크 Kakao Developers Kakao Developers 에서 친히 잘못된 앱 키 또는 앱 키 타입 이라고 나와있다.

useEffect(() => {
    if (!window.Kakao.isInitialized()) {
        window.Kakao.init('JAVASCRIPT_KEY');
    }
}, []);

위에는 일단 임시적으로 적은 init(’JAVASCRIPT_KEY’) 이 부분에 JavaScript KEY를 적지 않았다….
올바른 키 값을 작성해주고 또 버튼을 클릭

문제 2.

이번에는 KOE009 오류 발생

Web 사이트 도메인 추가하고 카카오 로그인에 Redirect URI도 설정.

카카오 로그인 페이지가 잘 나왔다.

평가

카카오 개발자센터에 등록을 하는 것만으로도 헤매고 헤맸다… 그래도 어찌저찌 로그인 페이지가 나올 수 있었다.
인가 코드로 토큰을 요청하고 사용자 정보를 가져오는 방법 → 블로그 링크