주메뉴 바로가기 견적문의 바로가기 주내용 바로가기
Blue Red Orange Green Grey
Mobile/HTML5
[링크]나의 웹사이트에 Facebook 계정으로 로그인 하기
입력 2015.01.22 오후 04:49 | 수정 2015.02.25 오후 02:12 | 조회 858
x-mind
https://guruble.wordpress.com/2014/05/13/나의-웹사이트에-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 파일의 내용은 아래와 같이 한 줄이 될 수도 있다.
<script src="//connect.facebook.net/en_US/all.js"></script>
 
로그인 코드 추가
이제 아래의 로그인 처리코드를 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() 함수가 사용자의 이름과 메시지를 표시하는 것을 확인할 수 있습니다.
Security number

click to select icon

  • Very Happy
  • Smile
  • Sad
  • Surprised
  • Shocked
  • Confused
  • Cool
  • Laughing
  • Mad
  • Razz
  • Embarassed
  • Crying or Very sad
  • Evil or Very Mad
  • Twisted Evil
  • Rolling Eyes
  • Wink
  • Exclamation
  • Question
  • Idea
  • Arrow
  • Sux
  • Good
  • Very Angry
  • Attention


목록수정삭제인쇄0


Board List
No.제목글쓴이조회등록일
실무에서 많이 쓰는 위주로 순서없이 그때 그때 포스트합니다.x-mind5872015.04.02
HTML5강좌 링크x-mind1,7142012.02.28
23네이버 웹마스터 도구로 사이트 검색엔진에 추가x-mind2182016.04.26
22[HTML5] 안드로이드 및 아이폰에서 input file 사용시 카메라 호...x-mind7172016.04.22
21유투브 동영상을 배경으로x-mind2802016.03.30
20Canvas - 파일로 저장x-mind4542015.09.08
19모바일웹 카카오링크 연동(단순텍스트 링크 보내기)x-mind9572015.06.11
18[링크]나의 웹사이트에 Facebook 계정으로 로그인 하기x-mind8582015.01.22
17[HTML5] 위치정보 사용하기x-mind9942014.10.27
16모바일 브라우저 테스트 도구x-mind1,2952014.03.20
15Safari 브라우저 모바일 모드x-mind1,4612014.03.20
14iScroll을 사용해서 모바일웹에서 내부 스크롤 영역 만들기x-mind1,7812013.03.27
13터치 이벤트를 이용한 사용자 제스처 분석x-mind2,8132013.03.26
12모바일 웹 스크롤 페이징x-mind7,5352013.03.26
11웹표준, 웹접근성을 고려한 HTML 코딩 작업시 규칙.x-mind3,3762013.01.24
10Google Chart Api 이용 QR 코드 생성x-mind1,3152013.01.24
9웹표준 코딩시 주의할점x-mind2,6722012.07.26
8tabindex 속성이 오히려 접근성을 해친다.x-mind2,0972012.04.11
7아이폰, 안드로이드 바탕화면에 바로가기 만들기 4x-mind9,3172012.03.27
6이전버전에서의 HTML5요소 사용x-mind9892012.03.02
5HTML5 API 강좌 #1 – Web Storage 와 Application Cachex-mind1,2172012.02.28
4화면 사이즈에 맞게 이미지 확대x-mind4,1342012.01.27
Copyrightⓒ x-mind.co.kr All rights reserved. 1