React 구글 로그인

참고자료

https://www.youtube.com/watch?v=auD1xmWNztI

https://developers.google.com/identity/gsi/web/guides/client-library

로그인 관련정보

• GCP 프로젝트 만들기
• Oauth 동의화면 만들기
  user-type 외부 (test)
• 사용자 인증정보 만들기 (OAuth 클라이언드 ID 발급)

클라이언트	내용
아이디	???????????-?????????????????nvcuujaflsb.apps.googleusercontent.com
보안 비밀번호	GOCSPX-???????????????????-SYvYz-Qft

회원가입 플로우

react(localhost:3001) 에서 backend(localhost:3000) 에 Ouath 요청 -> redirect 후 Code 발급

• 발급한 Code로 해당 소셜계정의 Access Token 발급 -> 해당 Access Token으로 이메일 정보 받아오기

• 이메일 정보및 해당 소셜 아이디의 id를 DB에 저장 -> 로그인처리

로그인 플로우

Ouath 인증 -> 인증시 해당 sns_id와 DB의 sns_id가 일치하는지 여부 확인 -> 확인 후 refresh 토큰을 발급 후 redirect 할 코드에 cookie로 저장

• 프론트로 리다이렉트 -> 해당 프론트에서는 useEffect를 활용해 앱이 시작한 경우 accessToken을 요청하는 silent-refresh 비동기 axios 요청 -> refresh 토큰이 유효한 경우 accessToken 발급 -> accessToken은 Authorization header에 저장

react-google-login 라이브러리 활용하기

import { GoogleLogin, GoogleLogout } from "react-google-login";

  return (
      <>
        <GoogleLogin
            clientId={clientId}
            responseType="id_token"
            buttonText="구글 로그인 하기"
            onSuccess={handleSuccessLogin}
            onFailure={handleFailureLogin}/>

        <GoogleLogout
            clientId={clientId}
            buttonText="로그아웃"
            onLogoutSuccess={handleSuccessLogout} />
      </>
  )

로그인에 성공하면 아래와 같이 인증 토큰과 사용자 정보를 확인할수있다.

로그아웃의 경우 사실상 빈 버튼에 이벤트만 달아서 클라이언트 단에서
저장된 쿠키값을 날려버리는 식으로 구현 할 수 있을것 같다.