1. 클라이언트 ID 발급받기

---

• 구글 소셜 로그인을 활용하기 위해서는 Google Cloud에서 OAuth2.0 클라이언트 ID를 발급받아야 한다.

1) 새 프로젝트 생성

• Coogle Cloud Console 페이지에 접속해서 새 프로젝트를 클릭해서 프로젝트 생성 페이지로 진입

• 프로젝트 이름을 입력한 후 만들기 클릭

2) OAuth 동의 화면 설정

• User Type에서 외부를 선택하고 만들기 클릭

• 앱 이름과 사용자 지원 이메일 입력

• 하단의 개발자 연락처 정보까지 입력 후 저장 후 계속 클릭

• 저장 후 계속 클릭

• 저장 후 계속 클릭

3) 사용자 인증 정보에서 OAuth 클라이언트 ID 생성

• 사용자 인증 정보 만들기 클릭 후 OAuth 클라이언트 ID 클릭

• 애플리케이션 유형은 웹 애플리케이션 선택, 승인된 자바스크립트 원본 URI에 http://localhost:3000와 http://localhost 추가 후 만들기 클릭하면 클라이언트 ID가 생성된다.

로그인 에러 발생

• 승인된 자바스크립트 원본 URI에 http://localhost:3000 만 추가할 경우 아래와 같은 에러가 발생하기 때문에 http://localhost 도 같이 추가해주어야 한다.

2. 클라이언트 사이드 구현

---

• 구현에는 @react-oauth/google 라이브러리를 이용했다.

// LoginForm.js
import styled from 'styled-components';
import GoogleLoginButton from './GoogleLoginButton';
import { GoogleOAuthProvider } from '@react-oauth/google';

function LoginForm() {
  const CLIENT_ID = process.env.REACT_APP_CLIENT_ID;

  return (
    <LoginArea>
      <Container>
        <LoginText>
          계속하려면 나만의 작은 음악 다이어리에 로그인하세요.
        </LoginText>
        <GoogleOAuthProvider clientId={`${CLIENT_ID}`}>
          <GoogleLoginButton />
        </GoogleOAuthProvider>
        <AccountText>
          계정이 없나요?
        </AccountText>
        <SignupButton>
          나만의 작은 음악 다이어리에 가입하기
        </SignupButton>
      </Container>
    </LoginArea>
  );
}

export default LoginForm;

// GoogleLoginButton.js

import styled from 'styled-components';
import { useGoogleLogin } from '@react-oauth/google'
import { FcGoogle } from 'react-icons/fc';

const GoogleButton = styled.button`
  display: flex;
  align-items: center;
  justify-content: center;
  width: 450px;
  height: 50px;
  border-radius: 50px;
  border: 1px solid #878787;
  background-color: white;
  font-size: 15px;
  font-weight: 700;
  color: #6a6a6a;
  &:hover {
    background-color: #eff1f7;
  }
  &:active {
    border: 2px solid #878787;
  }

  > .icon {
    margin-right: 7px;
  }
`;

function GoogleLoginButton() {

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

  return (
    <GoogleButton onClick={() => login()}>
      <FcGoogle className='icon' size={20} />Google로 로그인
    </GoogleButton>
  );
}

export default GoogleLoginButton;