JavaScript SDK를 사용하는 웹용 Facebook 로그인

이 문서에서는 웹페이지에서 JavaScript용 Facebook SDK를 사용하여 Facebook 로그인을 구현하는 방법을 단계별로 설명합니다.

Facebook 사용자이고 계정 로그인에 문제가 있다면 고객 센터를 방문하세요.

시작하기 전에

다음 항목을 준비해야 합니다.

어떤 이유로 JavaScript SDK를 사용할 수 없는 경우 수동으로 로그인 플로를 빌드하여 Facebook 로그인을 구현할 수 있습니다.

1. 앱 대시보드에 리디렉션 URL 입력

앱 대시보드에서 앱을 선택하고 제품 추가로 스크롤합니다. Facebook 로그인 카드에서 설정을 선택합니다. 왼쪽 탐색 패널에서 설정을 선택하고, 성공적인 승인을 위해 클라이언트 OAuth 설정 아래의 유효한 OAuth 리디렉션 URI 필드에 리디렉션 URL을 입력합니다.

2. 사용자의 로그인 상태 확인

웹페이지를 읽어들일 때 첫 번째 단계로 사용자가 Facebook 로그인을 사용하여 이미 웹페이지에 로그인했는지 확인합니다. FB.getLoginStatus를 호출하면 로그인 상태를 가져오기 위해 Facebook에 대한 호출을 시작합니다. 그러면 Facebook에서 이 결과를 사용하여 콜백 함수를 호출합니다.

샘플 호출

FB.getLoginStatus(function(response) {
    statusChangeCallback(response);
});

샘플 JSON 응답

{
    status: 'connected',
    authResponse: {
        accessToken: '{access-token}',
        expiresIn:'{unix-timestamp}',
        reauthorize_required_in:'{seconds-until-token-expires}',
        signedRequest:'{signed-parameter}',
        userID:'{user-id}'
    }
}

status는 웹페이지 사용자의 로그인 상태를 지정합니다. status는 다음 중 하나일 수 있습니다.

`Status` 유형	설명
`connected`	사용자가 Facebook에 로그인하고 웹페이지에 로그인했습니다.
`not_authorized`	사용자가 Facebook에는 로그인했지만 웹페이지에 로그인하지 않았습니다.
`unknown`	사용자가 Facebook에 로그인하지 않았으므로 웹페이지에 로그인했는지 알 수 없습니다. 또는 이전에 FB.logout()이 호출되었으므로 Facebook에 연결할 수 없습니다.

상태가 connected이고 다음과 같은 authResponse 매개변수가 응답에 포함됩니다.

`authResponse` 매개변수	값
`accessToken`	웹페이지 사용자의 액세스 토큰입니다.
`expiresIn`	토큰이 만료된 시점의 UNIX 타임 스탬프입니다. 토큰이 만료되면 사용자는 다시 로그인해야 합니다.
`reauthorize_required_in`	로그인이 만료되기 전까지의 시간(초)이며, 사용자는 다시 로그인해야 합니다.
`signedRequest`	웹페이지 사용자에 대한 정보를 포함하는 서명된 매개변수입니다.
`userID`	웹페이지 사용자의 ID입니다.

JavaScript SDK에서는 로그인 상태를 자동으로 감지하므로 이 동작을 활성화하기 위해 어떠한 추가 작업도 수행할 필요가 없습니다.

사용자가 웹페이지를 열었지만 로그인하지 않았거나 Facebook에 로그인하지 않은 경우 로그인 대화 상자를 사용하여 둘 모두에 로그인하도록 메시지를 표시할 수 있습니다. Facebook에 로그인하지 않은 경우 먼저 Facebook에 로그인하도록 메시지를 표시한 다음, 웹페이지에 로그인하도록 메시지를 표시합니다.

사용자가 로그인하도록 하는 방법은 다음 두 가지가 있습니다.

Facebook 로그인 버튼
JavaScript SDK 로그인 대화 상자

A. 로그인 버튼을 사용한 로그인

Facebook 로그인 버튼을 사용하려면 플러그인 구성 도구로 로그인 버튼을 맞춤 설정하고 코드를 가져옵니다.

플러그인 구성 도구

Width

버튼 크기

large

버튼 텍스트

continue_with

로그아웃 버튼 사용

사용자가 Facebook에 로그인할 때 이름과 프로필 사진 포함 [?]

코드 받기

B. Javascript SDK 로그인 대화 상자를 사용한 로그인

자체 로그인 버튼을 사용하려는 경우 FB.login()을 호출하면 로그인 대화 상자를 호출할 수 있습니다.

FB.login(function(response){
  // handle the response 
});

추가 권한 요청

사용자가 HTML 버튼을 클릭하면 로그인 대화 상자가 포함된 팝업 창이 표시됩니다. 이 대화 상자에서 사용자의 데이터에 액세스할 권한을 요청할 수 있습니다. scope 매개변수는 FB.login() 함수 호출과 함께 전달될 수 있습니다. 이 선택적 매개변수는 사용자의 데이터에 액세스할 수 있도록 웹페이지에 부여해야 하는 권한을 쉼표로 구분한 리스트입니다.

샘플 호출

다음은 로그인하는 사용자에게 웹페이지가 공개 프로필과 이메일에 액세스할 권한을 요청하는 예시입니다.

FB.login(function(response) {
  // handle the response
}, {scope: 'public_profile,email'});

로그인 대화 상자 응답 처리

연결 또는 취소 응답은 FB.login()을 호출했을 때 지정된 콜백으로 authResponse 개체를 반환합니다. 이 응답은 FB.login() 내에서 감지하여 처리할 수 있습니다.

샘플 호출

FB.login(function(response) {
  if (response.status === 'connected') {
    // Logged into your webpage and Facebook.
  } else {
    // The person is not logged into your webpage or we are unable to tell. 
  }
});

4. 사용자 로그아웃

JavaScript SDK 함수 FB.logout()을 버튼이나 링크에 연결하여 웹페이지에서 사용자를 로그아웃시킬 수 있습니다.

샘플 호출

FB.logout(function(response) {
   // Person is now logged out
});

참고: 이 함수를 호출하면 Facebook에서도 사용자가 로그아웃될 수도 있습니다.

고려해야 할 시나리오

사용자가 Facebook에 로그인한 다음, 웹페이지에 로그인합니다. 앱에서 로그아웃하더라도 사용자는 여전히 Facebook에 로그인되어 있습니다.
사용자가 로그인 플로의 일환으로 웹페이지와 Facebook에 로그인합니다. 앱에서 로그아웃하면 Facebook에서도 로그아웃되어 있습니다.
사용자가 다른 웹페이지를 위한 로그인 플로의 일환으로 다른 웹페이지와 Facebook에 로그인한 다음, 여러분의 웹페이지에 로그인합니다. 둘 중 하나의 웹페이지에서 로그아웃하면 Facebook에서도 로그아웃되어 있습니다.

또한 웹페이지에서 로그아웃하더라도 로그인 시에 사용자가 웹페이지에 부여한 권한은 취소되지 않습니다. 권한 취소는 별도로 수행해야 합니다. 로그아웃한 사용자가 다시 로그인할 때 로그인 대화 상자가 보이지 않도록 웹페이지를 빌드하세요.

전체 코드 예시

이 코드는 HTML 페이지에 JavaScript SDK를 읽어들여 초기화합니다. {app-id}를 앱 ID로 바꾸고, {api-version}을 사용할 그래프 API 버전으로 바꿉니다. 이전 버전을 사용해야 하는 특별한 이유가 없는 한 가장 최근 버전을 지정하세요. v5.0.

<!DOCTYPE html>
<html>
<head>
<title>Facebook Login JavaScript Example</title>
<meta charset="UTF-8">
</head>
<body>
<script>

  function statusChangeCallback(response) {  // Called with the results from FB.getLoginStatus().
    console.log('statusChangeCallback');
    console.log(response);                   // The current login status of the person.
    if (response.status === 'connected') {   // Logged into your webpage and Facebook.
      testAPI();  
    } else {                                 // Not logged into your webpage or we are unable to tell.
      document.getElementById('status').innerHTML = 'Please log ' +
        'into this webpage.';
    }
  }


  function checkLoginState() {               // Called when a person is finished with the Login Button.
    FB.getLoginStatus(function(response) {   // See the onlogin handler
      statusChangeCallback(response);
    });
  }


  window.fbAsyncInit = function() {
    FB.init({
      appId      : '{app-id}',
      cookie     : true,                     // Enable cookies to allow the server to access the session.
      xfbml      : true,                     // Parse social plugins on this webpage.
      version    : '{api-version}'           // Use this Graph API version for this call.
    });


    FB.getLoginStatus(function(response) {   // Called after the JS SDK has been initialized.
      statusChangeCallback(response);        // Returns the login status.
    });
  };

  
  (function(d, s, id) {                      // Load the SDK asynchronously
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "https://connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));

 
  function testAPI() {                      // Testing Graph API after login.  See statusChangeCallback() for when this call is made.
    console.log('Welcome!  Fetching your information.... ');
    FB.api('/me', function(response) {
      console.log('Successful login for: ' + response.name);
      document.getElementById('status').innerHTML =
        'Thanks for logging in, ' + response.name + '!';
    });
  }

</script>


//  The JS SDK Login Button 

<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
</fb:login-button>

<div id="status">
</div>

</body>
</html>