TShopping

 找回密碼
 註冊
搜索
查看: 1165|回復: 0

[教學] JavaScript SDK和OAuth 2.0路線圖

[複製鏈接]
發表於 2012-4-9 16:18:47 | 顯示全部樓層 |閱讀模式
 
Push to Facebook Push to Plurk Push to Twitter 
我們將繼續Facebook平台更安全,使用戶從舊的Facebook的身份驗證系統和HTTP的應用程序轉換到OAuth的2.0和HTTPS。作為這些努力的一部分,我們已經發布了更新版本的JavaScript SDK提供支持OAuth的2.0。默認情況下,支持OAuth的2.0是選入,使所有平台使用JavaScript SDK的應用程序,將不間斷地繼續工作,而你過渡到使用新的OAuth的2.0功能。

要啟用OAuth的2.0功能,你只需要包括一個OAuth的的參數FB.init,並將其設置為true:
  1. FB.init({
  2.    appId : YOUR_APP_ID,
  3.    // other parameters,
  4.    oauth : true
  5. });
複製代碼
OAuth的2.0 OAuth的參數 如果省略或設置為false,將繼續禁用的JavaScript SDK將工作,因為它沒有這些變化之前。

當配置使用OAuth 2.0,會話被替換的授權響應。這次會議是一個Facebook的具體結構,封閉的訪問令牌和一個會話密鑰,其中任何一個可以使用API​​調用。授權響應封裝OAuth2兼容的數據和一個訪問令牌,用戶ID,簽名的要求,和到期時間。

支持登錄,註銷,登錄狀態大致相同。您的回調函數現在應該指望一個參數,將不包括會話屬性,如果OAuth的參數設置為true 將包括authResponse的屬性。改變之前,你可能已經調用如下FB.login:
  1. FB.login(function(response) {
  2.   if (response.session) {
  3.     console.log("User is connected to the application.”);
  4.     var accessToken = response.session.access_token;
  5.   }
  6. });
複製代碼
使用OAuth 2.0啟用,上面的調用將被替換:
  1. FB.login(function(response) {
  2.   if (response.authResponse) {
  3.     console.log("User is connected to the application.”);
  4.     var accessToken = response.authResponse.accessToken;
  5.   }
  6. });
複製代碼
至於會議,授權記錄可安裝時FB.init包括稱為authResponse參數和附加到一個登錄的用戶的有效的授權響應。而許多開發商將存儲在數據庫中的會話,你現在可能,而不是存儲授權響應。

一個簡單的,但更詳細的例子,說明一個典型的認證流和API調用級聯所示:
  1. FB.login(function(response) {
  2.   if (response.authResponse) {
  3.     console.log('Welcome!  Fetching your information.... ');
  4.     FB.api('/me', function(response) {
  5.       console.log('Good to see you, ' + response.name + '.');
  6.       FB.logout(function(response) {
  7.         console.log('Logged out.');
  8.       });
  9.     });
  10.   } else {
  11.     console.log('User cancelled login or did not fully authorize.');
  12.   }
  13. }, {scope: 'email'});
複製代碼
FB.getLoginStatus像以前一樣,除了你的回調收到授權響應連接的用戶(而不是一個會話)。
  1. FB.getLoginStatus(function(response) {
  2.   if (response.status === 'connected') {
  3.     // the user is logged in and connected to your
  4.     // app, and response.authResponse supplies
  5.     // the user’s ID, a valid access token, a signed
  6.     // request, and the time the access token
  7.     // and signed request each expire
  8.     var uid = response.authResponse.userID;
  9.     var accessToken = response.authResponse.accessToken;
  10.   } else if (response.status === 'not_authorized') {
  11.     // the user is logged in to Facebook,
  12.     //but not connected to the app
  13.   } else {
  14.     // the user isn't even logged in to Facebook.
  15.   }
  16. });
複製代碼
您仍然可以訂閱像以前那樣的事件集合:auth.login,auth.logout,auth.statusChange仍然工作,但auth.sessionChange已被廢棄,被替換auth.authResponseChange。當然,auth.sessionChange將繼續工作,直到至少在10月1日的過渡時間,並已啟用時OAuth2 auth.authResponseChange是唯一有關。OAuth的2.0啟用時,授權的反應,而不是會議傳遞給所有連接的用戶回調。

全部工作下面的例子:
  1. <!DOCTYPE html>
  2. <html xmlns:fb="https://www.facebook.com/2008/fbml">
  3.   <head>
  4.     <title>
  5.       New JavaScript SDK
  6.     </title>
  7.   </head>
  8. <body>
  9.        
  10. <div id="fb-root"></div>
  11. <h2>Updated JS SDK example</h2><br />
  12. <div id="user-info"></div>
  13. <p><button id="fb-auth">Login</button></p>

  14. <script>
  15. window.fbAsyncInit = function() {
  16.   FB.init({ appId: 'YOUR_APP_ID',
  17.             status: true,
  18.             cookie: true,
  19.             xfbml: true,
  20.             oauth: true});

  21.   function updateButton(response) {
  22.     var button = document.getElementById('fb-auth');
  23.                
  24.     if (response.authResponse) {
  25.       //user is already logged in and connected
  26.       var userInfo = document.getElementById('user-info');
  27.       FB.api('/me', function(response) {
  28.         userInfo.innerHTML = '<img src="https://graph.facebook.com/'
  29.           + response.id + '/picture">' + response.name;
  30.         button.innerHTML = 'Logout';
  31.       });
  32.       button.onclick = function() {
  33.         FB.logout(function(response) {
  34.           var userInfo = document.getElementById('user-info');
  35.           userInfo.innerHTML="";
  36.         });
  37.       };
  38.     } else {
  39.       //user is not connected to your app or logged out
  40.       button.innerHTML = 'Login';
  41.       button.onclick = function() {
  42.         FB.login(function(response) {
  43.           if (response.authResponse) {
  44.             FB.api('/me', function(response) {
  45.               var userInfo = document.getElementById('user-info');
  46.               userInfo.innerHTML =
  47.                 '<img src="https://graph.facebook.com/'
  48.                 + response.id + '/picture" style="margin-right:5px"/>'
  49.                 + response.name;
  50.             });          
  51.           } else {
  52.             //user cancelled login or did not grant authorization
  53.           }
  54.         }, {scope:'email'});         
  55.       }
  56.     }
  57.   }

  58.   // run once with current status and whenever the status changes
  59.   FB.getLoginStatus(updateButton);
  60.   FB.Event.subscribe('auth.statusChange', updateButton);       
  61. };
  62.        
  63. (function() {
  64.   var e = document.createElement('script'); e.async = true;
  65.   e.src = document.location.protocol
  66.     + '//connect.facebook.net/en_US/all.js';
  67.   document.getElementById('fb-root').appendChild(e);
  68. }());

  69. </script>
  70. </body>
  71. </html>
複製代碼
更新OAuth的2.0路線圖

除了 ​​提供新的JavaScript SDK,我們也更新我們的開發應用,這種轉變,以幫助你:

改名為“畫布為2.0 OAuth的”遷移到“為畫布signed_request。”這有助於澄清啟用此設置時,你的畫布應用將收到signed_request的參數。
創建一個新的遷移設置為“OAuth的遷移”,以幫助驗證您已達到OAuth的遷移時間表。啟用此遷移設置驗證您正在使用的訪問令牌,而不是使用傳統的認證。

 

臉書網友討論
您需要登錄後才可以回帖 登錄 | 註冊 |

本版積分規則



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

GMT+8, 2016-12-4 03:42 , Processed in 0.059362 second(s), 18 queries .

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

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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