(1) 웹 애플리케이션 만들기 - React 구글로 로그인 구현하기

(기억해놓으려고 기록하는 것)

 

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

 

 

 

소셜 로그인 중 구글 로그인을 구현해보려고 한다. 

 

 

1. react-google-login 설치

 

내 프로젝트로 가서

react-google-login을 설치한다.

 

 

 

2. Googlebutton.js 작성

 

구글링 했을 때 잘 설명되어있는게 없었다;; 함수형 컴포넌트는 내가 아직 공부를 덜 한 개념이고 class 컴포넌트로 작성된 걸 찾아서 참고했다.

 

내 프로젝트/components 라는 폴더를 만들고 그 아래에 Googlebutton.js 파일을 생성하여 작성

 

import React, { Component } from 'react';
import { GoogleLogin } from 'react-google-login';
import styled from 'styled-components';

const clientId = "아래에서 얻는 clinetId 복붙"

class Googlebutton extends Component {

    constructor(props) {
        super(props);
        this.state = {
            id: '',
            name: '',
            provider: '',
        }
    }
    // Google Login
    responseGoogle = (res) => {
        console.log(res)
    }

    // Login Fail
    responseFail = (err) => {
        console.error(err);
    }

    render() {
        return (
            <Container>
                <GoogleLogin
                    clientId={clientId}
                    buttonText="Google"
                    onSuccess={this.responseGoogle}
                    onFailure={this.responseFail}
                />
            </Container>
        );
    }
}

const Container = styled.div`
    display: flex;
    flex-flow: column wrap;
`


export default Googlebutton;

 

- login props 설명 -

clientId(string) - You can create a clientID by creating a new project on Google developers website. 

onSuccess(function) - 로그인 성공했을 때 GoogleUser object를 반환

onFailure(function) - 로그인 실패했을 때 호출되는 함수

 

 

 

3. clientID 얻기

 

console.developers.google.com/apis/dashboard?project=speedy-area-221807&hl=ko&pli=1

Google Cloud Platform

새로운 프로젝트를 만들고 

메뉴에서 "사용자 인증 정보" 선택

 

 

 

 + 사용자 인증 정보 만들기 -> OAuth 클라이언트 ID 

 

작성하고 아래에 url 추가하기를 누르고

 

http://localhost:3001/ 를 넣어준다 (react 실행시키면 뜨는 주소) 

 

그런다음 맨 아래에 만들기 클릭 

 

 

클라이언트 ID 가 생성됐음 (이걸 복사 해서 clientId에 붙여넣자)

 

 

4. App.js에 컴포넌트 추가하기 

 

 

 

 

5. 저장하고 react 웹 확인 

 

버튼이 만들어졌고, 잘 작동되는 걸 확인할 수 있다 !

 

나는 버튼을 조금 바꾸고 싶어서 코드를 수정했다.

먼저 버튼 이름이 "구글로 로그인하기" 였으면 좋겠고 크기도 적당했으면 해서

 

GoogleLogin 컴포넌트에서 buttonText props 를 수정

 

container 에서 display: flex; 대신에 width 와 height를 적당한 크기로 줬다.

 

바뀐 걸 확인할 수 있다 :)