React 구글 로그인 API 승인받기

YeonSeong·2021년 10월 21일

React oAuth 구글로그인 구글로그인API 리액트

OAuth에 대해서

벨로그 로그인 화면이다. 깃허브, 구글, 페이스북 아이디로 로그인 할 수 있게 되있다. 이런걸 OAuth인증이라고 한다.

OAuth인증을 통해서 사용자가 새로 가입을 안해도 된다는 장점과 아이디와 비번을 사이트에서 저장 안해도 된다는 보안상의 이점이 있다. (대부분의 사용자가 사이트마다 아이디와 비번이 유사하다.)

생활코딩, OAuth설명

사이트에서 OAuth적용하기

상기한 것과 같은 이점이 있는 소설 로그인을 개발중인 사이트에 적용하고 싶다.

구글 clientId 발급받기

구글 클라우드 플랫폼

개발환경에서는 URI에 http://localhost:3000 을 입력하면 된다.

만들기를 누르면 Client ID가 발급된다. 밑에 코드에서 client ID를 붙여넣으면 된다.

코드

'react-google-login'이라는 라이브러리를 이용하겠다. 다음과 같이 작성하면 된다.
(물론 당연히 npm install react-google-login 을 통해 라이브러리를 먼저 설치해줘야 한다.)

import React from 'react';
import { GoogleLogin } from 'react-google-login';


function LoginGoogle(props) {
  
  const clientId =
    "Your client ID";

  async function onSuccess(res) {
    const profile = res.getBasicProfile();
    const userdata = {
      email: profile.getEmail(),
      image: profile.getImageUrl(),
      name: profile.getName(),
    }; 
    // 로그인 성공 후 실행하기 원하는 코드 작성.
  
  }

  const onFailure = (res) => {
    alert("구글 로그인에 실패하였습니다");
    console.log("err", res);
  };

  return (
      <GoogleLogin
        className="google-button"
        clientId={clientId}
        buttonText="Login with Google" // 버튼에 뜨는 텍스트
        onSuccess={onSuccess}
        onFailure={onFailure}
        cookiePolicy={"single_host_origin"}
      />
    </div>
  );
}

export default withRouter(LoginGoogle);

+ 구글 로그인시 유튜브 채널 아이디 받아오기

import React from 'react';
import { GoogleLogin } from 'react-google-login';


function LoginGoogle(props) {
  
  const clientId =
    "Your client ID";
  
  const SCOPE = "https://www.googleapis.com/auth/youtube.readonly";

  async function onSuccess(res) {
    const profile = res.getBasicProfile();
    const userdata = {
      email: profile.getEmail(),
      image: profile.getImageUrl(),
      name: profile.getName(),
      channelId: channelId,
    }; 
    // 로그인 성공 후 실행하기 원하는 코드 작성.
  
  }

  const onFailure = (res) => {
    alert("구글 로그인에 실패하였습니다");
    console.log("err", res);
  };

  return (
      <GoogleLogin
        className="google-button"
        clientId={clientId}
        buttonText="Login with Google" // 버튼에 뜨는 텍스트
        onSuccess={onSuccess}
        onFailure={onFailure}
        cookiePolicy={"single_host_origin"}
 	scope={SCOPE}
      />
    </div>
  );
}

export default withRouter(LoginGoogle);