1. 2달 전

    Naver Login in React

    React에서 네이버 로그인 사용하기

  2. 3달 전

    NPM에 React 모듈 배포하기

    NPM에 리액트에서 사용할 수 있는 모듈 배포하기

  3. 3달 전

    JS 의존성 관리 - 모듈 시스템과 NPM

    전통적인 JS의 의존성 관리 방식과 한계, CommonJS, AMD 등장. JS의 패키지 관리자인 NPM

  4. 5달 전

    Next.js SSR Styled-component (.feat TS)

    Styled-Components로 컴포넌트를 작성해보자.

  5. 5달 전

    Next.js 9

    7월에 발표된 Next.js 9에서 어떤점이 변경되었는지를 중심으로

  6. 6달 전

    Facebook Login in React

    React에서 페이스북 로그인 사용하기

  7. 6달 전

    Google Login in React

    React에서 구글 로그인 사용하기

  8. 6달 전

    Kakao Login in React

    React에서 카카오 로그인 사용하기

  9. 8달 전

    21 우버 클론 코딩 (nomad coders)

    우버 코딩 강의 로그 2.22 ~ 2.25

  10. 8달 전

    18 우버 클론 코딩 (nomad coders)

    우버 코딩 강의 로그 2.13 ~ 2.17

  11. 8달 전

    17 우버 클론 코딩 (nomad coders)

    우버 코딩 강의 로그 2.7 ~ 2.12

  12. 9달 전

    NEXT.JS

    공식 문서 튜토리얼을 따라 하며 기록

  13. 9달 전

    16 우버 클론 코딩 (nomad coders)

    우버 코딩 강의 로그 2.0 ~ 2.6

  14. 9달 전

    gatsby 블로그 만들기

    gatsby + Netlify 사용해서 블로그 만들기

Tamm자바스크립트 웹 개발 환경을 좋아하고 사람들에게 재미를 주는 것에 관심이 많은 개발자 입니다.

Google Login in React

React에서 구글 로그인 사용하기

featured image thumbnail for post Google Login in React

구글의 로그인 API를 사용하여 로그인 하기

https://console.cloud.google.com 에서 프로젝트를 하나 생성한다.

대시 보드가 생성되는데

 2019 06 10  8 3dcea99e 8640 45f4 9fc6 354128cb77d8 41 05

API 쪽 카드에 보면 API 개요로 이동 버튼을 클릭

사용자 인증 정보 - Ouath 동의 화면 에 간단히 설정. 나는 애플리케이션 이름만 수정했음.

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

웹 어플리케이션 선택

 2019 06 10  8 803351eb ed85 42fa 9dd7 89ee57d36caf 44 44

인증 정보를 생성하면 클라이언트 ID가 보이는데 그 클라이언트 ID만 사용하면 된다.

 2019 06 10  8 c7bf6db9 5894 41ac aa94 236e302ef90d 45 42

구글의 경우 react용 로그인 모듈이 있는데, facebook 같이 큰 로그인 서비스에는 다 존재한다. (Github, Facebook, Google 등등)

$ yarn add react-google-login

모듈을 사용하는 방법은 간단하다.

  • login.tsx GoogleLogin 모듈에 clientId와 성공 콜백, 실패 콜백을 넣어주고, render에는 로그인 버튼의 렌더함수를 넣어주면 된다.

    import GoogleLogin from 'react-google-login';
    
    const Login = (props) => {
      const { onLoginGoogle } = props;
      return (
        <div className={cx('login')}>
          <GoogleLogin
             clientId='google-login-key'
             render={(props: any) => (
               <div onClick={props.onClick} />
             )}
             onSuccess={result => onLoginGoogle(result)}
             onFailure={result => console.log(result)}
             cookiePolicy={'single_host_origin'}
          />
        </div>
      );
    };
    
    export default Login;
    

성공 콜백 후 넘어오는 값은 다음과 같다.

{  
   "El":"115542265492867015125",
   "Zi":{  
      "token_type":"Bearer",
      "access_token":"ya29.Gl1F...Xz4uE",
      "scope":"email prof...profile openid",
      "login_hint":"AJD...XKQQ",
      "expires_in":3600,
      "id_token":"eyJhbGc...JhY2Nv",
      "session_state":{  
         "extraQueryParams":{  
            "authuser":"0"
         }
      },
      "first_issued_at":1563090245757,
      "expires_at":1563093845757,
      "idpId":"google"
   },
   "w3":{  
      "Eea":"11...15125",
      "ig":"TaeMin Moon",
      "ofa":"TaeMin",
      "wea":"Moon",
      "Paa":"http...oto.jpg",
      "U3":"tmmoond8@gmail.com"
   },
   "googleId":"115...15125",
   "tokenObj":{  
      "token_type":"Bearer",
      "access_token":"ya2...CHXz4uE",
      "scope":"email ...e openid",
      "login_hint":"AJDL...KQQ",
      "expires_in":3600,
      "id_token":"eyJhb...FUaw",
      "session_state":{  
         "extraQueryParams":{  
            "authuser":"0"
         }
      },
      "first_issued_at":1563090245757,
      "expires_at":1563093845757,
      "idpId":"google"
   },
   "tokenId":"eyJhbGciOi...4AaCByCFUaw",
   "accessToken":"ya29....4uE",
   "profileObj":{  
      "googleId":"115...5",
      "imageUrl":"https...UBA/s96-c/photo.jpg",
      "email":"tmmoond8@gmail.com",
      "name":"TaeMin Moon",
      "givenName":"TaeMin",
      "familyName":"Moon"
   }
}