Vue.js에서 Google OAuth2 구글로그인 구현하기

사용자가 간편하게 구글 계정을 이용하여 회원가입 및 로그인을 할 수 있도록

Google OAuth2 로그인을 Vue.js 애플리케이션에 구현하는 방법에 대해 알아보겠습니다.

1) OAuth 로그인이란?

OAuth 로그인은 사용자가 기존에 사용 중인 소셜 계정(구글, 카카오톡, 네이버 등)을 통해 간편하게 인증하는 방법입니다.

이를 통해 사용자는 별도의 회원가입 절차 없이도 로그인할 수 있습니다.

요즘 웹사이트들은 기본적으로 필요한 기능이라고 봅니다.

GCP 콘솔에 접속하여 새로운 프로젝트를 생성합니다. 프로젝트 생성 방법은 다른 게시글이나 GCP 공식 문서를 참고하여 설정합니다.

프로젝트 생성 후, API 및 서비스 > 사용자 인증 정보로 이동하여 OAuth 2.0 클라이언트 ID를 생성합니다.

프로젝트 등록이 끝났으면 API및 서비스>사용자인증정보>OAuth2 2.0 클라이언트 ID를 만들어 줍니다.

그리고 위에서 만든 인증정보를 눌러서 아래와 같이 세팅해줍니다.

로컬에서 테스트하는 경우 http://localhost:8080을 추가하고, 호스팅된 웹사이트가 있다면 해당 도메인을 추가합니다.

OAuth 클라이언트 ID와 리다이렉트 URI를 .env 파일에 설정합니다.

VUE_APP_GOOGLE_CLIENT_ID=your_google_client_id

vue.js 기준으로 위와 같이 소스를 세팅해주면 되고 클라이언트 id는 위에서 생성한 id를 입력해주면 됩니다.

위와 같이 세팅하면 아래와 같이 구글로그인 팝업이 나옵니다.

로그인 후처리 로직은 위에 있는 googleCallback 부분에서 처리가 가능합니다.

위 소스는 참고사항으로 로그인하고 나면 token값을 리턴 해주는데 해당 토큰에 로그인 한 구글아이디, 성명, 프로필사진 등 정보가 담겨있으니 consol.log로 확인해 보시면 될 것 같습니다.

자세한 내용은 Google Developers 공식 문서에서 참고하시기 바랍니다.

작업하시다가 궁금하신 점 있다면 댓글 남겨주세요.

읽어주셔서 감사합니다. 😊