나의 웹사이트에 FACEBOOK 계정으로 로그인 하기
국내는 물론 많은 해외의 웹사이트와 모바일 앱에서는 페이스북 아이디로 로그인할 수 있는 기능들을 제공하고 있습니다. 2008년 처음 Facebook에서 Facebook Connect 라는 연동 플랫폼을 제공한 이후 이 기능은 많은 피드백을 통해 개선되어 왔습니다. Facebook Login 이 구현되면 이 후 웹사이트 또는 모바입 앱에서 Facebook API 호출을 통한 연동이 쉽게 이루어집니다. 현재 시점에서 나의 웹사이트에서 Facebook 계정을 통해 로그인 하는 기능을 구현하는 방법에 대해 포스팅해보도록 하겠습니다.
FACEBOOK APP 등록
웹사이트에 Facebook 계정으로 로그인하기 위해서는 먼저 웹사이트가 Facebook app으로 등록되어야 합니다.
Facebook App Dashboard 에서 아래의 그림과 같이 웹사이트 또는 애플리케이션의 기본정보를 입력하면 간단히 앱 등록을 마칠 수 있습니다. Namespace는 영문소문자와 언더스코어만 가능합니다.
앱 등록이 완료되면 아래와 같이 앱 관리화면에서 Settings 메뉴를 클릭하여 세부정보를 수정하도록 합니다. 먼저, + Add Platform 버튼을 클릭하여 웹사이트를 새로 등록합니다. 이렇게 등록된 웹사이트의 주소를 기반으로 App Domains 를 정하게 됩니다. App ID는 추후에 Javascript 소스코드에서 사용되므로 미리 기억해 두도록 하겠습니다.
FACEBOOK JAVASCRIPT SDK 추가
Facebook Javascript SDK 초기화 코드를 웹사이트 HTML 페이지의태그 제일 앞 부분에 추가하도록 하겠습니다.
이 코드는 javascript SDK를 HTML 페이지에 로드하고 초기화하는 작업을 진행합니다. 그 외에도 테스트를 위한 코드들도 포함되어 있으니 추후에 이를 용도에 맞도록 잘 수정해서 사용 가능합니다. 아래의 코드에서 {your-app-id} 부분을 위에서 얻은 App ID로 변경하도록 하겠습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
|
<script>
// This is called with the results from from FB.getLoginStatus().
function statusChangeCallback(response) {
console.log(‘statusChangeCallback’);
console.log(response);
// The response object is returned with a status field that lets the
// app know the current login status of the person.
// Full docs on the response object can be found in the documentation
// for FB.getLoginStatus().
if (response.status === ‘connected’) {
// Logged into your app and Facebook.
testAPI();
} else if (response.status === ‘not_authorized’) {
// The person is logged into Facebook, but not your app.
document.getElementById(‘status’).innerHTML = ‘Please log ‘ +
‘into this app.’;
} else {
// The person is not logged into Facebook, so we’re not sure if
// they are logged into this app or not.
document.getElementById(‘status’).innerHTML = ‘Please log ‘ +
‘into Facebook.’;
}
}
// This function is called when someone finishes with the Login
// Button. See the onlogin handler attached to it in the sample
// code below.
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
window.fbAsyncInit = function() {
FB.init({
appId : ‘{your-app-id}’,
cookie : true, // enable cookies to allow the server to access
// the session
xfbml : true, // parse social plugins on this page
version : ‘v2.0’ // use version 2.0
});
// Now that we’ve initialized the JavaScript SDK, we call
// FB.getLoginStatus(). This function gets the state of the
// person visiting this page and can return one of three states to
// the callback you provide. They can be:
//
// 1. Logged into your app (‘connected’)
// 2. Logged into Facebook, but not your app (‘not_authorized’)
// 3. Not logged into Facebook and can’t tell if they are logged into
// your app or not.
//
// These three cases are handled in the callback function.
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
};
// Load the SDK asynchronously
(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 = “//connect.facebook.net/ko_KR/sdk.js#xfbml=1&appId=1408018492811950&version=v2.0”;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));
// Here we run a very simple test of the Graph API after login is
// successful. See statusChangeCallback() for when this call is made.
function testAPI() {
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>
|
위의 코드에서 보이는 channel file 은 일부 브라우저에서 cross-domain communication 문제를 발생시킬 수 있다. channel.html 파일의 내용은 아래와 같이 한 줄이 될 수도 있다.
|
1
|
<del><script src=“//connect.facebook.net/en_US/all.js”></script></del>
|
로그인 코드 추가
이제 아래의 로그인 처리코드를 HTML 페이지에 추가해 보도록 하겠습니다. 아래의 코드는 위에서 작성한 javascript SDK 로드 와 초기화 코드를 포함한 전체 예제 코드입니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
|
<!DOCTYPE html>
<html>
<head>
<title>Facebook Login JavaScript Example</title>
<meta charset=“UTF-8”>
</head>
<body>
<script>
// This is called with the results from from FB.getLoginStatus().
function statusChangeCallback(response) {
console.log(‘statusChangeCallback’);
console.log(response);
// The response object is returned with a status field that lets the
// app know the current login status of the person.
// Full docs on the response object can be found in the documentation
// for FB.getLoginStatus().
if (response.status === ‘connected’) {
// Logged into your app and Facebook.
testAPI();
} else if (response.status === ‘not_authorized’) {
// The person is logged into Facebook, but not your app.
document.getElementById(‘status’).innerHTML = ‘Please log ‘ +
‘into this app.’;
} else {
// The person is not logged into Facebook, so we’re not sure if
// they are logged into this app or not.
document.getElementById(‘status’).innerHTML = ‘Please log ‘ +
‘into Facebook.’;
}
}
// This function is called when someone finishes with the Login
// Button. See the onlogin handler attached to it in the sample
// code below.
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
window.fbAsyncInit = function() {
FB.init({
appId : ‘{your-app-id}’,
cookie : true, // enable cookies to allow the server to access
// the session
xfbml : true, // parse social plugins on this page
version : ‘v2.0’ // use version 2.0
});
// Now that we’ve initialized the JavaScript SDK, we call
// FB.getLoginStatus(). This function gets the state of the
// person visiting this page and can return one of three states to
// the callback you provide. They can be:
//
// 1. Logged into your app (‘connected’)
// 2. Logged into Facebook, but not your app (‘not_authorized’)
// 3. Not logged into Facebook and can’t tell if they are logged into
// your app or not.
//
// These three cases are handled in the callback function.
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
};
// Load the SDK asynchronously
(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 = “//connect.facebook.net/en_US/sdk.js”;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));
// Here we run a very simple test of the Graph API after login is
// successful. See statusChangeCallback() for when this call is made.
function testAPI() {
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>
<!—
Below we include the Login Button social plugin. This button uses
the JavaScript SDK to present a graphical Login button that triggers
the FB.login() function when clicked.
—>
<fb:login–button scope=“public_profile,email” onlogin=“checkLoginState();”>
</fb:login–button>
<div id=“status”>
</div>
</body>
</html>
|
이제 해당 웹페이지를 웹브라우저를 통해 접속해보면 Javascirpt console 상에서 testAPI() 함수가 사용자의 이름과 메시지를 표시하는 것을 확인할 수 있습니다.
로컬에서 테스트 하기
만약, Facebook Login을 로컬에서 테스트 하는 경우 아래와 같은 오류 메시지가 javascript console 에 표시되고 로그인이 동작하지 않음을 확인할 수 있습니다.
입력하신 URL은 해당 앱에서 허용되지 않습니다.: One or more of the given URLs is not allowed by the App’s settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of
이러한 경우 Facebook에 등록한 앱의 도메인 설정과 테스트를 위해 웹브라우저에 입력한 도메인(localhost)가 맞지 않아서 발생하는 문제입니다.
이를 해결하기 위해서는 먼저 /etc/hosts (Windows의 경우 C:/WINDOWS/system32/drivers/etc/hosts) 파일을 열어서 아래와 같은 내용을 자신의 도메인에 맞게 추가한 뒤 해당 도메인을 이용하여 접속 테스트를 진행해야만 합니다.
|
1
|
127.0.0.1 local.your_domain.com
|
이제 테스트를 위해 웹브라우저에 로컬 서버 주소인 localhost 를 입력하는 대신 local.your_domain.com 을 입력해 보도록 하겠습니다.
