TShopping

 找回密碼
 註冊
搜索
查看: 2618|回復: 1

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

[複製鏈接]
發表於 2012-3-8 00:43:30 | 顯示全部樓層 |閱讀模式
 
Push to Facebook Push to Plurk Push to Twitter 
今天,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.                if (response.authResponse) {
  12.                  //user is already logged in and connected
  13.                  FB.api('/me', function(info) {
  14.                      login(response, info);
  15.                  });
  16.                  button.onclick = function() {
  17.                      FB.logout(function(response) {
  18.                          logout(response);
  19.                      });
  20.                  };
  21.              } else {
  22.                  //user is not connected to your app or logged out
  23.                  button.innerHTML = 'Login';
  24.                  button.onclick = function() {
  25.                      showLoader(true);
  26.                      FB.login(function(response) {
  27.                          if (response.authResponse) {
  28.                              FB.api('/me', function(info) {
  29.                                  login(response, info);
  30.                              });
  31.                          } else {
  32.                              //user cancelled login or did not grant authorization
  33.                              showLoader(false);
  34.                          }
  35.                      }, {scope:'email,user_birthday,status_update,publish_stream,user_about_me'});
  36.                  }
  37.              }
  38.          }
  39.            // run once with current status and whenever the status changes
  40.          FB.getLoginStatus(updateButton);
  41.          FB.Event.subscribe('auth.statusChange', updateButton);
  42.      };     (function() {
  43.          var e = document.createElement('script'); e.async = true;
  44.          e.src = document.location.protocol
  45.              + '//connect.facebook.net/en_US/all.js';
  46.          document.getElementById('fb-root').appendChild(e);
  47.      }());
複製代碼
這是最有效的方式,在您的網站加載的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. function showLoader(status){
  2.         if (status)
  3.             document.getElementById('loader').style.display = 'block';
  4.         else
  5.            document.getElementById('loader').style.display = 'none';
  6.     }
複製代碼
這個項目的完整的源代碼。或直接下載從GitHub

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

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

 

臉書網友討論

本帖子中包含更多資源

您需要 登錄 才可以下載或查看,沒有帳號?註冊

x
 樓主| 發表於 2013-2-1 19:31:44 | 顯示全部樓層
牛X海海!!!

版主招募中

您需要登錄後才可以回帖 登錄 | 註冊 |

本版積分規則



Archiver|手機版|小黑屋|免責聲明|TShopping

GMT+8, 2016-12-8 20:04 , Processed in 0.058466 second(s), 19 queries .

本論壇言論純屬發表者個人意見,與 TShopping綜合論壇 立場無關 如有意見侵犯了您的權益 請寫信聯絡我們。

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表