新的JavaScript SDK及OAuth的2.0基於FBConnect的教程

woff

今天，Facebook發布了其更新的JavaScript的SDK的。現在的身份認證系統是基於OAuth的2.0和HTTPS。所以我更新了我以前的教程，寫新的崗位上。在這篇文章中，我會告訴你使用javascript，你怎麼能輕易整合Facebook的連接（登錄/註銷）在您的網站的功能。另如何使用Facebook的API來獲取用戶的信息。在這裡，我只用JavaScript沒有後端PHP或任何服務器端語言。
在本教程中我將解釋：

• Facebook的認證過程
• Facebook的新的JavaScript使用
• Facebook的連接驗證
• 如何獲得更多的權限，以獲得更多的信息
• 如何使用圖形API
• 如何顯示流發布提示，並分享提示
• 如何發布後用戶的使用圖形API的牆
• 如何通過FQL查詢更多信息
• 如何使用舊的API（REST API）調用設置狀態
• 如何顯示AJAX裝載機的互動與Facebook
  

在開始之前：

1。Facebook的認證過程這是FACEBOOK授權過程將如何工作。在代碼中，我們將按照這一進程。

2。Facebook的新的JavaScript使用 因此，在數字，你看到如何將驗證工作在您的網站。現在，我們將實施。首先，你設置一個Facebook應 ​​用程序，應用程序ID。您可以從這裡設置的應用程序。或如果你已經設置一個Facebook應 ​​用程序，然後就複製的應用程序ID取代XXXXXXXXXXX。OAuth的記住：真正的是在這個最新的JavaScript SDK新增OAuth的2.0認證，使您的網站。

1. window.fbAsyncInit = function() {
   
2.          FB.init({ appId: 'Your_APP_ID',
   
3.              status: true,
   
4.              cookie: true,
   
5.              xfbml: true,
   
6.              oauth: true});
   
7.            showLoader(true);
   
8.            function updateButton(response) {
   
9.              button    =  document.getElementById('fb-auth');
   
10.              userInfo  =  document.getElementById('user-info');
    
11. 
    
12.                if (response.authResponse) {
    
13.                  //user is already logged in and connected
    
14.                  FB.api('/me', function(info) {
    
15.                      login(response, info);
    
16.                  });
    
17.                  button.onclick = function() {
    
18.                      FB.logout(function(response) {
    
19.                          logout(response);
    
20.                      });
    
21.                  };
    
22.              } else {
    
23.                  //user is not connected to your app or logged out
    
24.                  button.innerHTML = 'Login';
    
25.                  button.onclick = function() {
    
26.                      showLoader(true);
    
27.                      FB.login(function(response) {
    
28.                          if (response.authResponse) {
    
29.                              FB.api('/me', function(info) {
    
30.                                  login(response, info);
    
31.                              });
    
32.                          } else {
    
33.                              //user cancelled login or did not grant authorization
    
34.                              showLoader(false);
    
35.                          }
    
36.                      }, {scope:'email,user_birthday,status_update,publish_stream,user_about_me'});
    
37.                  }
    
38.              }
    
39.          }
    
40.            // run once with current status and whenever the status changes
    
41.          FB.getLoginStatus(updateButton);
    
42.          FB.Event.subscribe('auth.statusChange', updateButton);
    
43.      };     (function() {
    
44.          var e = document.createElement('script'); e.async = true;
    
45.          e.src = document.location.protocol
    
46.              + '//connect.facebook.net/en_US/all.js';
    
47.          document.getElementById('fb-root').appendChild(e);
    
48.      }());

複製代碼

這是最有效的方式，在您的網站加載的JavaScript SDK。並以這種方式將加載的SDK異步所以它不會阻止你的頁面加載的其他元素。FB.init方法。
應該是和你的HTML標籤

1. <！DOCTYPE HTML>
   
2. < HTML  XMLNS：FB = “ https://www.facebook.com/2008/fbml “ >

複製代碼

3。Facebook的連接驗證 在代碼的第一部分，你會看到Facebook的API函數調用

1. FB.getLoginStatus（updateButton）;
   
2. FB.Event.subscribe（auth.statusChange“ ，updateButton）;

複製代碼

加載Facebook的JavaScript庫後，這種方法getLoginStatus（）調用，並檢查用戶的身份驗證狀態，它會響應發送到updateButton（）方法。
FB.Event.subscribe（）方法註冊auth.statusChange，用facebook。這意味著，如果用戶成功登錄或授權您的應用程序或註銷或取消登錄過程中，將跟踪和調用updateButton（）方法與響應。在此updateButton（）方法，你會看到如下的第一個數字的驗證碼。在完整的源代碼，你會看到2個額外的方法

1. function login(response, info){
   
2.      if (response.authResponse) {
   
3.          var accessToken  =   response.authResponse.accessToken;
   
4.          userInfo.innerHTML = '<img src="https://graph.facebook.com/' + info.id + '/picture">' + info.name             + "<br /> Your Access Token: " + accessToken;
   
5.          button.innerHTML = 'Logout';
   
6.          showLoader(false);
   
7.          document.getElementById('other').style.display = "block";
   
8.      } }  function logout(response){
   
9.      userInfo.innerHTML =   "";
   
10.      document.getElementById('debug').innerHTML =  "";
    
11.      document.getElementById('other').style.display =  "none";
    
12.      showLoader(false);
    
13. }
    

複製代碼

這些被稱為當用戶成功登錄，並授權您的應用程序，當用戶註銷。
4。如何獲得更多的權限，以獲得更多的信息 在代碼的第一部分，你會看到的代碼將運行時，用戶點擊登錄。

1. //user is not connected to your app or logged out
   
2.      button.innerHTML = 'Login';
   
3.      button.onclick = function() {
   
4.          showLoader(true);
   
5.          FB.login(function(response) {
   
6.              if (response.authResponse) {
   
7.                  FB.api('/me', function(info) {
   
8.                      login(response, info);
   
9.                  });
   
10.              } else {
    
11.                  //user cancelled login or did not grant authorization
    
12.                  showLoader(false);
    
13.              }
    
14.          }, {scope:'email,user_birthday,status_update,publish_stream,user_about_me'});
    
15.      }

複製代碼

在這一部分，你會看到的範圍，在那裡你可以提供擴展權限參數的名稱。不提供的所有權限，只覺得你可能需要為您的網站的信息。這裡是有關權限的詳細信息。

1. {scope:'email,user_birthday,status_update,publish_stream,user_about_me'}

複製代碼

5。如何使用圖形API在新的JavaScript SDK，驗證碼是唯一的改變，一切仍然是相同的。為了充分了解圖形API 訪問的鏈接。現在我會告訴你，如何使用圖形API使用JavaScript SDK。有方法FB.api。使用這種方法，你可以調用圖形API。

1. FB.api('/me', function(response) {
   
2.    alert(response.name);
   
3. });
   

複製代碼

通過調用此方法，它會顯示登錄用戶名。又例如，檢查7號點。
6。如何顯示流發布提示，並分享提示另一個JavaScript SDK名為FB.ui方法。使用代碼，您可以提示用戶發布的流或分享您的頁面。

1. function streamPublish(name, description, hrefTitle, hrefLink, userPrompt){
   
2.          showLoader(true);
   
3.          FB.ui(         {
   
4.              method: 'stream.publish',
   
5.              message: '',
   
6.              attachment: {
   
7.                  name: name,
   
8.                  caption: '',
   
9.                  description: (description),
   
10.                  href: hrefLink
    
11.              },
    
12.              action_links: [
    
13.                  { text: hrefTitle, href: hrefLink }
    
14.              ],
    
15.              user_prompt_message: userPrompt
    
16.          },
    
17.          function(response) {
    
18.              showLoader(false);
    
19.          });
    
20.        }
    
21.        function share(){
    
22.          showLoader(true);
    
23.          var share = {
    
24.              method: 'stream.share',
    
25.              u: 'http://thinkdiff.net/'        };
    
26.          FB.ui(share, function(response) {
    
27.              showLoader(false);
    
28.              console.log(response);
    
29.          });
    
30.      }
    

複製代碼

你提供你叫streamPublish（）方法時的參數。

1. function showStream(){
   
2.      FB.api('/me', function(response) {
   
3.          //console.log(response.id);
   
4.          streamPublish(response.name, 'I like the articles of Thinkdiff.net', 'hrefTitle', 'http://thinkdiff.net', "Share thinkdiff.net");     });
   
5. }
   

複製代碼

7。如何發布後用戶的使用圖形API的牆在我的演示，你會看到另一個定制方法名為graphStreamPublish（）的。這也是一個圖形API的例子。

1. function graphStreamPublish(){
   
2.          showLoader(true);
   
3.            FB.api('/me/feed', 'post',
   
4.          {
   
5.              message     : "I love thinkdiff.net for facebook app development tutorials",
   
6.              link        : 'http://ithinkdiff.net',
   
7.              picture     : 'http://thinkdiff.net/iphone/lucky7_ios.jpg',
   
8.              name        : 'iOS Apps & Games',
   
9.              description : 'Checkout iOS apps and games from iThinkdiff.net. I found some of them are just awesome!'
   
10.           },         function(response) {
    
11.              showLoader(false);
    
12.                if (!response || response.error) {
    
13.                  alert('Error occured');
    
14.              } else {
    
15.                  alert('Post ID: ' + response.id);
    
16.              }
    
17.          });
    
18.      }
    

複製代碼

這種方法使用FB.api（）做一個HTTP POST請求的一些參數http://graph.facebook.com/me/feed URL發布在用戶的牆上的飼料。
8。如何通過FQL查詢更多信息Facebook查詢語言，使您可以使用SQL風格的查詢公開的數據由圖形API接口  。它提供了一些高級功能無法使用圖形API，包括配料多個查詢到一個單一的通話。結帳知道Facebook的用戶數據，你可以檢索表。在演示的源代碼，你會看到

1. function fqlQuery(){
   
2.          showLoader(true);
   
3.            FB.api('/me', function(response) {
   
4.              showLoader(false);
   
5.                //http://developers.facebook.com/docs/reference/fql/user/
   
6.              var query =  FB.Data.query('select name, profile_url, sex, pic_small from user where uid={0}', response.id);
   
7.              query.wait(function(rows) {
   
8.                  document.getElementById('debug').innerHTML =  'FQL Information: '+  "<br />" +
   
9.                      'Your name: '  +  rows[0].name + "<br />" +
   
10.                      'Your Sex: '  +  (rows[0].sex!= undefined ? rows[0].sex : "") + "<br />" +
    
11.                      'Your Profile: '  +  "<a href='" + rows[0].profile_url + "'>" + rows[0].profile_url + "</a>" + "<br />"+
    
12.                      '<img src="' +  rows[0].pic_small + '" alt="" />' + "<br />";
    
13.              });
    
14.          });
    
15.      }
    

複製代碼

9。如何使用舊的API（REST API）調用設置狀態你仍然可以使用舊的API。在我的演示中，你會看到一個文本框，寫的東西，然後按一下“狀態使用傳統的API呼叫：”你會看到你的Facebook狀態更新。

1. function setStatus(){
   
2.          showLoader(true);
   
3.            status1 = document.getElementById('status').value;
   
4.          FB.api(         {
   
5.              method: 'status.set',
   
6.              status: status1
   
7.          },
   
8.          function(response) {
   
9.              if (response == 0){
   
10.                  alert('Your facebook status not updated. Give Status Update Permission.');
    
11.              }             else{
    
12.                  alert('Your facebook status updated');
    
13.              }
    
14.              showLoader(false);
    
15.          }
    
16.      );
    
17. }
    

複製代碼

10。如何顯示AJAX裝載機的互動與Facebook在源代碼中，你會看到一個的方法showLoader（） ，你會看到源代碼的幾個地方，這種方法被稱為。

1. 
   
2. function showLoader(status){
   
3.         if (status)
   
4.             document.getElementById('loader').style.display = 'block';
   
5.         else
   
6.            document.getElementById('loader').style.display = 'none';
   
7.     }
   

複製代碼

這個項目的完整的源代碼。或直接下載從GitHub

1. 
   
2. <!DOCTYPE html>
   
3. <html xmlns:fb="https://www.facebook.com/2008/fbml">
   
4.      <head>
   
5.          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
   
6.          <title>New JavaScript SDK & OAuth 2.0 based FBConnect Tutorial | Thinkdiff.net</title>
   
7.          <!--             @author: Mahmud Ahsan (http://mahmud.thinkdiff.net)         -->
   
8.      </head>
   
9.      <body>
   
10.          <div id="fb-root"></div>
    
11.          <script type="text/javascript">
    
12.              var button;
    
13.              var userInfo;
    
14.                window.fbAsyncInit = function() {
    
15.                  FB.init({ appId: 'YOUR_APP_ID',
    
16.                      status: true,
    
17.                      cookie: true,
    
18.                      xfbml: true,
    
19.                      oauth: true});
    
20.                   showLoader(true);
    
21.                   function updateButton(response) {
    
22.                      button  =   document.getElementById('fb-auth');
    
23.                      userInfo  =   document.getElementById('user-info');
    
24.                        if (response.authResponse) {
    
25.                          //user is already logged in and connected
    
26.                          FB.api('/me', function(info) {
    
27.                              login(response, info);
    
28.                          });
    
29.                            button.onclick = function() {
    
30.                              FB.logout(function(response) {
    
31.                                  logout(response);
    
32.                              });
    
33.                          };
    
34.                      } else {
    
35.                          //user is not connected to your app or logged out
    
36.                          button.innerHTML = 'Login';
    
37.                          button.onclick = function() {
    
38.                              showLoader(true);
    
39.                              FB.login(function(response) {
    
40.                                  if (response.authResponse) {
    
41.                                      FB.api('/me', function(info) {
    
42.                                          login(response, info);
    
43.                                      });
    
44.                                  } else {
    
45.                                      //user cancelled login or did not grant authorization
    
46.                                      showLoader(false);
    
47.                                  }
    
48.                              }, {scope:'email,user_birthday,status_update,publish_stream,user_about_me'});
    
49.                          }
    
50.                      }
    
51.                  }
    
52.                   // run once with current status and whenever the status changes
    
53.                  FB.getLoginStatus(updateButton);
    
54.                  FB.Event.subscribe('auth.statusChange', updateButton);
    
55.              };             (function() {
    
56.                  var e = document.createElement('script'); e.async = true;
    
57.                  e.src = document.location.protocol
    
58.                      + '//connect.facebook.net/en_US/all.js';
    
59.                  document.getElementById('fb-root').appendChild(e);
    
60.              }());
    
61.                function login(response, info){
    
62.                  if (response.authResponse) {
    
63.                      var accessToken  =   response.authResponse.accessToken;
    
64.                      userInfo.innerHTML = '<img src="https://graph.facebook.com/' + info.id + '/picture">' + info.name  + "<br /> Your Access Token: " + accessToken;
    
65.                      button.innerHTML = 'Logout';
    
66.                      showLoader(false);
    
67.                      document.getElementById('other').style.display = "block";
    
68.                  }
    
69.              }
    
70.                function logout(response){
    
71.                  userInfo.innerHTML  =   "";
    
72.                  document.getElementById('debug').innerHTML =   "";
    
73.                  document.getElementById('other').style.display =   "none";
    
74.                  showLoader(false);
    
75.              }
    
76.                //stream publish method
    
77.              function streamPublish(name, description, hrefTitle, hrefLink, userPrompt){
    
78.                  showLoader(true);
    
79.                  FB.ui(                 {
    
80.                      method: 'stream.publish',
    
81.                      message: '',
    
82.                      attachment: {
    
83.                          name: name,
    
84.                          caption: '',
    
85.                          description: (description),
    
86.                          href: hrefLink
    
87.                      },
    
88.                      action_links: [
    
89.                          { text: hrefTitle, href: hrefLink }
    
90.                      ],
    
91.                      user_prompt_message: userPrompt
    
92.                  },
    
93.                  function(response) {
    
94.                      showLoader(false);
    
95.                  });
    
96.                }
    
97.              function showStream(){
    
98.                  FB.api('/me', function(response) {
    
99.                      //console.log(response.id);
    
100.                      streamPublish(response.name, 'I like the articles of Thinkdiff.net', 'hrefTitle', 'http://thinkdiff.net', "Share thinkdiff.net");
     
101.                  });
     
102.              }
     
103.                function share(){
     
104.                  showLoader(true);
     
105.                  var share = {
     
106.                      method: 'stream.share',
     
107.                      u: 'http://thinkdiff.net/'
     
108.                 };
     
109.                    FB.ui(share, function(response) {
     
110.                      showLoader(false);
     
111.                      console.log(response);
     
112.                  });
     
113.              }
     
114.                function graphStreamPublish(){
     
115.                  showLoader(true);
     
116.                    FB.api('/me/feed', 'post',
     
117.                     {
     
118.                          message     : "I love thinkdiff.net for facebook app development tutorials",
     
119.                          link        : 'http://ithinkdiff.net',                                 
     
120.                          picture     : 'http://thinkdiff.net/iphone/lucky7_ios.jpg',
     
121.                          name        : 'iOS Apps & Games',
     
122.                          description : 'Checkout iOS apps and games from iThinkdiff.net. I found some of them are just awesome!'
     
123.                   },
     
124.                  function(response) {
     
125.                      showLoader(false);
     
126.                        if (!response || response.error) {
     
127.                          alert('Error occured');
     
128.                      } else {
     
129.                          alert('Post ID: ' + response.id);
     
130.                      }
     
131.                  });
     
132.              }
     
133.                function fqlQuery(){
     
134.                  showLoader(true);
     
135.                    FB.api('/me', function(response) {
     
136.                      showLoader(false);
     
137.                      //http://developers.facebook.com/docs/reference/fql/user/
     
138.                      var query       =  FB.Data.query('select name, profile_url, sex, pic_small from user where uid={0}', response.id);
     
139.                      query.wait(function(rows) {
     
140.                         document.getElementById('debug').innerHTML = 'FQL Information: '+  "<br />" +
     
141.                           'Your name: ' +  rows[0].name  + "<br />" +
     
142.                           'Your Sex: ' +  (rows[0].sex!= undefined ? rows[0].sex : "") + "<br />" +
     
143.                           'Your Profile: ' +  "<a href='" + rows[0].profile_url + "'>" + rows[0].profile_url + "</a>" + "<br />" +
     
144.                           '<img src="' +  rows[0].pic_small + '" alt="" />' + "<br />";
     
145.                       });
     
146.                  });
     
147.              }
     
148.                function setStatus(){
     
149.                  showLoader(true);
     
150.                    status1 = document.getElementById('status').value;
     
151.                  FB.api(                   {
     
152.                      method: 'status.set',
     
153.                      status: status1
     
154.                    },
     
155.                    function(response) {
     
156.                      if (response == 0){
     
157.                          alert('Your facebook status not updated. Give Status Update Permission.');
     
158.                      }                     else{
     
159.                          alert('Your facebook status updated');
     
160.                      }                     showLoader(false);
     
161.                    }
     
162.                  );
     
163.              }
     
164.                function showLoader(status){
     
165.                  if (status)
     
166.                      document.getElementById('loader').style.display = 'block';
     
167.                  else
     
168.                     document.getElementById('loader').style.display = 'none';
     
169.              }           </script>
     
170.            <h3>New JavaScript SDK & OAuth 2.0 based FBConnect Tutorial | Thinkdiff.net</h3>
     
171.          <button id="fb-auth">Login</button>
     
172.          <div id="loader" style="display:none">
     
173.              <img src="ajax-loader.gif" alt="loading" />
     
174.          </div>
     
175.          <br />
     
176.          <div id="user-info"></div>
     
177.          <br />
     
178.          <div id="debug"></div>
     
179.          <div id="other" style="display:none">
     
180.              <a href="#" onclick="showStream(); return false;">Publish Wall Post</a> | <a href="#" onclick="share(); return false;">Share With Your Friends</a> |  <a href="#" onclick="graphStreamPublish(); return false;">Publish Stream Using Graph API</a> | <a href="#" onclick="fqlQuery(); return false;">FQL Query Example</a>
     
181.              <br />
     
182.              <textarea id="status" cols="50" rows="5">Write your status here and click 'Status Set Using Legacy Api Call'</textarea>
     
183.              <br />
     
184.              <a href="#" onclick="setStatus(); return false;">Status Set Using Legacy Api Call</a>
     
185.          </div>
     
186.      </body>
     
187. </html>
     

複製代碼

此外，如果你使用PHP SDK 3.0或這個新的JavaScript SDK的方式來驗證您的網站，你可以在應用程序設置中啟用OAuth的遷移。

希望這將有助於您了解新的JavaScript SDK。

來源網址：http://thinkdiff.net/facebook/new-javascript-sdk-oauth-2-0-based-fbconnect-tutorial/

woff

牛X海海!!!