웹사이트를 위한 Facebook OAuth 2.0 액세스

Facebook에서 사용되는 OAuth 2.0 인증 프로세스는 "Authorization Code Grant"입니다. 그것을 구현하고 Apidog에서 디버깅하는 방법을 소개하겠습니다.

OAuth 2.0이란?

OAuth 2.0는 사용자 자격 증명을 요구하지 않고 보호된 리소스에 대한 제3자의 접근을 가능하게 하는 널리 사용되는 인증 프로토콜입니다. 여기에는 네 가지 주요 역할이 포함됩니다:

리소스 소유자: 일반적으로 보호된 리소스를 소유하는 사용자입니다.
클라이언트: 리소스 소유자의 데이터에 접근하려는 제3자 애플리케이션입니다.
인증 서버: 리소스 소유자를 검증하고 클라이언트에 권한을 부여합니다.
리소스 서버: 보호된 리소스를 저장하고 관리하며, 접근을 위한 API를 제공합니다.

일반적인 인증 흐름

OAuth 2.0 프로토콜은 다양한 인증 흐름을 통해 인증을 구현합니다. 일반적인 인증 흐름은 다음과 같습니다:

Authorization Code Grant: 클라이언트는 사용자를 인증 서버로 리디렉션합니다. 사용자가 로그인하고 권한을 부여하면, 인증 서버는 클라이언트에 인증 코드를 반환합니다. 그런 다음 클라이언트는 인증 코드와 자격 증명을 사용하여 액세스 토큰을 요청합니다.
PKCE가 있는 Authorization Code Grant (Proof Key for Code Exchange): 표준 인증 코드 흐름과 유사하지만, 클라이언트가 PKCE(Proof Key for Code Exchange)를 사용하여 보안을 강화합니다.
리소스 소유자 비밀번호 자격 증명 Grant: 리소스 소유자가 직접 사용자 이름과 비밀번호를 클라이언트에게 제공합니다. 클라이언트는 이러한 자격 증명을 사용하여 인증 서버에서 액세스 토큰을 요청합니다.
클라이언트 자격 증명 Grant: 클라이언트가 자신의 자격 증명을 사용하여 인증 서버에서 액세스 토큰을 직접 요청합니다. 이 흐름은 클라이언트가 리소스에 접근해야 할 경우에 적합합니다.
암시적 Grant: 브라우저 기반 애플리케이션에서 클라이언트로부터 직접 액세스 토큰을 얻는 데 사용됩니다. 이 흐름은 일반적으로 웹 프론트엔드 애플리케이션에 사용됩니다.

Facebook OAuth 2.0을 사용하여 제3자 웹사이트에 로그인하는 방법

1단계: 애플리케이션 만들기 및 클라이언트 ID와 클라이언트 비밀 얻기

먼저 https://developers.facebook.com에서 Facebook 개발자 계정을 열어야 합니다. 계정을 연 후, 그 안에서 애플리케이션을 생성합니다.

애플리케이션이 성공적으로 생성되면, [애플리케이션 설정->기본] 옵션을 클릭합니다. 여기서 애플리케이션 번호는 클라이언트 ID(Client ID), 애플리케이션 키는 클라이언트 비밀(Client Secret)입니다. 나중에 이 두 속성이 필요합니다.

2단계: 콜백 주소 설정

애플리케이션을 만든 후, 제어판에서 "콜백 주소"를 설정해야 합니다. [제어판 -> 이 애플리케이션 사용자 정의] 옵션을 클릭한 후, "Facebook 로그인 설정"을 클릭하여 구성 인터페이스로 들어갑니다.

구성 인터페이스의 "유효한 OAuth 점프 URI" 항목에 콜백 주소(콜백 URL)를 입력합니다. 보통 서버의 도메인 이름입니다(Facebook은 https로 시작해야 합니다).

아직 없다면 먼저 입력할 수 있으며, 도메인 이름이 접근 가능하다는 것을 확인하면 됩니다. 구성이 완료되면 저장합니다.

우리가 "콜백 주소"가 필요한 목적은 주소 표시줄에서 인증 코드(code)를 얻기 위함입니다. 일반적으로 OAuth 2.0 로그인 페이지에서 사용자 이름과 비밀번호를 입력한 후, "콜백 주소"로 리디렉션되어 주소 표시줄에 나타납니다.

인증 코드(code)를 얻습니다. 다음 주소 표시줄은 코드를 수동으로 얻는 데 사용됩니다:

위의 정보가 구성된 후, 우리는 OAuth 2.0 인증의 주요 과정에 공식적으로 들어갑니다.

3단계: 액세스 토큰 얻기

위의 첫 번째 및 두 번째 단계가 준비되면, 우리는 액세스 토큰(Token)을 신청할 수 있습니다. 이 단계는 Apidog를 통해 시연하겠습니다.

Apidog는 매우 우수한 API 디버깅 및 관리 도구로, Apidog에서 직접 Token 액세스 토큰을 얻을 수 있습니다. 아직 Apidog를 설치하지 않았다면, 지금 다운로드하세요!

button

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

2. 클라이언트 ID, 클라이언트 비밀 및 콜백 URL 구성 Apidog의 OAuth 2.0 페이지에서 선택된 기본 인증 모드는 Authorization Code로, Facebook OAuth 2.0도 Authorization Code를 사용하기 때문에 이곳에서 전환할 필요가 없습니다.

다음으로 페이지 하단에서 클라이언트 ID 및 콜백 URL을 찾고, Facebook OAuth 2.0 서비스에서 획득한 클라이언트 ID, 클라이언트 비밀, 구성된 콜백 URL을 입력합니다. 구체적인 매개변수는 "1단계, 2단계"에서 언급한 구성입니다.

3. 인증 코드 요청 URL 구성 Facebook의 공식 문서에 따르면, OAuth 2.0 인증 중 인증 코드 요청 URL은 다음과 같습니다: https://www.facebook.com/v19.0/dialog/oauth

이 인증 코드 요청 URL을 Auth URL에 입력하면 됩니다. 이 URL은 로그인 인증 페이지로 이해될 수 있으며, 최초 로그인 상태를 검증할 때 클라이언트 측에서 이 페이지(창의 형태)로 열립니다. 사용자 이름과 비밀번호를 입력하라는 메시지를 표시합니다.

일반적으로 로그인 인증 페이지를 수동으로 구성할 때는 인증 URL에 추가 매개변수가 필요합니다.

https://www.facebook.com/v19.0/dialog/oauth?
  client_id={app-id}
  &redirect_uri={redirect-uri}
  &state={state-param}

참고: 매개변수 이어쓰기는 일반적으로 줄 바꿈이 없어야 합니다.

그러나 Apidog에서는 기본 URL 다음에 추가 매개변수가 일반적으로 필요하지 않습니다. "?" 전에 있는 경로만 필요하며, 다른 필수 매개변수는 다른 옵션에서 별도로 구성됩니다. 물론 일부 쿼리 매개변수를 포함하려면 이 입력 박스 옆에 있는 아이콘을 클릭하여 추가할 수도 있습니다:

또한 "더 보기" 옵션을 확장하여 입력해야 할 매개변수의 값을 채울 수 있습니다. 예를 들어 "Scope"에 필요한 권한 "public_profile"을 채웁니다. Facebook의 "public_profile" 권한은 애플리케이션이 사용자 노드의 기본 공개 프로필 필드를 읽을 수 있도록 허용하며, 이 권한은 모든 애플리케이션에 자동으로 부여됩니다.

"State" 옵션에는 크로스 사이트 요청 위조를 방지하기 위해 "state"를 입력합니다. 제3자 플랫폼에서는 일반적으로 이것을 입력해야 하므로 우리는 보통 입력하며, 그렇지 않으면 액세스 토큰을 얻을 때 오류가 발생할 수 있습니다.

4. 액세스 토큰 요청 URL 구성 Facebook의 공식 문서에 따르면, 액세스 토큰을 얻기 위한 요청 URL은 다음과 같습니다: https://graph.facebook.com/v19.0/oauth/access_token

이 주소를 액세스 토큰 URL 입력 필드에 입력합니다. 마찬가지로 다른 매개변수는 다른 입력 필드에서 별도로 구성되기 때문에 URL에 포함할 필요는 없습니다.

5. 액세스 토큰 얻기 위의 모든 구성 항목이 설정되면 "Get Token" 버튼을 클릭하여 액세스 토큰을 얻을 수 있습니다.

클릭하면 처음 로그인인 경우, 사용자에게 승인 요청을 하는 창이 팝업되고, 여기서 Facebook 계정의 사용자 이름과 비밀번호를 입력해야 합니다. 새 장치에서 로그인하는 경우 추가 확인을 위해 이메일도 필요할 수 있습니다.

사용자 이름과 비밀번호를 입력하면 승인 확인을 요청받습니다.

확인을 클릭하여 승인을 완료합니다. 승인되면 액세스 토큰이 자동으로 얻어지고 페이지에 표시됩니다. 동시에 Facebook에서 반환한 다른 정보도 파싱됩니다.

4단계: 토큰 기반으로 공개 리소스 액세스 액세스 토큰(Token)을 사용하여 이제 Facebook의 공개 리소스에 접근할 수 있습니다. Facebook Graph API에서 어떤 공개 리소스가 있는지 확인할 수 있습니다.

예를 들어, 다음 API는 사용자의 ID와 이름을 검색합니다. 만약 인터페이스가 아무것도 반환하지 않는다면, "3단계"에서 언급한 필요한 권한이 있는지 확인해야 합니다. 필요한 권한을 Scope에서 간단히 구성하세요. https://graph.facebook.com/v12.0/me?fields=id,name

요청을 보낼 때 Apidog는 자동으로 토큰을 Authorization 헤더에 추가하여 "Bearer"에 붙여서 발송합니다.

URL에 토큰을 포함하고 싶다면, 페이지의 구성 옵션에서 토큰의 "위치 추가"를 수정하고 "쿼리 매개변수"를 선택할 수도 있습니다.

요약

OAuth 2.0은 제3자 애플리케이션이 보호된 리소스에 안전하게 접근할 수 있도록 하는 개방형 표준 인증 프로토콜입니다. 인증 코드 인증 프로세스는 일반적인 인증 방법이며, Facebook에서 사용됩니다.

구현 중에는 애플리케이션을 생성하고, 콜백 주소를 구성하고, 액세스 토큰을 얻고, Apidog를 사용하여 디버깅해야 합니다. 액세스 토큰을 얻은 후, 해당 토큰을 사용하여 Facebook의 공개 리소스를 호출할 수 있습니다.

button