리액트 - Google Login 구현

구글 클라우드 플랫폼 접속

Google Cloud Platform

1. 클릭
   

2. 클릭

   

3. 프로젝트 이름 지정 & 만들기 클릭
   

4. 클릭
   

5. 클릭

   

6. 외부 선택후 만들기 클릭

   

7. 앱 이름 & 사용자 지원 이메일(본인이메일) 입력 후 아래로 이동
   

8. 개발자 연락처 정보(이메일) 입력후 저장 후 계속 클릭
   

   9. 아래로 이동
      

   10. 저장후 계속 클릭
       

   11. 테스트 사용자 안하고 넘어가도됨(해도되긴함) & 저장후 계속
       

   12. 대시보드로 돌아가기 클릭

       

   13. 사용자 인증 정보 클릭
       

   14. 사용자 인증 정보 만들기 클릭
       

   15. Oauth 클라이언트 ID 클릭

       

   16. 웹 어플리케이션 선택

       

   17. 어플리케이션 이름 & URI 추가

• URI를 추가할때 localhost 에서 하기 위해서는 기본적으로 포트번호를 입력하는게 맞지만 최근 바뀐점은
  http://localhost
  http://localhost:3000
  와 같이 추가를 해주어야한다는 것이다.

• URI를 추가한후 만들기 버튼 클릭

18. 밑과 같이 생성되는 클라이언트 ID & PASSWORD는 잘 가지고 있어야함
    

19. 이제 구글 클라우드 플랫폼이 생성되었으니 본격적으로 구글로그인을 구현
20. NPM 에서 @react-oauth/google 라이브러리를 다운
    

21. How to use 에서 사용방법 확인
    

• 사용하는 컴포넌트를 구글 스크립트를 wrapping 해야함
  

            import React from 'react';
            import ReactDOM from 'react-dom/client';
            import Router from './Router';
            import { GoogleOAuthProvider } from '@react-oauth/google';
            
            const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
            root.render(
            	<React.StrictMode>
            		< GoogleOAuthProvider clientId="**Google Oauth ID**" > <Router /></GoogleOAuthProvider>
            	</React.StrictMode>,
            );

22. 이후 구글 로그인 버튼을 생성하여 사용

    import { GoogleLogin } from '@react-oauth/google';
    // eslint-disable-next-line camelcase
    import jwt_decode from 'jwt-decode';
    
    const GoogleButton = () => {
        return (
            <>
                <GoogleLogin
                    onSuccess={credentialResponse => {
                        console.log(credentialResponse);
                        // 해당 부분은 후에 들어오는 토큰에 대해서 디코딩 하는 부분이다. // const decodeding = jwt_decode(credentialResponse.credential);
                        console.log(decodeding)
                    }}
                    onError={() => {
                        console.log('Login Failed');
                    }}
                />
            </>
        )
    }
    
    export default GoogleButton;

23. 들어온 토큰에 대해서 디코딩 해주기 위해서 jwt-decode 패키지를 설치하여 사용

• 사용은 아래의 코드와 같이 사용

import { GoogleLogin } from '@react-oauth/google';
// eslint-disable-next-line camelcase
import jwt_decode from 'jwt-decode';

const GoogleButton = () => {
    return (
        <>
            <GoogleLogin
                onSuccess={credentialResponse => {
                    console.log(credentialResponse.credential);
                    const decodeding = jwt_decode(credentialResponse.credential);
                    console.log(decodeding)
                }}
                onError={() => {
                    console.log('Login Failed');
                }}
            />
        </>
    )
}

export default GoogleButton;

소감

지금은 라이브러리를 이용해서 구글 로그인을 구현하는 방법에 대해서 적었지만
좀더 공부해서 구글 auth api 를 이용하여 자바스크립트로 직접 구현해 보고싶다