[TIL] 리액트 카카오톡 소셜로그인 간단하게 구현하기(프론트 부분)

요즘은 일반 사용자 로그인뿐만 아니라 이렇게 소셜로그인으로 편하게 로그인을 할 수 있는 방법이 있어 좋은 것 같다. 개발을 하기 전에는 그냥 너무 당연한거라고 생각했던 것 같은데 소셜 로그인을 구현하는 것 자체도 프론트엔드와 백엔드가 서로의 데이터를 주고받아야한다는 것을 알게 되면서 신기했던 것 같다.

그래서 오늘은 리액트를 이용하여 카카오톡 소셜로그인을 구현하는 방법을 설명해보겠다.

카카오톡 소셜로그인을 처음 구현하려면 Kakao developer 공식문서를 확인한 후 애플리케이션을 등록해야한다.

애플리케이션 추가하기

애플리케이션 추가하기를 통해 내 서비스를 등록한다. 등록 후 내 애플리케이션 -> 만든 애플리케이션 클릭 -> 플랫폼 설정하기 -> web 플랫폼 등록하기에서 도메인 주소를 localhost:3000으로 설정했다.

그 후 Redirect URI를 등록해주어야하는데 카카오 로그인 후 Redirect URI 주소에서 인가코드를 발급받아야하기에 내 서비스에서 접근 가능한 도메인을 설정해주어야한다. 나는 로컬에서 테스트하고 있기 때문에 localhost:3000/oauth 으로 설정했다. 이제 본격적으로 REST API를 이용해 소셜로그인을 구현해보자.

REST API

공식문서의 내용을 살펴보면 REST API를 이용한 로그인 구현시 어떤 단계로 어떤 과정을 겪게 되는지를 미리 간단히 살펴볼 수 있다.

클라리언트 쪽에서 카카오 로그인 요청을 하면 Redirect URI로 인가 코드를 전달 받게 되고 이 인가코드를 백엔드쪽으로 넘겨주어 토큰을 발급받는 방식으로 진행되는 것이다.

로그인 페이지

카카오로그인을 위해 리액트에서 로그인 페이지를 만들어주었으며 아래와 같이 코드를 작성했다.

// 로그인 페이지

import React from 'react'
import axios from 'axios'

const KakaoLogIn = () => {

  // 카카오 로그인 함수를 실행시키면 아래에 설정해 놓은 KAKAO_AUTH_URL 주소로 이동한다.
  // 이동 된 창에서 kakao 계정 로그인을 시도할 수 있으며 로그인 버튼 클릭 시 Redirect URI로 이동하면서 빈 화면과 함게 인가코드가 발급된다.(인가코드는 파라미터 값에 들어가 있다!)
  const REST_API_KEY = 'REST API KEY';
  const REDIRECT_URI = 'http://localhost:3000/oauth';
  const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`;

  const kakaoLogin = () => {
    window.location.href = KAKAO_AUTH_URL;
  }

  return (
    <React.Fragment>
      <button
        onClick={kakaoLogin}>kakaoLogin</button>
    </React.Fragment>
  )
}

export default KakaoLogIn

함수형 컴포넌트를 이용하였으며 REST_API_KEY와 REDIRECT_URL를 가지고 버튼 클릭시 KAKAO_AUTH_URL로 이동을 시켜주게 된다. 그렇게 되면 카카오로그인을 하는 화면이 나오게 되고 아이디와 비밀번호를 입력한 후, 로그인을 클릭하면 REDIRECT_URI로 페이지 이동이 된다.

리다이렉트 페이지

// 리다이렉트 URI 화면

import React from "react";
import styled from "styled-components";

import { useDispatch } from "react-redux";
import { actionCreators as userAction } from "../redux/modules/user";
import Spinner from "../elements/Spinner";

const KakaoAuthHandler = (props) => {
  const dispatch = useDispatch();

  // 발급된 인가코드를 백엔드로 넘겨주기 위해 꺼내오는 작업이 필요하다.
  // code라는 이름으로 파라미터 코드 값을 꺼내오려면 아래와 같이 선언하면 된다.
  let code = new URL(window.location.href).searchParams.get("code");

  React.useEffect(() => {
	// 꺼내온 code(인가코드)를 미들웨어를 통해 백엔드로 넘겨준다.
    dispatch(userAction.kakaoLoginAC(code));
  }, []);

  return (
    <Wrap>
      <Spinner />
    </Wrap>
  )
};

const Wrap = styled.div`
  margin-top: 50px;
  min-height: 1100px;
`

export default KakaoAuthHandler;

리다이렉트 화면으로 정상적인 이동이 이루어졌다면 스피너 화면과 함께 URL에 인가코드가 같이 발급된 것을 알 수 있다. 엑세스 토큰을 발급받기 위해 백으로 보내줘야하는 인가코드이다.

http://localhost:3000/oauth?code=발급되는 인가코드

이렇게 주소창에 인가코드가 발급이 되면 파라미터로 들어있는 인가코드를 꺼내와서 백으로 넘겨줘야한다. 그러기 위해서는 new URL()을 사용하여 localhost:3000/oauth?code= 뒷부분에 붙어있는 인가코드를 추출했다.

let code = new URL(window.location.href).searchParams.get("code");

인가코드를 받아 백엔드와 통신하기 전, 프론트에서 이루어져야하는 과정은 여기서 마무리가 된다. 이후 이 발급된 code를 백엔드에게 전달하고 엑세스 토큰과 리프레시 토큰을 발급받아 로그인 과정을 구현하면 되는 것이다.

백엔드와 통신

백엔드와 통신하기 위해서 axios를 사용했으며, 요청을 보내 엑세스 토큰을 발급받아 로컬 스토리지에 저장하는 방식으로 구현하려고 한다.

[TIL] 리액트로 구글 소셜로그인 구현하기(프론트엔드 부분)