[React]카카오톡 소셜 로그인, 구글 소셜 로그인 구현

https://github.com/seoyoung927/social_login_ex

GitHub - seoyoung927/social_login_ex: social login with kakao and google

 

캡스톤 프로젝트를 진행하면서 소셜 로그인을 구현하는 방법을 공부해보았다. 여러 가지 이유로 결국 소셜 로그인 방식이 아닌 아이디/비밀번호 방식의 로그인으로 캡스톤 프로젝트 개발을 진행하였지만, 공부한 내용을 간단히 정리해보았다.

 

소셜 로그인을 구현하는 과정은 일반적으로 다음과 같다.

1. 인가 코드 받기

프론트엔드에서 카카오톡, 구글 등으로 인가 코드를 요청한다. 

2. 토큰 받기

얻은 인가 코드로 사용자 정보를 얻기 위한 access_token을 발급받는다.

이때, 백엔드와의 협의를 통해 인가 코드까지만 발급 받아 전달하거나 혹은 토큰까지 발급 받아 전달한다.

3. 사용자 정보 얻기 및 로직 처리

위에서 얻은 access_token을 바탕으로 카카오톡, 구글에서 사용자 정보를 얻을 수 있다. 해당 정보를 바탕으로 프로젝트에서 회원가입을 진행하거나 로그인 후 프로젝트 전용 토큰을 발급한다.

 

🔎카카오톡 소셜 로그인 구현

카카오톡 소셜 로그인을 구현하는 방법은 공식 문서에 자세히 나와있다.

REST API | Kakao Developers 문서

Kakao Developers

 

(1) 키 발급 받기

소셜 로그인 구현을 위해서는 가장 먼저 카카오톡에서 REST API KEY를 발급받아야 한다.

다음 링크에서 내 애플리케이션을 등록하여 REST_API_KEY를 발급 받고, REDIRECT_URI를 등록할 수 있다. REDIRECT_URI란 이후 응답을 받기 위한 URI이다. 인가코드 발급을 위해 카카오톡에 요청을 보내면 위에 설정한 REDIRECT_URI로 응답을 받게 된다.

https://developers.kakao.com/

Kakao Developers

나도 위 링크에서 다음과 같이 내 애플리케이션을 등록했다.

우선은 캡스톤 프로젝트로 React-Spring 기반의 웹 애플리케이션을 개발하고 있으므로, 플랫폼>web에 다음과 같이 설정해주었다.

 

(2) 인가 코드 받기

인가 코드를 받아오자.

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

위의 예시 코드에서도 알 수 있듯이 먼저 REST_API_KEY를 발급 받고, REDIRECT_URI 등을 먼저 설정해야 한다. (1)단계에서 발급받은 REST_API_KEY와 REDIRECT_URI를 이용하자.

아래는 인가 코드를 발급받는 과정을 구현한 React 코드이다.(.env를 이용하였다.)

import styles from "./LoginPage.module.css";

function LoginPage(){
    const KAKAO_REST_API_KEY = process.env.REACT_APP_KAKAO_REST_API_KEY;
    const KAKAO_REDIRECT_URI = process.env.REACT_APP_KAKAO_REDIRECT_URI;

    const onKakaoSocialLogin = () => {
        window.location.href=`https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${KAKAO_REST_API_KEY}&redirect_uri=${KAKAO_REDIRECT_URI}`;
    }

    return <div className={styles.container}>
        <div className={styles.button__wrapper}>
            <button onClick={onKakaoSocialLogin}>
            카카오톡 로그인
            </button>
        </div>
    </div>
}

export default LoginPage;

REDIRECT_URI에서 받은 인가 코드는 다음과 같다.

*참고

서비스에서 필요한 동의항목을 따로 설정할 수 있다. 다음과 같이 scope를 통해 따로 설정하면 로그인시 동의화면이 나오게 된다.

https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${KAKAO_REST_API_KEY}&redirect_uri=${KAKAO_REDIRECT_URI}&scope=profile_nickname,profile_image,account_email,gender

 

(3) 토큰 받기

인가 코드를 받으면 해당 인가 코드를 이용해 카카오톡에서 토큰을 받아올 수 있다. 토큰까지 받아서 백엔드에 전달한다고 가정하고 다음을 구현하였다.

https://kauth.kakao.com/oauth/token?grant_type=authorization_code&client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&code=${code}

import styles from "./KakaoOAuth2RedirectPage.module.css";
import { useEffect } from "react";

function KakaoOAuth2RedirectPage() {
  // 1. 인가코드
  const code = new URL(window.location.href).searchParams.get("code");
  // 2. access Token 요청
  const getToken = async (code: string) => {
    const KAKAO_REST_API_KEY = process.env.REACT_APP_KAKAO_REST_API_KEY;
    const KAKAO_REDIRECT_URI = process.env.REACT_APP_KAKAO_REDIRECT_URI;

    const response = await fetch(`https://kauth.kakao.com/oauth/token?grant_type=authorization_code&client_id=${KAKAO_REST_API_KEY}&redirect_uri=${KAKAO_REDIRECT_URI}&code=${code}`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8',
      },
    });
    return response.json();
  }

  useEffect(() => {
    if (code) {
      getToken(code).then((res) => {
        console.log(res.access_token);
      })
    }
  }, []);

  return <div className={styles.container} >
    <div className={styles.spinner} />
  </div>

}

export default KakaoOAuth2RedirectPage;

 

 

🔎구글 소셜 로그인

카카오톡 소셜 로그인과 기본적인 흐름은 같다.

https://developers.google.com/identity/protocols/oauth2/javascript-implicit-flow?hl=ko 

클라이언트 측 웹 애플리케이션용 OAuth 2.0  |  Authorization  |  Google for Developers

 

(1) 키 발급 받기

먼저 키를 발급받는다. 키는 google cloud console에서 발급받을 수 있다.

https://console.cloud.google.com/

Google 클라우드 플랫폼

카카오톡과 마찬가지로 study라는 이름의 프로젝트를 등록하였다. 

카카오톡에서 REST_API_KEY를 발급받았다면, 구글은 CLIENT_ID를 발급받는다. API 및 서비스>사용자 인증 정보 우측에서 확인할 수 있다. 클라이언트 ID를 복사해 .env 파일에 저장한다. 

추가적으로 SECRET_KEY도 .env 파일에 적는다. 이후 access_token 발급 시 필요하다.

그리고 카카오톡 구현 때와 마찬가지로 다음과 같이 설정한다.

카카오톡 소셜 로그인 구현과 다른 점은 OAuth 동의 화면에서 테스트 사용자를 등록해야한다는 점이다. 로그인을 테스트해 볼 사용자를 추가하면 되는데, 게시 상태가 "테스트 중"일 때는 테스트 사용자만 접속할 수 있다고 한다. 테스트할 자신의 google 계정을 등록해주면 된다.

 

(2) 인가 코드 받기

인가 코드를 받아오자. 카카오톡 공식 문서보다 읽기 어려운 것 같지만.. 순서대로 하면 되긴 한다.

https://accounts.google.com/o/oauth2/auth?client_id=${GOOGLE_CLIENT_ID}&redirect_uri=${GOOGLE_REDIRECT_URI}&response_type=code&scope=openid email profile

아래는 인가 코드를 발급받는 과정을 구현한 React 코드이다.

import styles from "./LoginPage.module.css";

function LoginPage() {
    const KAKAO_REST_API_KEY = process.env.REACT_APP_KAKAO_REST_API_KEY;
    const KAKAO_REDIRECT_URI = process.env.REACT_APP_KAKAO_REDIRECT_URI;
    const GOOGLE_CLIENT_ID = process.env.REACT_APP_GOOGLE_CLIENT_ID;
    const GOOGLE_REDIRECT_URI = process.env.REACT_APP_GOOGLE_REDIRECT_URI;

    const onKakaoSocialLogin = () => {
        window.location.href = `https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${KAKAO_REST_API_KEY}&redirect_uri=${KAKAO_REDIRECT_URI}`;
    }
    const onGoogleSocialLogin = () => {
        window.location.href = `https://accounts.google.com/o/oauth2/auth?client_id=${GOOGLE_CLIENT_ID}&redirect_uri=${GOOGLE_REDIRECT_URI}&response_type=code&scope=openid email profile`;
    }


    return <div className={styles.container}>
        <div className={styles.button__wrapper}>
            <button
                className={styles.button__kakao__login} onClick={onKakaoSocialLogin}>
                <img
                    className={styles.button__image}
                    src={`${process.env.PUBLIC_URL}/images/kakao_login_large_narrow.png`} />
            </button>
        </div>
        <div className={styles.button__wrapper}>
            <button
                className={styles.button__google__login} onClick={onGoogleSocialLogin}>
                구글 소셜 로그인
            </button>
        </div>
    </div>
}

export default LoginPage;

 

(3) 토큰 받기

https://oauth2.googleapis.com/token?grant_type=authorization_code&client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&client_secret=${SECRET_KEY}&code=${code}

React로 구현한 코드는 다음과 같다.

import { useEffect } from "react";
import styles from "./GoogleOAuth2RedirectPage.module.css";

function GoogleOAuth2RedirectPage() {
    // 1. 인가코드
    const code = new URL(window.location.href).searchParams.get("code");
    // 2. access Token 요청
    const getToken = async (code: string) => {
        const REST_API_KEY = process.env.REACT_APP_GOOGLE_CLIENT_ID;
        const REDIRECT_URI = process.env.REACT_APP_GOOGLE_REDIRECT_URI;
        const SECRET_KEY = process.env.REACT_APP_GOOGLE_SECRET_KEY;
        const response = await fetch(`https://oauth2.googleapis.com/token?grant_type=authorization_code&client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&client_secret=${SECRET_KEY}&code=${code}`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8',
            },
        });
        return response.json();
    }

    useEffect(() => {
        if (code) {
          getToken(code).then((res) => {
            console.log(res.access_token);
          })
        }
      }, [code]);
    
      return <div className={styles.container} >
        <div className={styles.spinner} />
      </div>
}

export default GoogleOAuth2RedirectPage;

 

 

🔎참고

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

https://hymndev.tistory.com/72

https://notspoon.tistory.com/47