[Google OAuth] Google Login API

 

 

Google OAuth 2.0

 

 

Google OAuth 2.0은 인증을 위한 개방형 표준 프로토콜로, 사용자들이 비밀번호를 공개하지 않고, 제 3자 어플리케이션에 리소스에 대한 접근 권한을 부여할 수 있게 해준다. 구글 OAuth는 OAuth 2.0 프로토콜을 구글 서비스에 적용하여 사용할 수 있게 만들었다.

 

 

Google OAuth를 사용하려면 다음과 같은 순서로 작업이 필요하다.

1. 구글 개발자 프로필 설정
2. 구글 개발자 콘솔에서 새 프로젝트 생성
3. 사용자 인증정보에서 OAuth 동의
4. OAuth 클라이언트 ID에서 어플리케이션 및 허용 URL등 설정
5. 로컬에 auth/google 라이브러리 설치
6. Root에 Provider 설정

 

 

아래와 같이 설정하여 프로젝트에서 구현해보자.

Google auth를 검색하여 Google Developer 프로필을 먼저 만든다.

 

이름을 필수적으로 입력하여 간단하게 프로필을 만들어보자.

 

관심분야를 선택하면 된다.

 

완료를 누르면 다음과 같이 개발자 프로필이 완성된다.

 

프로필이 완성되면 console.cloud.google.com의 API 및 서비스로 이동한다.

 

내가 설정할 프로젝트를 만들어 주면 된다.

 

새로 만든 프로젝트 내부에서 OAuth 클라이언트 ID를 먼저 만들어준다.

 

OAuth 클라이언트 ID를 만들기 전 동의화면을 먼저 구성해주어야 한다. 간단하게 구성해보자.

 

OAuth 동의화면 - 범위 - 테스트사용자 까지 완료하면 요약본이 나온다. 범위는 사용자에게 받을 Google 정보의 범위를 선택하면 되고, 테스트 사용자에 내 google 아이디를 입력하면 된다. 테스트할 아이디이기 때문에 여러개를 넣어도 상관은 없다.

 

다시 돌아와서 OAuth 클라이언트 ID를 만들면된다. 승인된 url은 내가 로컬에서 작업 할 url을 먼저 입력해주고, 혹시 오류가 발생한다면 포트번호를 지운 url을 추가해주면 된다.

URL 1 : http://localhost:3000
URL 2 : http://localhost

 

다음과 같이 OAuth 클라이언트를 생성했다! 클라이언트 ID와 비밀번호는 미리 저장해주고, 비밀번호는 env파일에서 가져올 수 있도록 env에 저장하면 좋다.

 

구현하고자 할 프로젝트로 돌아와서 Google auth의 라이브러리를 설치해주면 된다. 명령어는 다음과 같다.

$ npm install @react-oauth/google@latest
$ yarn add @react-oauth/google@latest

 

Github 문서를 살펴보면 사용방법을 간단하게 안내해주고있다. 이를 참고하여 내 코드에서 구현해보자. 먼저 아래와 같이 GoogleOAuthProvider로 내 앱을 감싸면 된다.

 

다음과 같이 감싸면되고, CLIENT_ID는 아까 OAuth 클라이언트 생성시에 미리 constants에서 작성해주었고, 이걸 가져왔다.

 

다음 내가 사용하고자 하는 페이지에 다음과 같은 코드를 입력하면 된다.

 

프로젝트를 실행해보면 다음과 같이 실행된다.

이제 Google계정으로 로그인을 할 수 있게 되었다!

 

내가 만든 프로젝트의 테스트 사용자로 내 ID가 등록되었기 때문에 로그인 할 수 있다. 실제 서비스를 배포할 땐, Google console에서 일부 수정이 필요하다.

 

Google Console에서 프로젝트를 생성할 때 지정해주었던 범위가 나타난다. 확인을 눌러 진행하자.

 

로그인을 성공하게 되면 clientId와 credential을 가져올 수 있다. 이후에는 credential을 JWT로 decode하여 token으로 사용하면 된다.

 

 

구글 OAuth를 통해 사용자 인증을 구현하는 것은 복잡할 수 있지만, 구글 라이브러리와 예제를 통해 빠르게 구현할 수 있다.