Facebook 로그인

기기용 Facebook 로그인

Facebook 포털에 대해 도움이 필요한 경우 Portal 고객 센터를 방문하세요.

스마트 TV, 카메라, 프린터 및 다른 기기에 로그인하기 위한 기기용 Facebook 로그인 코드를 입력하려면 기기용 Facebook 페이지를 방문하세요.

기기용 Facebook 로그인을 구현하면 사용자는 Facebook 계정으로 앱이나 서비스에 로그인할 수 있습니다. 이 기능을 사용하면 사용자가 스마트 TV, 디지털 사진 프레임 또는 사물 인터넷(IoT) 기기 등과 같이 입력이 제한되거나 디스플레이 기능이 있는 기기에 로그인할 수 있습니다.

기기 로그인을 사용하면 기기에 영숫자 코드가 표시되고 사용자에게 데스크톱 PC나 스마트폰의 웹페이지에 입력하라는 메시지가 표시됩니다. 그러면 앱 또는 서비스 사용자가 권한을 부여할 수 있습니다. 앱에 권한이 부여되고 나면 앱에서 그래프 API 요청을 수행하여 사용자를 식별하고 기기에서 사용자 환경을 맞춤 설정하기 위한 정보를 얻는 데 사용할 액세스 토큰이 기기에 전송됩니다.

Apple TV, Android TV 또는 Fire TV를 위한 TV 앱을 만드는 경우 tvOS용 Facebook SDK 또는 Android용 Facebook SDK를 사용해야 합니다.

이 가이드에서는 위의 SDK를 사용하지 않고 기기 로그인을 직접 통합하는 방법을 설명합니다.

사용자 환경

이러한 가이드에서는 기기와 서비스 전체에서 명확하고 안전하며 일관된 로그인 환경을 제공하는 방법에 대해 설명합니다.

1. 행동 유도

먼저 사용자 환경에서 Facebook에 로그인하거나 연결하도록 요청할 시점을 고려합니다. 기기에 따라 즉시 요청하거나 나중에 요청할 수 있습니다.

사용자 환경의 사용 편의성, 일관성 및 안정성을 최대화하려면 공식 Facebook 로그인 버튼과 최대한 비슷하게 버튼을 디자인합니다.

즉, 시각적 디자인 측면에서 다음을 수행해야 한다는 의미입니다.

  1. 버튼의 레이블을 "Facebook으로 로그인" 또는 "Facebook에 연결"로 지정합니다.
  2. 흰색과 공식 Facebook 브랜드 파란색(#1877F2)을 사용합니다.
  3. 기기에서 그래픽 표시를 지원하는 경우 공식 로고 "f"에 통합할 수 있습니다. Facebook 브랜드 가이드라인에 따라 로고는 항상 흰색이나 Facebook 파란색(#1877F2)이어야 합니다.

적절한 경우 로그인의 이점을 설명합니다. 예를 들어 "친구들이 보고 있는 내용 확인" 또는 "Facebook 사진첩에서 사진 보기"와 같은 설명을 입력할 수 있습니다.

2. 코드 표시

행동 유도 버튼을 클릭하면 기기에서 Facebook API를 호출하고 코드가 반환됩니다.

개발자의 인터페이스에는 사용자에게 웹사이트를 방문하여 "다음으로, 데스크톱이나 스마트폰의 facebook.com/device(http://facebook.com/device)에서 이 코드를 입력하세요."라는 메시지가 표시되면 코드를 입력하라고 합니다. Facebook의 기기 로그인 API에서 받은 전체 코드가 표시됩니다. 코드 길이는 6~12자리입니다.

Close 또는 Cancel 버튼을 포함하여 사용자가 기기 로그인 플로를 취소하게 할 수 있습니다. 이러한 버튼을 누르면 초기 로그인 화면으로 돌아가야 합니다.

코드가 화면에 표시되면 사용자가 개발자 앱을 승인했는지 확인하기 위해 기기에서 기기 로그인 API를 폴링합니다. 몇 분 후에도 사용자가 코드를 입력하지 않은 경우 기기 로그인 API에서 code_expired 오류를 반환합니다. 기기에서 이 오류가 발생하면 로그인 플로를 취소하고 인터페이스에 행동 유도 버튼이 표시되어야 합니다.

QR 코드는 URL에 포함된 사용자 코드를 사용해서 생성할 수도 있습니다. 이렇게 하려면 URL에 user_code 매개변수를 추가하면 됩니다.

https://www.facebook.com/device?user_code=<USER_CODE>

3. 인증

데스크톱이나 모바일 브라우저에서 facebook.com/device로 이동하면 표시되는 플로입니다. 먼저 코드를 입력할 수 있는 다음과 같은 텍스트 필드가 표시됩니다.

코드를 입력하고 Continue 를 클릭하고 나면 다음과 같이 부여할 권한을 선택할 수 있습니다.

그러면 로그인 플로가 성공적이었음을 알 수 있으며 다음과 같은 확인 메시지가 표시됩니다.

4. 로그인 성공 확인

기기의 인터페이스에서도 확인 메시지를 표시해야 합니다. 여기에 사용자의 이름과 Facebook 프로필 사진(가능한 경우)을 포함하는 것이 좋습니다.

사용자가 Continue 버튼을 클릭할 때까지 기기에 이 확인 메시지를 표시합니다. 다른 위치에 있는 컴퓨터에서 코드를 입력해야 할 수도 있으므로 계속하기 전에 기기로 돌아와 확인 메시지를 보는 데 시간이 걸릴 수 있습니다.

사용자가 Continue 를 클릭하고 나면 기기에 개인화된 멋진 환경이 표시될 수 있습니다.

5. 로그아웃 또는 연결 끊기

사용자가 기기에서 로그아웃하면 기기에서 해당 사용자의 Facebook 연결에 대한 기록을 저장하지 말아야 합니다. 이와 같이 동작하도록 기기 메뉴에서 Log out from Facebook 또는 Disconnect from Facebook 옵션을 제공합니다.

이 옵션을 선택하면 기기의 메모리에서 저장된 액세스 토큰을 삭제해야 합니다. 데이터베이스나 클라우드 저장소에 액세스 토큰을 저장한 경우 해당 위치에서도 삭제해야 합니다. 액세스 토큰을 무효화하기 위해 API를 호출하지 않아도 됩니다.

사용자가 로그아웃하고 나면 기기에서 1단계의 초기 행동 유도를 표시해야 합니다.

기기용 로그인 구현

기기용 Facebook 로그인은 인터넷을 통해 직접 HTTP를 호출하는 기기용입니다. 다음은 기기에서 수행할 수 있는 API 호출과 응답입니다.

1. 기기용 로그인 활성화

앱의 대시보드 를 읽어들이고 제품 > Facebook 로그인 > 설정으로 이동하여 기기에서 로그인을 '예'로 변경합니다.

2. 코드 생성

사용자가 Connect to Facebook 또는 Log in with Facebook 행동 유도 버튼을 클릭하면 기기에서 다음을 위해 HTTP POST를 수행해야 합니다.

POST https://graph.facebook.com/v2.6/device/login
       access_token=<YOUR_APP_ID|CLIENT_TOKEN>
       scope=<COMMA_SEPARATED_PERMISSION_NAMES> // e.g. public_profile,user_likes
       redirect_uri=<VALID_OAUTH_REDIRECT_URL>

scope 매개변수는 선택 사항이며 로그인 검수에서 사용하도록 승인된 로그인 권한의 쉼표로 구분된 리스트가 포함되어 있습니다.

CLIENT_TOKEN 은 앱 설정 -> 고급에 포함되어 있으며 파이프 문자(|)로 구분하여 앱 ID와 결합해야 완전한 access_token을 구성할 수 있습니다.

redirect_uri 매개변수는 필요에 따라 선택할 수 있습니다. URL을 제공하면 사용자가 로그인을 완료한 후 사용자가 해당 URL로 리디렉션됩니다. 이를 통해 사용자가 추가 계정 관리를 위해 앱의 웹사이트에 로그인할 수 있습니다. 이 URL은 앱 설정 -> 고급에 구성된 유효한 OAuth 리디렉션 URL이어야 합니다. 응답 양식은 다음과 같습니다.

{
  "code": "92a2b2e351f2b0b3503b2de251132f47",
  "user_code": "A1NWZ9",
  "verification_uri": "https://www.facebook.com/device",
  "expires_in": 420,
  "interval": 5
}

이 응답이 의미하는 바는 다음과 같습니다.

  1. 기기에 "A1NWZ9" 문자열이 표시됩니다.
  2. 사용자에게 "facebook.com/device"로 이동하여 이 코드를 입력하라고 안내합니다.
  3. 코드가 420초 내에 만료하므로 액세스 토큰을 받지 못하면 이후에는 로그인 플로를 취소해야 합니다.
  4. 인증에 성공했는지 확인하려면 기기에서 5초마다 기기 로그인 API를 폴링해야 합니다.

3. 코드 표시

기기에서 user_code 를 표시하고 사용자에게 PC나 스마트폰에서 verification_uri (예: facebook.com/device)를 방문하도록 표시해야 합니다. 사용자 환경 을 참조하세요.

4. 인증을 위해 폴링

사용자가 성공적으로 앱을 승인했는지 확인하려면 기기에서 기기 로그인 API를 폴링해야 합니다. 1단계 의 호출에 응답하여 interval(5초)마다 이 작업을 수행해야 합니다. 기기에서는 다음을 위해 폴링해야 합니다.

POST https://graph.facebook.com/v2.6/device/login_status
       access_token=<YOUR_APP_ID|CLIENT_TOKEN>
       code=<LONG_CODE_FROM_STEP_1> // e.g. "92a2b2e351f2b0b3503b2de251132f47"

이 API 호출의 응답은 승인 플로에서 사용자의 위치에 따라 달라집니다. 액세스 토큰 또는 분석할 구체적인 하위 코드가 포함된 오류 개체를 받게 됩니다.

오류 하위 코드 응답 예시 의미

N/A

{"access_token": "ABCD...", "expires_in" : 5183996 }

사용자가 기기를 성공적으로 인증했습니다. 이제 기기에서 access_token 값을 사용하여 인증된 API를 호출합니다.

1349174

{"error":{"message":"This request requires the user to take a pending action","code":31,"error_subcode":1349174,"error_user_title":"Device Login Authorization Pending","error_user_msg":"User has not yet authorized your application. Continue polling."}}

사용자가 아직 앱을 인증하지 않았습니다. 1단계 의 응답에서 정해진 비율로 계속 폴링합니다.

1349172

{"error":{"message":"User request limit reached","code":17,"error_subcode":1349172,"error_user_title":"OAuth Device Excessive Polling","error_user_msg":"Your device is polling too frequently. Space your requests with a minium interval of 5 seconds."}}

기기가 너무 자주 폴링합니다. 첫 번째 API 호출에서 정해진 간격으로 폴링 속도를 저하시킵니다.

1349152

{"error":{"message":"The session has expired""code":463,"error_subcode":1349152, "error_user_title":"Activation Code Expired","error_user_msg":"The code you entered has expired. Please go back to your device for a new code and try again."}}

기기 코드가 만료되었습니다. 기기 로그인 플로를 취소하고 사용자를 초기 화면으로 돌려보냅니다.

5. 로그인 성공 확인

개발자가 액세스 토큰을 받으면 사용자가 앱을 성공적으로 승인한 것입니다. 기기에서 이 액세스 토큰을 유지해야 합니다.

로그인 프로세스가 성공했다는 것을 사용자가 알 수 있게 하기 위해, 기기에 사용자의 이름을 표시해야 하며 가능한 경우 프로필 사진도 표시합니다. 이는 사용자가 Continue 를 클릭할 때까지 표시됩니다. 사용자 이름과 프로필 사진을 얻으려면 기기에서 표준 그래프 API를 호출해야 합니다.

GET https://graph.facebook.com/v2.3/me?
      fields=name,picture&amp;
      access_token=<USER_ACCESS_TOKEN>

다음 양식으로 응답을 수신하게 됩니다.

{
  "name": "John Doe", 
  "picture": {
    "data": {
      "is_silhouette": false, 
      "url": "https://fbcdn.akamaihd.net/hmac...ile.jpg"
    }
  }, 
  "id": "2023462875238472"
}

기기에서 Continue 버튼을 클릭할 때까지 사용자의 이름과 프로필 사진을 표시합니다.

6. 액세스 토큰 저장

그래프 API에 다른 요청을 수행하려면 기기에서 액세스 토큰을 유지해야 합니다.

기기 로그인 액세스 토큰은 최대 60일 동안 유효할 수 있지만 많은 경우에서 무효화될 수 있습니다. 예를 들어 사용자가 Facebook 비밀번호를 변경하면 액세스 토큰이 무효화됩니다.

토큰이 유효하지 않으면 기기의 메모리에서 토큰을 삭제해야 합니다. 기기 사용자가 1단계의 기기 로그인 플로를 다시 수행하여 유효한 새 토큰을 가져와야 합니다.

문제 해결

HTTP를 통해 기기 플로를 요청할 수 있나요?
OAuth 2에는 TLS/HTTPS를 사용해야 합니다.

GET 메서드를 사용하여 기기 플로를 요청할 수 있나요?
모든 기기 플로 요청은 POST 요청이어야 합니다.

기기 로그인 액세스 토큰은 어떻게 갱신할 수 있나요?
기기 로그인 액세스 토큰은 최대 60일 동안 유효합니다.

토큰이 유효하지 않으면 기기의 메모리에서 토큰을 삭제해야 합니다. 기기 사용자가 1단계 에 설명된 기기 로그인 플로를 다시 수행하여 유효한 새 토큰을 받아야 합니다.

토큰 갱신에 대한 자세한 내용은 액세스 토큰 을 참조하세요.

POST 요청 시 Invalid API method 오류가 발생합니다. 무엇이 문제인가요?
POST 요청을 할 때 다음과 같은 오류를 받는 경우

{"error":{"message":"Invalid API method","type":"OAuthException","code":3}}

앱에서 '기기에서 로그인'을 활성화해야 할 수도 있습니다.

앱의 대시보드 를 읽어들이고 제품 > Facebook 로그인 > 설정으로 이동하여 기기에서 로그인을 '예'로 설정합니다.

기기 로그인 액세스 토큰이 유효하지 않습니다. 어떻게 해야 하나요?
액세스 토큰이 유효하지 않으면 기기의 메모리에서 토큰을 삭제하고 새 토큰을 얻어야 합니다. 기기 사용자가 1단계 에 설명된 기기 로그인 플로를 다시 수행하여 유효한 새 토큰을 받아야 합니다.