[Next.js] Kakao 소셜 로그인

카카오 로그인 로직

1. 카카오 로그인 요청
2. 사용자 로그인 진행
3. 프론트 인가 코드 받기 (RedirectUri)
4. 백엔드로 전달
5. 백엔드 로직 처리
6. 백엔드 → 프론트 사용자 정보 받기

소셜 로그인 (Kakao)

1. kakao에 인가코드 요청 (로그인/동의 확인)
2. 백엔드에 인가 코드 전달
3. 우리 서비스 전용토큰 받기
4. 토큰확인 후 로그인 진행

그림 출처(https://data-jj.tistory.com/53)

 

Kakao Developers

Kakao Developers

주요에러 해결 방법

 

 

Kakao Developers

Kakao Developers

javascript 문서

 

 

 

여기 최고 ….

REST-API 활용한 카카오 소셜 로그인 구현(feat. React)

REST-API 활용한 카카오 소셜 로그인 구현(feat. React)

 

애플리케이션 추가하기

 

플랫폼 설정하기

• Web 선택
• 로컬주소 and 배포한 링크 연결해두기

 

카카오 SDK 스크립트 추가

• document에 스크립트 추가

• app에서 kakao 전역 객체 선언

declare global {
  interface Window {
    Kakao: any;
  }
}

• app에서 useEffect 사용하여 카카오 SDK 초기화

useEffect(() => {
    // 카카오 SDK 초기화
    if (!window.Kakao.isInitialized()) {    // 초기화 되어있지 않을 경우(중복 초기화 에러 방지)
      window.Kakao.init(process.env.NEXT_PUBLIC_KAKAO_JS_SDK_KEY);  // env 환경변수 사용
      console.log(window.Kakao.isInitialized());  // 초기화 여부 확인(true 나와야 함)
    }
  }, []);

카카오 SDK 초기화 할 때 사용할 자바스크립트 키

 

카카오 로그인 요청

• authorize → 현재 창에 띄우기
• login → 팝업 창 띄우기
• href → 로그인 요청 (백엔드 Redirect URI 로 연결)
• Kakao.Auth.authorize → 로그인 창 연결 후 인가코드 전달 (redirect)

window.Kakao.Auth.authorize({
      redirectUri: process.env.NEXT_PUBLIC_CODE_REDIRECTURI,
});
window.location.href =
      process.env.NEXT_PUBLIC_LOGIN_REDIRECTURI;

백엔드가 인가코드를 받고 토큰을 생성해서 프론트에 전달해줌 (이때 전달받을 곳을 REDIRECT URI에 적어줘야 함)

 

백엔드가 전달한 토큰 받기

const ACCESS_TOKEN = new URL(window.location.href).searchParams.get(
    'accessToken',
  );
  const REFRESH_TOKEN = new URL(window.location.href).searchParams.get(
    'refreshToken',
  );

  console.log(ACCESS_TOKEN);
  console.log(REFRESH_TOKEN);

  // 예시로 로컬에 저장함
  if (ACCESS_TOKEN) {
    localStorage.setItem('accessToken', ACCESS_TOKEN);
  }
  if (REFRESH_TOKEN) {
    localStorage.setItem('refreshToken', REFRESH_TOKEN);
  }

 

URL에 들어있는 토큰 값 뽑아내서 로컬스토리지에 저장 (이 로직을 수행하는 곳은 Kakao Dev에 작성한 REDIRECT URI 경로이다. )