TShopping
標題:
新的JavaScript SDK及OAuth的2.0基於FBConnect的教程
[打印本頁]
作者:
woff
時間:
2012-3-8 00:43
標題:
新的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
在開始之前:
1。Facebook的認證過程這是FACEBOOK授權過程將如何工作。在代碼中,我們將按照這一進程。
[attach]118501[/attach]
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>
< HTML XMLNS: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[0].name + "<br />" +
'Your Sex: ' + (rows[0].sex!= undefined ? rows[0].sex : "") + "<br />" +
'Your Profile: ' + "<a href='" + rows[0].profile_url + "'>" + rows[0].profile_url + "</a>" + "<br />"+
'<img src="' + rows[0].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[0].name + "<br />" +
'Your Sex: ' + (rows[0].sex!= undefined ? rows[0].sex : "") + "<br />" +
'Your Profile: ' + "<a href='" + rows[0].profile_url + "'>" + rows[0].profile_url + "</a>" + "<br />" +
'<img src="' + rows[0].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的遷移。[attach]118502[/attach]
希望這將有助於您了解新的JavaScript SDK。
來源網址:
http://thinkdiff.net/facebook/new-javascript-sdk-oauth-2-0-based-fbconnect-tutorial/
作者:
woff
時間:
2013-2-1 19:31
牛X海海!!!
歡迎光臨 TShopping (http://www.tshopping.com.tw/)
Powered by Discuz! X3.2