新的JavaScript SDK及OAuth的2.0基於FBConnect的教程
今天，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
在開始之前：
http://c3354688.r88.cf0.rackcdn.com/wp-content/uploads/2011/07/demo_application.jpghttp://c3354688.r88.cf0.rackcdn.com/wp-content/uploads/2011/07/download_code.jpg
1。Facebook的認證過程這是FACEBOOK授權過程將如何工作。在代碼中，我們將按照這一進程。
2。Facebook的新的JavaScript使用 因此，在數字，你看到如何將驗證工作在您的網站。現在，我們將實施。首先，你設置一個Facebook應 用程序，應用程序ID。您可以從這裡設置的應用程序。或如果你已經設置一個Facebook應 用程序，然後就複製的應用程序ID取代XXXXXXXXXXX。OAuth的記住：真正的是在這個最新的JavaScript SDK新增OAuth的2.0認證，使您的網站。 window.fbAsyncInit = function() {
FB.init({ appId: 'Your_APP_ID',
status: true,
cookie: true,
xfbml: true,
oauth: true});
showLoader(true);
function updateButton(response) {
button =document.getElementById('fb-auth');
userInfo=document.getElementById('user-info');
if (response.authResponse) {
//user is already logged in and connected
FB.api('/me', function(info) {
login(response, info);
});
button.onclick = function() {
FB.logout(function(response) {
logout(response);
});
};
} else {
//user is not connected to your app or logged out
button.innerHTML = 'Login';
button.onclick = function() {
showLoader(true);
FB.login(function(response) {
if (response.authResponse) {
FB.api('/me', function(info) {
login(response, info);
});
} else {
//user cancelled login or did not grant authorization
showLoader(false);
}
}, {scope:'email,user_birthday,status_update,publish_stream,user_about_me'});
}
}
}
// run once with current status and whenever the status changes
FB.getLoginStatus(updateButton);
FB.Event.subscribe('auth.statusChange', updateButton);
}; (function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol
+ '//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());這是最有效的方式，在您的網站加載的JavaScript SDK。並以這種方式將加載的SDK異步所以它不會阻止你的頁面加載的其他元素。FB.init方法。
應該是和你的HTML標籤 <！DOCTYPE HTML>
< HTMLXMLNS：FB = “ https://www.facebook.com/2008/fbml “ >3。Facebook的連接驗證 在代碼的第一部分，你會看到Facebook的API函數調用 FB.getLoginStatus（updateButton）;
FB.Event.subscribe（auth.statusChange“ ，updateButton）;加載Facebook的JavaScript庫後，這種方法getLoginStatus（）調用，並檢查用戶的身份驗證狀態，它會響應發送到updateButton（）方法。
FB.Event.subscribe（）方法註冊auth.statusChange，用facebook。這意味著，如果用戶成功登錄或授權您的應用程序或註銷或取消登錄過程中，將跟踪和調用updateButton（）方法與響應。在此updateButton（）方法，你會看到如下的第一個數字的驗證碼。在完整的源代碼，你會看到2個額外的方法 function login(response, info){
if (response.authResponse) {
var accessToken= response.authResponse.accessToken;
userInfo.innerHTML = '<img src="https://graph.facebook.com/' + info.id + '/picture">' + info.name + "<br /> Your Access Token: " + accessToken;
button.innerHTML = 'Logout';
showLoader(false);
document.getElementById('other').style.display = "block";
} }function logout(response){
userInfo.innerHTML = "";
document.getElementById('debug').innerHTML ="";
document.getElementById('other').style.display ="none";
showLoader(false);
}
這些被稱為當用戶成功登錄，並授權您的應用程序，當用戶註銷。
4。如何獲得更多的權限，以獲得更多的信息 在代碼的第一部分，你會看到的代碼將運行時，用戶點擊登錄。 //user is not connected to your app or logged out
button.innerHTML = 'Login';
button.onclick = function() {
showLoader(true);
FB.login(function(response) {
if (response.authResponse) {
FB.api('/me', function(info) {
login(response, info);
});
} else {
//user cancelled login or did not grant authorization
showLoader(false);
}
}, {scope:'email,user_birthday,status_update,publish_stream,user_about_me'});
} 在這一部分，你會看到的範圍，在那裡你可以提供擴展權限參數的名稱。不提供的所有權限，只覺得你可能需要為您的網站的信息。這裡是有關權限的詳細信息。 {scope:'email,user_birthday,status_update,publish_stream,user_about_me'}
5。如何使用圖形API在新的JavaScript SDK，驗證碼是唯一的改變，一切仍然是相同的。為了充分了解圖形API 訪問的鏈接。現在我會告訴你，如何使用圖形API使用JavaScript SDK。有方法FB.api。使用這種方法，你可以調用圖形API。 FB.api('/me', function(response) {
alert(response.name);
});
通過調用此方法，它會顯示登錄用戶名。又例如，檢查7號點。
6。如何顯示流發布提示，並分享提示另一個JavaScript SDK名為FB.ui方法。使用代碼，您可以提示用戶發布的流或分享您的頁面。 function streamPublish(name, description, hrefTitle, hrefLink, userPrompt){
showLoader(true);
FB.ui( {
method: 'stream.publish',
message: '',
attachment: {
name: name,
caption: '',
description: (description),
href: hrefLink
},
action_links: [
{ text: hrefTitle, href: hrefLink }
],
user_prompt_message: userPrompt
},
function(response) {
showLoader(false);
});
}
function share(){
showLoader(true);
var share = {
method: 'stream.share',
u: 'http://thinkdiff.net/' };
FB.ui(share, function(response) {
showLoader(false);
console.log(response);
});
}
你提供你叫streamPublish（）方法時的參數。 function showStream(){
FB.api('/me', function(response) {
//console.log(response.id);
streamPublish(response.name, 'I like the articles of Thinkdiff.net', 'hrefTitle', 'http://thinkdiff.net', "Share thinkdiff.net"); });
}
7。如何發布後用戶的使用圖形API的牆在我的演示，你會看到另一個定制方法名為graphStreamPublish（）的。這也是一個圖形API的例子。 function graphStreamPublish(){
showLoader(true);
FB.api('/me/feed', 'post',
{
message : "I love thinkdiff.net for facebook app development tutorials",
link : 'http://ithinkdiff.net',
picture : 'http://thinkdiff.net/iphone/lucky7_ios.jpg',
name : 'iOS Apps & Games',
description : 'Checkout iOS apps and games from iThinkdiff.net. I found some of them are just awesome!'
}, function(response) {
showLoader(false);
if (!response || response.error) {
alert('Error occured');
} else {
alert('Post ID: ' + response.id);
}
});
}
這種方法使用FB.api（）做一個HTTP POST請求的一些參數http://graph.facebook.com/me/feed URL發布在用戶的牆上的飼料。
8。如何通過FQL查詢更多信息Facebook查詢語言，使您可以使用SQL風格的查詢公開的數據由圖形API接口。它提供了一些高級功能無法使用圖形API，包括配料多個查詢到一個單一的通話。結帳知道Facebook的用戶數據，你可以檢索表。在演示的源代碼，你會看到 function fqlQuery(){
showLoader(true);
FB.api('/me', function(response) {
showLoader(false);
//http://developers.facebook.com/docs/reference/fql/user/
var query =FB.Data.query('select name, profile_url, sex, pic_small from user where uid={0}', response.id);
query.wait(function(rows) {
document.getElementById('debug').innerHTML ='FQL Information: '+"<br />" +
'Your name: '+rows.name + "<br />" +
'Your Sex: '+(rows.sex!= undefined ? rows.sex : "") + "<br />" +
'Your Profile: '+"<a href='" + rows.profile_url + "'>" + rows.profile_url + "</a>" + "<br />"+
'<img src="' +rows.pic_small + '" alt="" />' + "<br />";
});
});
}
9。如何使用舊的API（REST API）調用設置狀態你仍然可以使用舊的API。在我的演示中，你會看到一個文本框，寫的東西，然後按一下“狀態使用傳統的API呼叫：”你會看到你的Facebook狀態更新。 function setStatus(){
showLoader(true);
status1 = document.getElementById('status').value;
FB.api( {
method: 'status.set',
status: status1
},
function(response) {
if (response == 0){
alert('Your facebook status not updated. Give Status Update Permission.');
} else{
alert('Your facebook status updated');
}
showLoader(false);
}
);
}
10。如何顯示AJAX裝載機的互動與Facebook在源代碼中，你會看到一個的方法showLoader（） ，你會看到源代碼的幾個地方，這種方法被稱為。
function showLoader(status){
if (status)
document.getElementById('loader').style.display = 'block';
else
document.getElementById('loader').style.display = 'none';
}
這個項目的完整的源代碼。或直接下載從GitHub
<!DOCTYPE html>
<html xmlns:fb="https://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>New JavaScript SDK & OAuth 2.0 based FBConnect Tutorial | Thinkdiff.net</title>
<!-- @author: Mahmud Ahsan (http://mahmud.thinkdiff.net) -->
</head>
<body>
<div id="fb-root"></div>
<script type="text/javascript">
var button;
var userInfo;
window.fbAsyncInit = function() {
FB.init({ appId: 'YOUR_APP_ID',
status: true,
cookie: true,
xfbml: true,
oauth: true});
showLoader(true);
function updateButton(response) {
button= document.getElementById('fb-auth');
userInfo= document.getElementById('user-info');
if (response.authResponse) {
//user is already logged in and connected
FB.api('/me', function(info) {
login(response, info);
});
button.onclick = function() {
FB.logout(function(response) {
logout(response);
});
};
} else {
//user is not connected to your app or logged out
button.innerHTML = 'Login';
button.onclick = function() {
showLoader(true);
FB.login(function(response) {
if (response.authResponse) {
FB.api('/me', function(info) {
login(response, info);
});
} else {
//user cancelled login or did not grant authorization
showLoader(false);
}
}, {scope:'email,user_birthday,status_update,publish_stream,user_about_me'});
}
}
}
// run once with current status and whenever the status changes
FB.getLoginStatus(updateButton);
FB.Event.subscribe('auth.statusChange', updateButton);
}; (function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol
+ '//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
function login(response, info){
if (response.authResponse) {
var accessToken= response.authResponse.accessToken;
userInfo.innerHTML = '<img src="https://graph.facebook.com/' + info.id + '/picture">' + info.name+ "<br /> Your Access Token: " + accessToken;
button.innerHTML = 'Logout';
showLoader(false);
document.getElementById('other').style.display = "block";
}
}
function logout(response){
userInfo.innerHTML= "";
document.getElementById('debug').innerHTML = "";
document.getElementById('other').style.display = "none";
showLoader(false);
}
//stream publish method
function streamPublish(name, description, hrefTitle, hrefLink, userPrompt){
showLoader(true);
FB.ui( {
method: 'stream.publish',
message: '',
attachment: {
name: name,
caption: '',
description: (description),
href: hrefLink
},
action_links: [
{ text: hrefTitle, href: hrefLink }
],
user_prompt_message: userPrompt
},
function(response) {
showLoader(false);
});
}
function showStream(){
FB.api('/me', function(response) {
//console.log(response.id);
streamPublish(response.name, 'I like the articles of Thinkdiff.net', 'hrefTitle', 'http://thinkdiff.net', "Share thinkdiff.net");
});
}
function share(){
showLoader(true);
var share = {
method: 'stream.share',
u: 'http://thinkdiff.net/'
};
FB.ui(share, function(response) {
showLoader(false);
console.log(response);
});
}
function graphStreamPublish(){
showLoader(true);
FB.api('/me/feed', 'post',
{
message : "I love thinkdiff.net for facebook app development tutorials",
link : 'http://ithinkdiff.net',
picture : 'http://thinkdiff.net/iphone/lucky7_ios.jpg',
name : 'iOS Apps & Games',
description : 'Checkout iOS apps and games from iThinkdiff.net. I found some of them are just awesome!'
},
function(response) {
showLoader(false);
if (!response || response.error) {
alert('Error occured');
} else {
alert('Post ID: ' + response.id);
}
});
}
function fqlQuery(){
showLoader(true);
FB.api('/me', function(response) {
showLoader(false);
//http://developers.facebook.com/docs/reference/fql/user/
var query =FB.Data.query('select name, profile_url, sex, pic_small from user where uid={0}', response.id);
query.wait(function(rows) {
document.getElementById('debug').innerHTML = 'FQL Information: '+"<br />" +
'Your name: ' +rows.name+ "<br />" +
'Your Sex: ' +(rows.sex!= undefined ? rows.sex : "") + "<br />" +
'Your Profile: ' +"<a href='" + rows.profile_url + "'>" + rows.profile_url + "</a>" + "<br />" +
'<img src="' +rows.pic_small + '" alt="" />' + "<br />";
});
});
}
function setStatus(){
showLoader(true);
status1 = document.getElementById('status').value;
FB.api( {
method: 'status.set',
status: status1
},
function(response) {
if (response == 0){
alert('Your facebook status not updated. Give Status Update Permission.');
} else{
alert('Your facebook status updated');
} showLoader(false);
}
);
}
function showLoader(status){
if (status)
document.getElementById('loader').style.display = 'block';
else
document.getElementById('loader').style.display = 'none';
} </script>
<h3>New JavaScript SDK & OAuth 2.0 based FBConnect Tutorial | Thinkdiff.net</h3>
<button id="fb-auth">Login</button>
<div id="loader" style="display:none">
<img src="ajax-loader.gif" alt="loading" />
</div>
<br />
<div id="user-info"></div>
<br />
<div id="debug"></div>
<div id="other" style="display:none">
<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>
<br />
<textarea id="status" cols="50" rows="5">Write your status here and click 'Status Set Using Legacy Api Call'</textarea>
<br />
<a href="#" onclick="setStatus(); return false;">Status Set Using Legacy Api Call</a>
</div>
</body>
</html>
此外，如果你使用PHP SDK 3.0或這個新的JavaScript SDK的方式來驗證您的網站，你可以在應用程序設置中啟用OAuth的遷移。 希望這將有助於您了解新的JavaScript SDK。
來源網址：http://thinkdiff.net/facebook/new-javascript-sdk-oauth-2-0-based-fbconnect-tutorial/
{:5_4:}牛X海海!!!
頁:
[1]