JavaScript) 구글 로그인 api 개발자 설정(1)

요즘은 많은 Application에서 자체적으로 구현한 Login이 아닌 Google, Facebook, Naver등 에서 제공하는 
방식으로 Login이 가능하게 구현하고 있습니다. 이를 통해서, 개별 개발자의 입장에서는 별도의 노력으로 
Login을 구현할 필요가 없어졌으며, 보안적으로 인증된 곳에서 제공하는 방식을 사용해서 좀 더 안정적인 
서비스를 가능하게 할 수 있습니다. 

OAuth 2.0이란 인증에 대한 산업 표준방식입니다. 이 방식은 web application에서 인증을 제공하는데 있어
서 개발자가 간편하게 제공할 수 있게 하는데 초점이 맞춰져 있습니다. 따라서 위에서 언급한 Google, 
Facebook, Naver등의 제공업체의 OAuth2.0은 대부분 비슷한 방식으로 구현이 가능합니다.

그렇다면, 대표적으로 Google OAuth2.0을 적용하는 방식에 대해서 알아보겠습니다. 전체적인 단계를 아래의 
순서로 살펴보겠습니다.

 

• Create user authorization credentials
• web application에 적용해서 Login / Logout 구현하기
• Token 전송 및 Google API 호출 / 사용하기

 

그럼 첫번째 시간으로 가장 기본이 되는 Create user authorization credentials부터 알아보겠습니다. 어떤 
시스템이던 동일하겠지만, Google OAuth2.0을 사용하기 위해서는, 이를 요청하는 web application(Client)
이 인가된 대상인지를 알기위해서 등록이 필요합니다. 사용자 인증 정보는 이를 위해서 진행을 하는 작업으
로 조금 길수도 있지만 따라해 보면 간단한 절차의 작업이 필요합니다.

 

 

1. 새 프로젝트 생성

---

이 모든 작업을 수행하기 위해서는, 아래의 주소에 접근해야 합니다. 

Credentials page : https://console.cloud.google.com/apis/credentials 

Google Cloud Platform

접근을 하면 대부분의 sub menu에서 아래와 같이 "이 페이지를 보려면 프로젝트를 선택하세요."라는 알림이 
발생합니다. 현재는 생성된 프로젝트가 없어서 생성이 필요하고, 기존에 이미 생성된 프로젝트가 있다면.. 
동일한 방식으로 신규로 추가하면 됩니다.

 

[생성된 프로젝트가 없을 경우 화면]

 

[프로젝트 선택 영역을 Click]

오른쪽에 새 프로젝트를 선택해 줍니다. 그러면 아래와 같은 새로운 창이 뜨는데 간략하게 프로젝트 이름과 위치를 넣어주고 생성해 줍니다. project를 생성하는데에는 제약조건이 있네요... 22개 project이상은 등록이 안되는 것 같습니다.

 

만들게 되면 아래과 같이, 기존에 프로젝트 선택 부분이 이번에 신규로 생성한 프로젝트 이름으로 변경되었습니다. 

 

 

2. OAuth 동의화면 구성

---

우리가 최종적으로 추가해야 하는 대상은 "API 및 서비스 > 사용자 인증 정보 > OAuth 2.0 Client ID" 입니다. 하지만 위의 화면에서의 alarm에 따르면...

 

애플리케이션에 대한 정보를 포함하여 OAuth 동의 화면을 구성해야 합니다.

 

라고 되어있습니다. OAuth 동의 화면은 "대상은 API 및 서비스 > 사용자 인증 정보" 아래에 메뉴로 제공되고 있습니다. 그럼 선택해서 확인해 보겠습니다. 

 

오른쪽에 Google OAuth 동의 화면에 대해서 자세한 설명이 제공됩니다. 간단하게 말해서 다른 web application에서 Google Login이 제공될 경우, Login시도 할때... 동의를 물어보는 작은 창을 말합니다. 이는 뒤에서 실제 구현 시 확인을 해 보도록 하겠습니다.

 

저는 Google 계정이 있는 모든 사용자가 접근이 가능하게 할 것이기 때문에 외부를 선택하겠습니다. 이제 만들기를 눌러줍니다.

 

친절하게 요구하는 정보가 실제로 어느 위치에 어떻게 보이는지... 왜 요청하는지를 알려주는 가이드도 같이 제공해 주네요!! 

 

우선은 앱 이름과 사용자 지원 이메일만 추가해주면 생성이 가능합니다. 추후에 앱 도메인 혹은 승인된 도메인 적용해 보도록 하겠습니다. 다음은... 범위에 대한 설정입니다. 

 

 

하단의 "범위 추가 또는 삭제" 버튼을 누르면 오른쪽에 가능한 권한을 모두 보여줍니다. 이 중에서 기본적인 3종세트만 추가해 보겠습니다. 일반적으로 email / profile / openid 를 추가합니다.

하단에 업데이트 버튼을 클릭하게되면 아래와 같이 3개의 권한이 민감하지 않음 범위로 등록됨을 확인 할 수 있습니다.

 

다음으로는 테스트 사용자 추가 입니다. 게시 상태가 "테스트 중"으로 설정된 동안에는 필요하다고 하니... 등록해 줘 보도록 하겠습니다. 테스트 사용자는 e-mail주소 기준으로 진행이되니 사용자@gmail.com으로 등록해 줍니다.

 

이렇게 모든 정보를 입력하면... 아래와 같이 OAuth 동의 화면 구성이 종료됩니다.

 

 

---

 

---

 

3. 사용자 인증 정보 만들기

---

OAuth 동의 화면을 만들라고 해서 만들었으니, 다시 사용자 인증 정보 메뉴를 선택해 봅니다. 확인해보면 기존에 OAuth 등의 화면을 만들기 전하고 다른 메뉴가 생성되어 있습니다.

 

"+ 사용자 인증 정보 만들기" 버튼이 생겼습니다. 이제 해당 버튼을 통해서 OAuth 클라이언트 ID를 선택하여 생성을 시작해 보겠습니다. 

 

채워야 하는 내용은 간단합니다. 우선 자신의 애플리케이션 유형을 선택합니다. 종류는 다양하며, 저는 web application으로 구현하기 때문에, 웹 애플리케이션을 선택했습니다. 다음으로 이름은... 식별용이라고 하니 마음대로 정하시면 되겠습니다. 

 

승인된 자바스크립트 원본은 web application을 호스팅하는 주소입니다. 우선 테스트 단계로 localhost를 지정하면 되겠습니다. 마지막으로, Google OAuth를 통해서 인증을 받은 후 이동할 주소입니다. 

 

이렇게 하고 생성을 하게되면... 아래와 같이 modal창이 뜨면서, client ID와 client 보안 비밀번호를 알려줍니다. 해당 정보는 추후에 본 화면에서 확인이 가능하니 그냥 확인 눌러주면 됩니다.

 

이렇게 Create user authorization credentials 단계가 완료되었습니다. 다음에는 Google OAuth를 web application에 적용해서 Login / Logout을 구현해 보겠습니다. 

 

 

도움 되셨다면 하단의 광고 클릭 해주시면 감사하겠습니다:)