구글 소셜로그인 기능

HYUK·2023년 5월 3일

1. 기능구현 과정

1-1 구글 clientId 생성

먼저 구글로그인기능에 대해서 어떠한 레퍼런스나 설명을 들어본적도 없고해서 일단 무작정 구글링을 통해 여러가지 레퍼런스를 찾아보고 하였는데 우선은 먼저 구글클라우드에서 프로젝트를 새로 생성해야하는 과정을 알게 되었다. 구글 새프로젝트 생성 페이지에서 생성 과정중 클라이언트아이디, 클라이언트 보안 비밀번호 이렇게 두가지를 알려주는데 이거는 다시 알 수 없다고하여 따로 메모를 해 두었다.

1-2 @react-oauth/google 라이브러리

여기까지는 상당히 순조롭게 흘러갔으나 여러가지 참고페이지를 찾아보던중 구글로그인을 하기위해 가장 많이 이용하는 라이브러리가 react-google-login 라이브러리를 이용하는것 같아 해당 라이브러리 사용법에대해서 찾아보고 적용해보려했는데 라이브러리 설치조차 되지 않았다. 이유를 찾아보니 2023년 3월 31일 이후에는 이 라이브러리를 지원이 중단된다고 하여 더이상 사용할수가 없었다. 그래서 다른방법을 찾아보던 중 @react-oauth/google이라는 라이브러리를 찾게되어 해당 라이브러리로 적용하기로 하였다.

**oauth 란?
OAuth는 인터넷 상의 서비스 제공자가 제공하는 API를 사용하여 서드파티 애플리케이션에서 인증된 사용자의 리소스에 접근할 수 있도록 하는 개방형 권한 부여 프로토콜이다.
간단하게 말해, OAuth는 애플리케이션에서 우리가 사용하는 다른 사이트(제공자)의 정보를 사용하기 위해 해당 서비스 제공자(구글, 페이스북, 카카오 등)의 인증을 받아 해당 정보에 접근하는 체제를 말한다.
예를들어, 구글 로그인을 통해 다른 웹 사이트에서 내 정보를 사용하고자 할 때, OAuth를 이용하여 구글의 인증을 받아 해당 정보에 접근할 수 있다.

1-3 라이브러리 적용결과

예제 코드를통해 직접 적용해서 구현해 보았고 코드내용은 아래내용과 같다.

import { GoogleLogin } from '@react-oauth/google';
import { GoogleOAuthProvider } from '@react-oauth/google';

const GoogleLoginButton = () => {
  return (
    <GoogleOAuthProvider clientId='클라이언트 ID'>
      <GoogleLogin
        onSuccess={(credentialResponse) => {
          console.log(credentialResponse);
        }}
        onError={() => {
          console.log('Login Failed');
        }}
      />
    </GoogleOAuthProvider>
  );
};

export default GoogleLoginButton;

구글 로그인버튼도 정상적으로 잘 나왔고 버튼클릭시 구글로그인창도 정상적으로 아주 잘 나왔다.

그런데, 한가지 아쉬운게 로그인버튼 디자인이 너무 마음에 들지 않아서 커스터마이징을 하고싶어서 다시 또 여러가지 방법을 찾아보기 시작했다.

1-4 구글로그인버튼 커스터마이징(feat. useGoogleLogin)

여러가지 참고페이지를 통해 얻게된 방법은 @react-oauth/google에서 제공되는 useGoogleLogin을 이용하면 커스터마이징을 할수 있다는 방법을 찾게 되었는데 이부분에서 정말 많이 해맷었다. 타입스크립트 에러부터 시작해서 여라가지 에러들이 계속해서 발생하였다. 그러던중 블로그, github자료를 찾아본 결과 이곳에서 방법을 찾을 수 있었다. 나는 지금까지 GoogleOAuthProvider를 GoogleLoginButton컴포넌트에 적용을 하고 이곳에서 함께 useGoogleLogin을 적용해왔는데 해당 레퍼런스를 보니 GoogleOAuthProvider를 상위 컴포넌트에서 GoogleLoginButton컴포넌트를 감싸준뒤 GoogleLoginButton컴포넌트에서 useGoogleLogin을 적용하고 있었다. 그래서 해당 예시대로 그대로 적용 해본결과 내가 원하던대로 아주 깔끔하게 로그인버튼이 내가원하던대로 출력이 되었다.

아래 내용은 예시 코드이다.

export default function App() {
  return (
    <GoogleOAuthProvider clientId="xxxx">
      <div>
        <h1>@react-oauth/google</h1>
        <LoginPage />
      </div>
    </GoogleOAuthProvider>
  );
}

function LoginPage() {
  const login = useGoogleLogin({
    onSuccess: tokenResponse => {
      console.log(tokenResponse);
    },
  });

  return (
    <div>
      <button onClick={() => login()}>google Login</button>
    </div>
  );
}

1-5 google clientId는 .env파일에

이제 모든게 다 원하던대로 출력이되어 다음스텝으로 넘어가려하던중 clientId에 대해서 생각이 났다. clientId를 보안이슈상 따로 관리해줘야한다고 들었고 그래서 .env파일에 관리하기로 하였다. .env파일은 프로젝트 최상위 루트경로에 만들어줘야 하며 코드 작성시에는

REACT_APP_원하는대로작명 = value

이런식으로 작성해서 불러와 사용하면되는데 사용하는 경우에는

const clientId = process.env.REACT_APP_불러올이름

이렇게 작성해서 변수에 담아 사용해주면 되는데 나는 여기서또 타입스크립트를 간과를 했다. type에 계속해서 string|undifined가 뜨는것이였다 그래서 string 타입에는 할당할수 없다는 오류결과가 계속해서 나왔고 그래서 타입을

// 변경전
const clientId = process.env.REACT_APP_GOOGLE_CLIENT_ID


// 변경후
const clientId = process.env.REACT_APP_GOOGLE_CLIENT_ID || '';

이러한식으로 적용해준 결과 오류없이 말끔하게 정리할 수 있었다.

2. 참고자료

HYUK

step by step

이전 포스트

조건부 렌더링

다음 포스트