JavaScript SDK를 사용하는 웹용 Facebook 로그인
이 문서에서는 웹페이지에서 JavaScript용 Facebook SDK를 사용하여 Facebook 로그인을 구현하는 방법을 단계별로 설명합니다.
시작하기 전에
다음 항목이 필요합니다.
- 웹사이트의 Facebook 앱 ID
기본 자동 로그인 예
다음의 코드 샘플은 Javascript용 Facebook SDK를 웹페이지에 추가하고 SDK를 초기화하는 방법을 보여주고, Facebook에 로그인한 상태인 경우 이름과 이메일이 표시됩니다. Facebook에 로그인되어 있지 않으면 로그인 대화 상자 팝업 창이 자동으로 표시됩니다.
public_profile 권한 은 이름, 프로필 사진과 같은 공개된 정보를 가져오고 email 권한 은 앱 검수가 필요하지 않으므로 Facebook 로그인을 사용하는 모든 앱에 자동으로 부여됩니다.
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<h2>Add Facebook Login to your webpage</h2>
<!-- Set the element id for the JSON response -->
<p id="profile"></p>
<script>
<!-- Add the Facebook SDK for Javascript -->
(function(d, s, id){
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')
);
window.fbAsyncInit = function() {
<!-- Initialize the SDK with your app and the Graph API version for your app -->
FB.init({
appId : '{your-facebook-app-id}',
xfbml : true,
version : '{the-graph-api-version-for-your-app}'
});
<!-- If you are logged in, automatically get your name and email adress, your public profile information -->
FB.login(function(response) {
if (response.authResponse) {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', {fields: 'name, email'}, function(response) {
document.getElementById("profile").innerHTML = "Good to see you, " + response.name + ". i see your email address is " + response.email
});
} else {
<!-- If you are not logged in, the login dialog will open for you to login asking for permission to get your public profile and email -->
console.log('User cancelled login or did not fully authorize.'); }
});
};
</script>
</body>
</html>1. Facebook 로그인을 위한 JavaScript SDK 활성화
앱 대시보드에서 앱을 선택하고 제품 추가로 스크롤합니다. Facebook 로그인 카드에서 설정을 선택합니다. 왼쪽 탐색 패널에서 설정을 선택하고, 성공적인 승인을 위해 클라이언트 OAuth 설정 아래의 유효한 OAuth 리디렉션 URI 필드에 리디렉션 URL을 입력합니다.
JavaScript SDK로 로그인 토글을 '예'로 설정하여 JavaScript SDK로 로그인하도록 지정한 후에 JavaScript SDK에 허용된 도메인 리스트에 SDK를 호스팅하는 페이지의 도메인을 입력합니다. 이렇게 하면 승인된 도메인의 콜백에만 액세스 토큰이 반환됩니다. Facebook JavaScript SDK를 사용하는 인증 작업에는 https 페이지만 지원됩니다.
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 유형 | 설명 |
|---|---|
| 사용자가 Facebook에 로그인하고 웹페이지에 로그인했습니다. |
| 사용자가 Facebook에는 로그인했지만 웹페이지에 로그인하지 않았습니다. |
| 사용자가 Facebook에 로그인하지 않았으므로 웹페이지에 로그인했는지 알 수 없습니다. 또는 이전에 FB.logout()이 호출되었으므로 Facebook에 연결할 수 없습니다. |
상태가 connected이고 다음과 같은 authResponse 매개변수가 응답에 포함됩니다.
authResponse 매개변수 | 값 |
|---|---|
| 웹페이지 사용자의 액세스 토큰입니다. |
| 토큰이 만료된 시점의 UNIX 타임스탬프입니다. 토큰이 만료되면 사용자는 다시 로그인해야 합니다. |
| 로그인이 만료되기 전까지의 시간(초)이며, 사용자는 다시 로그인해야 합니다. |
| 웹페이지 사용자에 대한 정보를 포함하는 서명된 매개변수입니다. |
| 웹페이지 사용자의 ID입니다. |
JavaScript SDK에서는 로그인 상태를 자동으로 감지하므로 이 동작을 활성화하기 위해 어떠한 추가 작업도 수행할 필요가 없습니다.
3. 사용자 로그인
사용자가 웹페이지를 열었지만 로그인하지 않았거나 Facebook에 로그인하지 않은 경우 로그인 대화 상자를 사용하여 둘 모두에 로그인하도록 메시지를 표시할 수 있습니다. Facebook에 로그인하지 않은 경우 먼저 Facebook에 로그인하도록 메시지를 표시한 다음, 웹페이지에 로그인하도록 메시지를 표시합니다.
사용자가 로그인하도록 하는 방법에는 다음 두 가지가 있습니다.
- JavaScript SDK 로그인 대화 상자
A. 로그인 버튼을 사용한 로그인
Facebook 로그인 버튼을 사용하려면 플러그인 구성 도구로 로그인 버튼을 맞춤 설정하고 코드를 가져옵니다.
B. JavaScript SDK 로그인 대화 상자를 사용한 로그인
자체 로그인 버튼을 사용하려는 경우 FB.login()을 호출하면 로그인 대화 상자를 호출할 수 있습니다.
FB.login(function(response){
// handle the response
});추가 권한 요청
사용자가 HTML 버튼을 클릭하면 로그인 대화 상자가 포함된 팝업창이 표시됩니다. 이 대화 상자에서 사용자의 데이터에 액세스할 권한을 요청할 수 있습니다. scope 매개변수는 FB.login() 함수 호출과 함께 전달될 수 있습니다. 이 선택적 매개변수는 사용자의 데이터에 액세스할 수 있도록 웹페이지에 부여해야 하는 권한을 쉼표로 구분한 리스트입니다. 외부 사용자가 Facebook 로그인을 사용하려면 고급 public_profile 권한이 필요합니다.
호출 샘플
다음은 로그인하는 사용자에게 웹페이지가 공개 프로필과 이메일에 액세스할 권한을 요청하는 예시입니다.
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 버전으로 바꿉니다. 이전 버전을 사용해야 할 특별한 이유가 없다면 가장 최신 버전( v21.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 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>
<!-- Load the JS SDK asynchronously -->
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
</body>
</html>