타사 웹사이트 로그인을 위한 Google OAuth 2.0 통합 방법

귀하의 웹사이트에 로그인하는 것을 간편하게 만들 준비가 되셨나요? 타사 웹사이트 로그인을 위한 Google OAuth 2.0 통합에 대한 단계별 가이드를 살펴보세요. 우리는 과정을 안내하여 사용자 경험을 향상하고 보안을 강화하는 데 쉽도록 할 것입니다.

💡

Apidog의 단순화된 구성, 스마트 인증, 원클릭 토큰 획득 및 자동 토큰 관리와 같은 기능은 Google OAuth 2.0 서비스 통합의 효율성을 크게 향상시켜주는 훌륭한 API 디버깅 도구입니다.

버튼

시작하기 전에 OAuth 2.0이 무엇인지 먼저 이해해 봅시다.

OAuth 2.0이란?

OAuth 2.0은 사용자가 사용자 이름과 비밀번호를 제공하지 않고도 제3자 애플리케이션이 보호된 리소스에 접근할 수 있도록 하는 개방형 표준 인증 프로토콜입니다. 이는 사용자가 자신의 자격 증명을 직접 드러내지 않고 제3자 애플리케이션에 자신이 보호된 리소스에 접근할 수 있도록 권한을 부여할 수 있게 해줍니다. OAuth 2.0은 안전한 인증 메커니즘을 제공하기 위해 웹 및 모바일 애플리케이션에서 널리 사용됩니다.

OAuth 2.0 프로토콜은 다음과 같은 역할이 포함됩니다:

리소스 소유자: 일반적으로 보호된 리소스(예: 사진, 개인 프로필 등)를 소유한 사용자입니다.
클라이언트: 리소스 소유자의 보호된 리소스에 접근하려는 제3자 애플리케이션입니다.
인증 서버: 리소스 소유자를 인증하고 클라이언트가 리소스에 접근할 수 있도록 권한을 부여하는 서버입니다.
리소스 서버: 보호된 리소스를 저장하고 이에 접근하기 위한 API를 제공하는 서버입니다.

OAuth 2.0 프로토콜은 인증 흐름을 통해 권한을 부여합니다. 일반적인 인증 흐름에는 다음이 포함됩니다:

인증 코드 부여: 클라이언트가 사용자를 인증 서버로 리디렉션하고 사용자가 로그인하여 승인한 후, 인증 서버가 클라이언트에게 인증 코드를 반환하고 클라이언트는 이를 사용하여 액세스 토큰으로 교환합니다.
리소스 소유자 비밀번호 자격 증명 부여: 리소스 소유자가 클라이언트에게 직접 사용자 이름과 비밀번호를 제공하고 클라이언트는 이 자격 증명을 사용하여 인증 서버에 액세스 토큰을 요청합니다.
클라이언트 자격 증명 부여: 클라이언트가 자신의 자격 증명을 사용하여 인증 서버에 직접 액세스 토큰을 요청합니다. 클라이언트가 자원을 액세스해야 하는 경우에 적합합니다.
암시적 부여: 클라이언트에서 브라우저 기반 애플리케이션으로부터 액세스 토큰을 직접 얻기 위해 사용됩니다.

Google OAuth 2.0 암시적 부여: 구현 및 Apidog 디버깅

Google은 웹에서 OAuth 2.0 인증을 위해 암시적 부여 흐름을 사용하므로, 이를 구현하는 방법과 Apidog에서 디버깅하는 방법을 살펴보겠습니다.

1단계: 클라이언트 ID 및 리디렉션 URL 구성

먼저 Google API Console에 방문하여 OAuth 2.0 자격 증명을 가져와야 합니다. 왼쪽 사이드바에서 "자격 증명" 옵션을 클릭한 후 OAuth 클라이언트 ID를 생성합니다.

그런 다음 비즈니스에 따라 웹사이트, Android 또는 iOS 앱과 같은 애플리케이션 유형을 선택합니다. 다음으로 "허용된 JavaScript 출처" 필드에 웹사이트 도메인을 입력합니다.

로컬 디버깅인 경우, 일반적으로 http://localhost 또는 포트가 있을 경우 http://localhost:8000로 설정합니다. 목적은 Google에 웹사이트가 호스팅되고 있는 HTTP 출처를 알리는 것입니다. 그런 다음 "허용된 리디렉션 URI" 필드에 리디렉션 주소를 입력합니다. 이는 일반적으로 로그인 경로 또는 접근할 수 있는 다른 도메인입니다.

모든 관련 옵션을 구성한 후 "CREATE" 버튼을 클릭하여 저장합니다. 이를 통해 클라이언트 ID와 클라이언트 비밀이 생성되며, 이는 나중에 사용할 필요가 있습니다.

2단계: OAuth 권한 요청 페이지 구성

페이지에서 왼쪽 사이드바의 "OAuth 동의 화면" 옵션을 클릭하여 애플리케이션을 생성합니다.

OAuth 동의 화면 구성

이 페이지에서 애플리케이션의 기본 정보(이름, 이메일, 도메인 등)를 입력합니다. 이 페이지 정보는 팝업 인증 로그인 상자에 표시되어 최종 사용자에게 귀하가 누구인지 및 어떻게 연락할 수 있는지를 이해하는 데 도움을 줄 수 있습니다.

다음으로 범위를 구성합니다. 다음 단계로 이동하여 접근하고자 하는 권한을 선택한 다음 저장합니다.

또한 테스트 계정을 추가할 수 있습니다. 이는 공식 출시 전에 OAuth 2.0 로그인을 수행할 수 있는 이메일 계정으로, 최대 100명의 사용자가 제한됩니다.

위 구성을 완료한 후, 우리는 공식적으로 OAuth 2.0 인증의 주요 흐름에 들어갈 수 있습니다.

3단계: 액세스 토큰 획득

첫 번째 및 두 번째 단계가 준비되면 액세스 토큰을 요청하러 갈 수 있습니다. 이 단계에서는 뛰어난 API 디버깅 및 관리 도구인 Apidog를 사용하여 이 단계를 보여줄 것입니다. Apidog에서 직접 토큰을 얻을 수 있습니다.

버튼

Google OAuth 2.0 로그인 흐름 구현에서 Apidog의 주요 기능:

단순화된 구성: Apidog는 클라이언트 ID, 리디렉션 URL 및 기타 주요 파라미터를 쉽게 입력할 수 있는 중앙 집중식 구성 인터페이스를 제공하며, 복잡한 인증 요청 URL을 수동으로 구성할 필요가 없습니다.
스마트 인증 모드 선택: Apidog는 Google의 인증 모드를 자동으로 식별하고 암시적 부여 모드를 선택할 수 있는 기능을 제공하여 다양한 인증 모드 간의 전환 문제를 없애줍니다.
원클릭 액세스 토큰 획득: Apidog는 개발자가 전체 인증 흐름을 통해 안내하고 액세스 토큰을 자동으로 획득할 수 있게 하여 토큰 획득의 난이도를 크게 줄여줍니다.
자동 토큰 관리: Apidog는 획득한 액세스 토큰을 요청 헤더 또는 쿼리 매개변수에 자동으로 추가하며, 개발자가 수동으로 토큰 전송을 처리할 필요가 없습니다.
매끄러운 리소스 접근: Apidog에서 제공하는 액세스 토큰을 사용하여, 개발자는 추가적인 복잡한 인증 없이 Google의 공개 리소스에 직접 접근할 수 있습니다.

Apidog에서 새로운 HTTP 프로젝트를 생성한 후 새로운 요청을 생성하고 "문서 편집 -> 인증 -> OAuth 2.0" 옵션을 선택합니다.

Google의 "클라이언트 측 웹 애플리케이션을 위한 OAuth 2.0"을 사용하는 경우에는 "암시적" 인증 모드를 선택합니다.

클라이언트 ID 및 리디렉션 URL 입력. 첫 번째 단계에서 구성한 Google OAuth 2.0 서비스 매개변수입니다.

액세스 토큰 얻기

Google의 공식 문서에 따르면 액세스 토큰을 신청하려면 요청할 URL은 다음과 같습니다:

https://accounts.google.com/o/oauth2/v2/auth

이 주소를 "Auth URL" 입력 필드에 작성할 수 있습니다.

Google 공식 문서에서는 URL 경로에 포함해야 할 추가 매개변수도 요구합니다. 예를 들어:

https://accounts.google.com/o/oauth2/v2/auth?
scope=https%3A//www.googleapis.com/auth/drive.metadata.readonly&
include_granted_scopes=true&
response_type=token&
state=state_parameter_passthrough_value&
redirect_uri=https%3A//oauth2.example.com/code&
client_id=client_id

참고: 실제 애플리케이션에서는 줄 바꿈이 필요하지 않습니다.

그러나 Apidog에서는 일반적으로 필요하지 않습니다. 필요한 매개변수는 다른 옵션에서 별도로 구성되어 있기 때문입니다.

openid 값을 "범위"에 추가할 수 있습니다.

위의 모든 구성 항목이 완료되면 "토큰 얻기" 버튼을 클릭하여 토큰을 얻을 수 있습니다. 클릭하면 로그인이 처음인 경우 승인을 요청하는 창이 팝업되며 정보를 입력할 수 있습니다.

사용자 이름과 비밀번호를 입력한 후에는 계정을 확인하기 위한 문자 메시지 인증 코드를 받을 수도 있고, 계정을 직접 연동하여 액세스 토큰을 획득할 수도 있습니다.

인증이 완료되면 액세스 토큰이 자동으로 얻어져 페이지에 표시되며, Google에서 반환된 다른 정보도 파싱되어 표시됩니다.

4단계: 토큰을 기반으로 열린 리소스에 접근

획득한 액세스 토큰으로 이제 Google의 공개 리소스에 접근할 수 있습니다. OAuth 2.0 Playground에서 사용 가능한 모든 Google API 및 해당 권한 범위를 탐색할 수 있습니다.

요청을 보낼 때 Apidog는 자동으로 액세스 토큰을 Authorization 헤더에 Bearer 토큰으로 첨부합니다. URL에 토큰을 포함하고 싶다면 Apidog 설정에서 "토큰 추가 위치" 옵션을 "쿼리 매개변수"로 수정할 수 있습니다.

결론

요약하자면, Google OAuth 2.0 로그인 구현은 네 가지 주요 단계로 구성됩니다. 첫째, 1단계에서는 클라이언트 ID 및 리디렉션 URL을 구성하여 OAuth 2.0 자격 증명을 획득해야 합니다. 그런 다음 2단계에서는 접근 권한 범위를 정하고 애플리케이션을 만들며 접근 가능한 권한과 테스트 계정을 포함한 관련 정보를 구성해야 합니다.

다음으로 3단계에서는 토큰 요청을 통해 액세스 토큰을 획득할 수 있으며, Apidog와 같은 도구의 도움을 받을 수 있습니다. 마지막으로 4단계에서는 획득한 액세스 토큰을 사용하여 Google의 공개 리소스에 접근할 수 있습니다.

버튼