Node.JS 서버에 구글 소셜 로그인 기능 넣기 1/2 - Google OAuth Client ID, Client Secret 생성방법

Node.js 사이트에 구글 소셜 로그인 기능을 추가해 봅시다. 로그인 버튼을 누르면 아래와 같이 구글 로그인 창이 뜨고 구글 로그인에 성공하는 경우 내 사이트에 자동 로그인 되는 기능입니다.

이러한 로그인을 OAuth라고 하는데요, 정말 간단하게 설명하면, 다른 사이트의 계정를 이용해서 해당 사이트의 사용자 인증(로그인)을 받고, 해당 사이트로 부터 계정 정보를 가져오는 것입니다.

구글의 OAuth를 사용하려면 구글로부터 OAuth 용 Client ID와 Client Secret을 발급받아야 합니다. 이번 글에서는 이것들을 발급받는 방법까지만 알아보고 다음 글에서 이것들을 사용해서 node.js 서버에 로그인 기능을 코딩해보도록 하겠습니다. 이미 구글 OAuth Client ID와 Client Secret이 있는 경우에는 다음글로 넘어가시면 됩니다.

웹 브라우져로 https://console.developers.google.com 을 엽니다. 구글 APIs & Service 페이지로 이동하는데, 만약 처음이라면 아래와 같은 화면이 뜹니다.

자신의 국가를 선택하고 Terms를 체크한 후 AGREE AND CONTINUE를 누릅니다.

먼저 프로젝트를 생성해야 합니다. CREATE PROJECT 를 누릅니다.

총 12개까지 프로젝트를 만들수 있다는 내용의 알림이 표시되고 새 프로젝트를 만들 수 있는 form이 나옵니다. Project name과 Location을 입력하고 CREATE를 누릅니다. 저는 기본값을 그대로 사용하였습니다. 프로젝트가 생성되었으면 왼쪽 사이드 메뉴에서 Credentials를 누릅니다.

OAuth consent screen을 설정하라는 알림이 표시되는데, 이건 해줘야 되기 때문에 CONFIGURE CONSENT SCREEN을 눌러줍시다. 

User Type을 먼저 지정해야 하는데, External로 설정합니다. External로 하면 구글 계정을 가진 아무나 OAuth를 통해 로그인할 수 있게 됩니다. 다음으로 CREATE을 누릅니다.

Form이 뜨는데, 여기에 입려된 값을 바탕으로 Login 화면과 기능이 정해집니다. Application name에 입력된 값은 이 글의 첫번째 스크린샷에서 처럼, 로그인 시에 노출되는 이름입니다. 로고를 줄 수도 있습니다. 저는 Application name 말고는 아무것도 바꾸진 않았습니다만, 아래의 화면은 한번 살펴봅시다.

OAuth를 이용해서 로그인하면 로그인한 계정의 정보를 사이트에게 넘겨주게 되는데, 어떠한 정보를 넘겨주는지를 scope라고 합니다. 기본적으로 email, profile, openid가 제공되는 것을 확인 할 수 있습니다. 이제 CREATE을 눌러 완료합니다.

다시 Credentials 화면으로 돌아왔습니다. 이번에는 + CREATE CREDENTIALS를 누릅니다. Drop Down 메뉴에서 OAuth client ID를 클릭합니다.

Application Type은 Web application으로 설정합니다. 그리고 Authorized redirect URIs라는 부분이 있는데 이 부분은 중요합니다.

위에서 말했다시피 사이트에서 소셜 로그인을 하게 되면 구글 로그인 사이트로 이동한 후 로그인 된 후에 다시 사이트로 돌아오게 됩니다. 다른 사이트에서 내 OAuth를 사용하는 것을 막기 위해 로그인 후 돌아갈 수 있는 주소를 설정하는 부분입니다. 우리는 테스트 용 코드를 만들 예정이므로 localhost를 사용하였고, 다음 강의에서 auth/google/callback 에서 해당 로그인을 처리하는 route을 만들 예정이므로 위와 같이 설정해줍니다. 모든 설정이 완료되면 CREATE을 누릅니다.

Client ID와 Client Secret이 생성되었습니다!

다음글에서는 생성된 Client ID와 Client Secret를 사용해 Node.js 소셜 로그인 기능을 코딩해보겠습니다.

댓글

댓글쓰기

이 글에 댓글을 다시려면 SNS 계정으로 로그인하세요. 자세히 알아보기

UP