리액트 Google 로그인 기능 OAuth 만들기 소셜 로그인

 

 

https://accounts.google.com/signin/v2/identifier?service=cloudconsole&passive=1209600&osid=1&continue=https%3A%2F%2Fconsole.cloud.google.com%2Fapis%2Fcredentials%2Fconsent%3Fproject%3Dwolrdcup&followup=https%3A%2F%2Fconsole.cloud.google.com%2Fapis%2Fcredentials%2Fconsent%3Fproject%3Dwolrdcup&flowName=GlifWebSignIn&flowEntry=ServiceLogin 

Google Cloud Platform

 

1.새 프로젝트를 만들어야 합니다

 

2. OAuth 동의 화면에서 외부 클릭

 

3. 필수 항목들 넣어 저장 한 뒤 범위 추가 또는 삭제 누르기

4. 해당되는 API 클릭

5.  사용자 인증 정보에서 사용자 인증 정보 만들기 후 OAuth 클라이언트 ID 클릭

 

6. OAuth 클라이언트 아이디 만들기

 

 

7. 생성된 OAuth 클라이언트 ID, 비밀번호 저장

 

 

 

구글에서의 셋팅 끝

 

 

 

---

 

 Google Login 모듈 설치하기

콘솔창에서 다음과 같이 입력하여 react-google-login 모듈을 설치해준다.

 

// yarn
yarn add react-google-login

// npm
npm i react-google-login\


//React 18

npm install react-google-login --legacy-peer-deps

or

npm install react-google-login --force

 

 

이후, 구글 로그인 버튼에 대한 Component를 생성한다.

 

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

const clientId = "위의 Google Cloud Platform에서 발급받은 Client ID";

export default function GoogleLoginBtn({ onGoogleLogin }){
    const onSuccess = async(response) => {
        const { googleId, profileObj : { email, name } } = response;
        
        await onGoogleLogin (
          // 구글 로그인 성공시 서버에 전달할 데이터
        );
    }

    const onFailure = (error) => {
        console.log(error);
    }

    return(
        <div>
            <GoogleLogin
                clientId={clientId}
                responseType={"id_token"}
                onSuccess={onSuccess}
                onFailure={onFailure}/>
        </div>
    )
}

 

 

 

더 자세한 사용방법은 아래 링크에서 확인할 수 있습니다.

 

www.npmjs.com/package/react-google-login

react-google-login