[React] 카카오 로그인

카카오 로그인 과정

1. 카카오에 인가 코드 발급 요청

2. 인가 코드를 백엔드에 알려줌

3. 로그인 처리를 한 후에 jwt 토큰 발급

4. 토큰을 로컬 스토리지에 저장

 

 

kakao developers를 참고해서 공부하자!

https://developers.kakao.com/

Kakao Developers

 

 

1. 애플리케이션 등록

1. 애플리케이션 추가하기

공식문서 > 내 애플리케이션 > 애플리케이션 추가하기

2. 웹 플랫폼 추가하기

내 애플리케이션 > 앱 설정 > 플랫폼으로 들어가서 Web 선택

도메인을 입력해야 하는데 우선,, 테스트 환경인 http://localhost:3000 를 추가해준다.

배포 후 도메인도 여기서 추가하면 정상적으로 서비스에 적용할 수 있음!

 

3. 카카오 로그인 활성화 하기

내 애플리케이션 > 제품설정 > 카카오 로그인 탭으로 이동해서

활성화 설정을  ON 으로 바꿔주어야 한다. 이거 안했다가,.,, 에러나서 열받았고,,,얼굴 빨개졌음,,ㅎ

 

 

2. Redirect URI 설정

http://localhost:3000/oauth

위와 같이 설정해준다.

 

 

API KEY 환경변수로 설정해주기

리액트 프로젝트 폴더 바로 아래에 .env 파일 생성

추가한 애플리케이션 클릭 > 앱 키 > REST API.키 값을 다음과 같이 환경 변수로 설정

REACT_APP_REST_API_KEY="키 값"

변수명을 반드시 위와 동일하게 설정 해야함!

 

 

3. 인가 코드 발급 받기

GET /oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code HTTP/1.1
Host: kauth.kakao.com

Login.jsx (로그인 페이지) 

import React from "react";
import styles from "./styles/Login.module.css";
import kakaoBtn from '../assets/images/kakao_login_medium_wide.png';

export default function Login() {

  const REST_API_KEY = process.env.REACT_APP_REST_API_KEY;
  const REDIRECT_URI = "http://localhost:3000/oauth";

  const KAKAO_AUTH_URI = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`;

  return (
    <div className={styles.body}>
      ...생략
      
      {/* 로그인 버튼을 누르면 인가코드를 발급 받는 링크로 이동 */}
      <a href={KAKAO_AUTH_URI}>
        <img 
          className={styles.kakaoBtn} 
          src={kakaoBtn} 
        />
      </a>
        
    </div>
  );
}

내 애플리케이션 > 제품 설정 > 카카오 로그인 > 동의 항목 탭에서

동의 항목을 설정하면 제법,,, 동의를 구하는 느낌이 난다...

 

 

4. 서버에서 토큰 받기

Oauth라는 컴포넌트를 생성해서 그 위에 작성

import React, { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import axios from 'axios';

export default function Oauth() {

  // params로 받은 인가 코드를 code 변수에 저장
  const code = new URL(window.location.href).searchParams.get('code');

  const navigate = useNavigate();

  useEffect(() => {
    (async () => {
      try {
        // 토큰 axios 요청
        const res = await axios.get(`api/code=${code}`);
        const token = res.headers.authorization;
        // 받아온 토큰을 로컬 스토리지에 token으로 저장
        window.localStorage.setItem('token', token);
        // home으로 이동
        navigate('/');
      } catch (e) {
        console.error(e);
        navigate('/');
      }
    })();
  }, []);

  return (
    <div>
    </div>
  );
}

 

 

5. 백엔드에 토큰 보내기

 // 로컬 스토리지에 저장된 토큰을 받아와서
 const token = window.localStorage.getItem('token');

    try {
      const res = await axios.post('api/post', data, {
      	// 헤더로!!
        headers: {
          Authorization: token,
        },
      });
    } catch (e) {
      console.error(e);
    }
  };

 

 

 

 

 

예쁜 하늘이 오랜만이어서 찍어봤당

예전에 아무것도 모른 채로 난생처음 플젝 했을때가 떠오른다,,, 

그때 바라보기만 했던 게 지금 어마어마한 도움이 되는 중ㅠ 

그럼 다음 플젝때는 더 잘할 수 있겠지~ 오예