Facebook Authentication with JavaScript SDK

Over the years many ways have been created in order to authenticate through Facebook. One of the easiest ways is to use the Facebook Markup Language (FBML). However, from January 2012 is FBML is no longer supported. Who wants to use Facebook Connect to login and logout then, should use the JavaScript SDK provided by Facebook. This supports authentication via OAuth 2.0, which is the recommended way to handle authentication. I programmed an example, that shows how to login and logout with the JavaScript SDK. This example is based on the current JavaScript SDK methods and does not use deprecated methods (because in July 2011 there were some changes).

Facebook Authentication with JavaScript SDK (and standard Facebook Log In Button):

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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:fb="http://ogp.me/ns/fb#">
  <head>
    <meta charset="utf-8" />
    <title>Facebook Authentication with JavaScript SDK</title>
  </head>
  <body> 
    <!-- Facebook JS SDK -->
    <div id="fb-root"></div>
    <!-- 
    Facebook Auth Button
    See https://developers.facebook.com/docs/reference/plugins/login/
    -->
    <div id="fb-auth" 
         class="fb-login-button"
         scope="email,user_about_me,friends_about_me,publish_stream,publish_actions"
         >
    </div>
    <script type="text/javascript">
      /*
       * Facebook Authentication with JavaScript SDK
       * 
       * Based on new methods announced on:
       * https://developers.facebook.com/blog/post/525/
       */
 
      // Your Facebook application settings
      // See: https://developers.facebook.com/apps/
      var facebookAppId = '156477777792853';
      var facebookAppDomain = 'https://www.bennyn.de/';
      var facebookAuthButtonId = 'fb-auth';
 
      function loginCallback(response)
      {
        if (response.authResponse) 
        {
          var uid = response.authResponse.userID;
          var accessToken = response.authResponse.accessToken;
          FB.api('/me', function(response)
          {
            alert('Nice to see you, ' + response.name + '!');
          });
 
          createLogoutButton(response);
        }
      }
 
      function logoutCallback(response)
      {
        // Refresh page if the user logs out
        if (!response.authResponse) 
          window.location.reload();
      }
 
      function createLogoutButton(response)
      {
        // Class names come from standard Facebook JS SDK CSS styles
        // See: https://developers.facebook.com/docs/reference/plugins/login/
        var facebookLoginButton = document.getElementById(facebookAuthButtonId);
        var elements = document.getElementsByClassName('fb_button_text');
        var facebookLoginButtonText = elements[0];
 
        facebookLoginButtonText.innerHTML = 'Logout';          
        facebookLoginButton.onclick = function(event) 
        {
          FB.logout(function(response) 
          { 
            console.log('User logged out.');
          });
        }
 
        // Remove login behaviour of DOM element 'fb_button'
        var facebookLoginInnerButton = facebookLoginButton.childNodes[0];
        facebookLoginInnerButton.onclick = function(event){};
      }
 
      function showInitialButtonState(response)
      {
        if (response.authResponse) 
          createLogoutButton(response);
      }
 
      // Use Facebook JavaScript SDK
      // See: https://developers.facebook.com/docs/reference/javascript/
      window.fbAsyncInit = function() 
      {
        FB.init(
        {
          appId: facebookAppId,
          channelUrl: '//'+facebookAppDomain+'/channel.html',
          status : true,
          cookie: true,
          xfbml: true,
          oauth: true
        });
 
        FB.getLoginStatus(showInitialButtonState);
        FB.Event.subscribe('auth.login', loginCallback);
        FB.Event.subscribe('auth.logout', logoutCallback);
      };
 
      // Load Facebook JavaScript SDK asynchronously
      (function(d)
      {
        var js, id = 'facebook-jssdk';
        if(d.getElementById(id))
        {
          return;
        }
        js = d.createElement('script'); 
        js.id = id; 
        js.async = true;
        js.src = "//connect.facebook.net/en_US/all.js";
        d.getElementsByTagName('head')[0].appendChild(js);
      }(document));
    </script>
  </body>
</html>

Facebook Authentication with JavaScript SDK (and custom Facebook Log In Button)

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
103
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:fb="http://ogp.me/ns/fb#">
  <head>
    <meta charset="utf-8" />
    <title>Facebook Authentication with JavaScript SDK</title>
  </head>
  <body> 
    <!-- Facebook JS SDK -->
    <div id="fb-root"></div>
    <!-- Custom Facebook Auth Button -->
    <button id="fb-auth"></button>
    <script type="text/javascript">
      /*
       * Facebook Authentication with JavaScript SDK
       * 
       * Based on new methods announced on:
       * https://developers.facebook.com/blog/post/525/
       */
 
      // Your Facebook application settings
      // See: https://developers.facebook.com/apps/
      var facebookAppId = '156477777792853';
      var facebookAppDomain = 'https://www.bennyn.de/';
      var facebookAuthButtonId = 'fb-auth';
 
      function updateButton(response)
      {
        var button = document.getElementById(facebookAuthButtonId);
        if (response.authResponse) 
        {
          // User is already logged in
          button.innerHTML='Logout';
          button.onclick = function(event) 
          {
            FB.logout(function(response) 
            { 
              console.log('User logged out.');
            });
          }
        }
        else
        {
          // User is not logged in
          button.innerHTML='Login';
          button.onclick = function(event) 
          {
            FB.login(function(response) 
            {
              if (response.authResponse) 
              {
                var uid = response.authResponse.userID;
                var accessToken = response.authResponse.accessToken;
                FB.api('/me', function(response)
                {
                  alert('Nice to see you, ' + response.name + '!');
                });
              }
            }, 
            {
              // Get access to additional user information
              // See: https://developers.facebook.com/docs/reference/api/permissions/
              scope: 'email,user_about_me,friends_about_me,publish_stream,publish_actions'
            });
          };
        }
      }
      // Use Facebook JavaScript SDK
      // See: https://developers.facebook.com/docs/reference/javascript/
      window.fbAsyncInit = function() 
      {
        FB.init(
        {
          appId: facebookAppId,
          channelUrl: '//'+facebookAppDomain+'/channel.html',
          status : true,
          cookie: true,
          xfbml: true,
          oauth: true
        });
 
        // Use updateButton method as event handler
        FB.getLoginStatus(updateButton);
        FB.Event.subscribe('auth.authResponseChange', updateButton);
      };
 
      // Load Facebook JavaScript SDK asynchronously
      (function(d)
      {
        var js, id = 'facebook-jssdk';
        if(d.getElementById(id))
        {
          return;
        }
        js = d.createElement('script'); 
        js.id = id; 
        js.async = true;
        js.src = "//connect.facebook.net/en_US/all.js";
        d.getElementsByTagName('head')[0].appendChild(js);
      }(document));
    </script>
  </body>
</html>

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.