react-oauth/google 라이브러리를 이용해 구글 oAuth 인증하기
소셜로그인 기능을 구현해두기 위한 초석으로 구글 auth 인증 기능을 구현중에 있습니다. 토이 프로젝트 개념으로 서버단과의 통신은 배제한 프론트 단에서 처리를 위한 베이스를 깔아두려고 프로젝트를 하나 만들었습니다.
아주 간단하게 구글 oAuth 인증을 통해 액세스 토큰을 발급받고 서버로 보내 로그인 여부를 체크하는 기능을 구현할건데 백엔드는 생략하고 프론트 부분에서 할 수있는 처리까지만 구현해보았습니다.
최종 결과물은 아래와 같이 Google 계정으로 로그인 버튼과 커스텀 로그인 버튼을 만들고 버튼 클릭 시 구글 계정으로 로그인을 진행하는 팝업 윈도우를 오픈하고 계정이 선택 될 시 인증성공과 함께 리턴되는 결과를 콘솔에 뿌리도록 합니다.
SpringFramework 하에 구글캘린더 활용을 위해 oAuth 인증을 이미 구현해본바 있습니다. 인증과 함께 액세스토큰과 리프레쉬 토큰을 발급받고 리프레쉬 토큰을 이용해 액세스 토큰을 주기적으로 갱신받는 구조로 설정되어 있는데 여기서 진행하는 부분은 구글api를 활용하는게 아닌 oAuth 인증만 진행하는 거라서 간단하게 구현이 가능합니다. 게다가 react 에서 제공해주는 간편한 오픈소스 라이브러리덕에 더더욱 캐주얼하고 간단히 구현이 가능했습니다.
NextJS 프로젝트 생성
개발환경은 빠르게 진행하기 위해 nextjs 로 선택했으며 CNA를 이용해서 프로젝트를 생성했습니다.
nextjs app 생성
npx create-nextjs-app g_oauth_nextjs
구글 로그인을 도와주는 모듈 @react-oauth/google 를 설치해줍니다.
npm i @react-auth/google
구글 클라우드 콘솔에서 사용자 인증정보 화면 내 클라이언트ID를 발급하고 oAuth 동의화면도 만들어줍니다. 이 과정에 대한 설명은 서칭해보면 많이 나오기 때문에 일단 생략합니다.
발급된 클라이언트 ID를 env 파일에 기록해주고 _app.js 내 렌더링 부분을 GoogleOAuthProvider 로 감싸주면서 clientId를 지정해줍니다.
_app.js
import { GoogleOAuthProvider } from '@react-oauth/google';
export default function App({ Component, pageProps }) {
const clientId = process.env.NEXT_PUBLIC_GOOGLE_CLIENTID;
return (
<GoogleOAuthProvider clientId={clientId}>
<Component {...pageProps}></Component>
</GoogleOAuthProvider>
)
}
구글 로그인 버튼 생성
구글 로그인 버튼을 생성해봅니다. @react-oauth/google 라이브러리를 통해 쉽게 생성이 가능합니다. 정말 편합니다. 로직 구현에만 집중할 수 있어서 좋다는 생각입니다.
googleLoginButton.js
import {GoogleLogin} from "@react-oauth/google";
const GoogleLoginButton = () => {
return (
<>
<GoogleLogin
onSuccess={(res) => {
console.log(res);
}}
onFailure={(err) => {
console.log(err);
}}
/>
</>
);
};
export default GoogleLoginButton;
기본적으로 제공되는 버튼을 배치할 시 사이즈 적용이 원하는대로 되지 않는 현상이 있어서 커스텀 버튼도 만들어줍니다.
googleCustomButton.js
const GoogleCustomButton = () => {
const login = useGoogleLogin({
onSuccess: res => console.log(res),
onFailure: res => console.log(res),
flow: 'implicit', //auth_code
});
return (
<>
<MyCustomButton onClick={() => login()}>
</MyCustomButton>
</>
)
};
커스텀 버튼 디자인은 콤포넌트로 따로 구현해주었습니다. taliwind css를 써서 간단히 적용해주었습니다.
MyCustomButton.js
const MyCustomButton = ({ onClick }) => {
return (
<button onClick={onClick}
className="flex w-full justify-center rounded-md bg-slate-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-slate-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
>
Sign in with Google
</button>
)
};커스텀 버튼은 useGoogleLogin 함수를 이용해야 하며 인증방식에 있어서 auth_code 와 implicit 두가지를 제공해줍니다.
auth_code 의 경우 액세스토큰을 발급할 수 있는 코드를 발급해주며 서버단에서 액세스토큰을 발급하기 때문에 implicit 방식보다 보안이 좋다는 장점이 있습니다만 서버단에서 액세스토큰을 발급받는 추가 로직 구현이 필요합니다.
구글로그인 인증 진행
auth_code 방식으로 인증 성공시 반환되는 데이터를 console 에 찍어보았습니다. 발급되는 code 값을 서버로 보내 서버단에서 액세스토큰을 발급하는 방식이어서 보안성이 올라갑니다.
implicit 방식은 액세스토큰이 바로 발급되는 구조입니다. 브라우저 단에서 access_token 탈취가 가능해 보안에 취약해질 수 있다는 단점이 있습니다.
참고링크
공식 문서를 통해 구현 방법을 자세히 아실 수 있으니 아래 링크 참고하시기 바랍니다.
https://github.com/MomenSherif/react-oauth#googlelogin
GitHub - MomenSherif/react-oauth: Google OAuth2 using the new Google Identity Services SDK for React 🚀
Google OAuth2 using the new Google Identity Services SDK for React 🚀 - GitHub - MomenSherif/react-oauth: Google OAuth2 using the new Google Identity Services SDK for React 🚀
github.com
Github 프로젝트
Github에 올려둔 프로젝트를 공유하려고 했으나 .env 가 올라가버려서 ClientId가 공개되어 있는 바람에 private 으로 돌려놓았습니다. 히스토리 삭제 이후에 공개하도록 하겠습니다.