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

카카오톡 소셜로그인에 이어 구글 로그인까지 시도해봤다. 구글로그인의 경우에는 리액트에서 사용할 수 있는 라이브러리를 활용해 구현했다. 가장 먼저 사용했던 라이브러리는 react-google-login이라는 라이브러리 사용!!

구글 로그인 시작 전 준비

먼저 구글 로그인을 구현하기 전에도 이전 카카오로그인을 구현했던 것처럼 미리 준비하는 과정이 필요하다. 구글 클라우드 플랫폼에 접속하여 Oauth2.0 클라이언트 ID를 발급받아야 그 다음 단계로 넘어갈 수 있다.

• 구글 클라우드 플랫폼에서 Oauth2.0 클라이언트 ID 발급
• 프로젝트가 없다면 새 프로젝트 만들기
• Oauth 동의 화면에서 외부 -> 앱이름, 사용자 지원 이메일 -> 개발자 연락처 정보 값을 필수로 입력하고 나머지 칸은 채우지 않아도 된다. 로컬에서 테스트할 예정이기 때문!!
• 동의가 완료되었다면 사용자 인증정보 만들기 OAuth 클라이언트 ID를 클릭한다.
• 그 후 웹 애플리케이션을 선택하고 승인되 ㄴ자바스크립트 원본 URI에 http://localhost:3000 을 추가한다.
• 인증정보를 만들면 클라이언트 ID와 클라이언트 보안 비밀번호가 생성되는데 유출되지 않게 조심하자!!

react-google-login

npm을 통해 react-google-login을 설치한 후 아래와 같은 코드를 작성했다. 검색을 해보면 이 방법으로 많이 구현하고 계시는 것 같았다. 그래서 나도 이 방법을 적용했다.

import React, { useEffect } from 'react'
import { GoogleLogin, GoogleLogout } from 'react-google-login'

const GoogleLogIn = () => {

  // 로그인 성공했을 때 처리 함수
  const successGoogle = (response) => {
    console.log(response);
  }

  //로그인 실패했을 때 처리 함수
  const failGoogle = (response) => {
    console.log(response);
  }

  // 로그아웃 성공했을 때 처리 함수
  const onLogoutSuccess = () => {
    console.log('SUCESS LOG OUT');
  };

  return (
    <React.Fragment>
      <GoogleLogin
        clientId='클라이언트 ID'
        buttonText="로그인"
        onSuccess={successGoogle}
        onFailure={failGoogle}
      />
      <GoogleLogout
        clientId='클라이언트 ID'
        onLogoutSuccess={onLogoutSuccess}
      />
    </React.Fragment>
  )
}

export default GoogleLogIn

이렇게 구현한 후 구글 로그인을 시도하면 자꾸 에러가 난다. 콘솔에 두가지 에러가 찍히는데 해결방법이라고 찾은 것들을 모두 시도해봤지만 해결이 되지 않았다.

// 로그인 시작 전 오류 발생
details: "You have created a new client application that uses libraries for user authentication or authorization that will soon be deprecated. New clients must use the new libraries instead; existing clients must also migrate before these libraries are deprecated. See the Migration Guide for more information."
error: "idpiframe_initialization_failed"

// 로그인 시도 후
error: "popup_closed_by_user"
[[Prototype]]: Object

구글링뿐만 아니라 공식문서까지 모두 살펴보니 Google Auth API 초기화 실패 오류로 클라이언트에 타사 쿠키가 활성화되지 않은 경우 발생한다고 쓰여있다. 그래서 찾은 해결방법이 두가지정도 있었다.

• 크롬 브라우저 설정 → 고급 → 개인정보 및 보안 → 사이트 설정 → 쿠키 →타사 쿠키 및 사이트 데이터 차단 활성화 → 아래의 허용 목록에 [*.]google.com와 [*.]cloudhq.net 입력
• 크롬 쿠키 삭제

이 두가지를 아무리 시도해도 해결이 되지 않는다. 그래서 다른 방법을 찾아보면서 알게된 새로운 방법!

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

const GoogleLogIn = () => {

  return (
    <React.Fragment>
      <GoogleOAuthProvider clientId='클라이언트 ID'>
        <GoogleLogin
          buttonText="google login"
          onSuccess={(credentialResponse) => {
            console.log(credentialResponse);
          }}
          onError={() => {
            console.log('Login Failed');
          }}
        />
      </GoogleOAuthProvider>
    </React.Fragment>
  )
}

export default GoogleLogIn

@react-oauth/google

npm 으로 @react-oauth/google@latest을 설치했다.

$ npm install @react-oauth/google@latest

설치한 후 아래와 같은 코드로 변경했다.

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

const GoogleLogIn = () => {

  return (
    <React.Fragment>
      <GoogleOAuthProvider clientId='클라이언트 ID'>
        <GoogleLogin
          buttonText="google login"
          onSuccess={(credentialResponse) => {
            console.log(credentialResponse);
          }}
          onError={() => {
            console.log('Login Failed');
          }}
        />
      </GoogleOAuthProvider>
    </React.Fragment>
  )
}

export default GoogleLogIn

이렇게 구현하니까 로그인 성공 응답이 아주 잘 넘어온다. 첫번째 방법으로는 실패했지만 다른 방법으로 시도해서 성공했다!!

지금까지는 카카오로그인과 함께 구글 로그인까지 시도하는 것을 공부했는데 카카오로그인 방법이 궁금하다면 아래의 게시글에서 확인하면 된다.

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