ASP.NET MVC, C#, MonoTouch, Entity Framework, Unit Test ...
เขียนคำสั่งในการ log in, log out Facebook ด้วย JavaScript SDK และ jQuery
เมื่อ :
25-Jan-12 0:10
อ่าน :
285 ครั้ง
Tag :
jquery facebooksdk
ในบทความที่ผ่านมา ผมได้แนะนำการเขียนคำสั่งเชื่อมต่อ Facebook แบบเบื้องต้น
วันนี้จึงขอแนะนำการเขียนคำสั่งเพื่อทำปุ่ม log in และ log out
ในกรณีที่ผู้ใช้กดปุ่ม log in จะมีหน้าต่าง Facebook log in ปรากฏขึ้นมาเพื่อให้ผู้ใช้ทำการ log in ด้วย Facebook account
และเมื่อผู้ใช้กดปุ่ม log out ก็จะเป็นการออกจากระบบของ Facebook
มาเริ่มดูคำสั่งกันเลยแล้วกันนะครับ
สร้างปุ่ม log in และ log out
<div id="fb-root">
<!-- log in button-->
<input id="btnLogIn" type="button" value="log in"/>
<br/><br/>
<!-- log out button-->
<input id="btnLogOut" type="button" value="log out"/>
</div>
include jQuery เข้าไปใน HTML page
<!-- include jQuery JavaScript library --> <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
เขียนคำสั่งผูก click event ให้กับปุ่ม log in และ log out
<script type="text/javascript">
//short hand jQuery document ready
$(function(){
//add handler to button click event
$("#btnLogIn").click(function(){
//check if user already logged in
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
alert("User is logged in this app with facebook.");
}else{
//the user hasn't even logged in to Facebook
//show pop up window for user to log in
//or not logged in this app with facebook
alert("User is not logged in facebook or not logged in this app with facebook.")
FB.login(function(response) {
if (response.status === 'connected') {
alert("User is logged in this app with facebook.");
}
else {
alert("User is not logged in this app with facebook.");
}
});
}
});//end FB.getLoginStatus
});//end FB.getLoginStatus
//log out
$("#btnLogOut").click(function(){
//check if user already logged in
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
//log out user
FB.logout(function(response) {
if(response.status == "unknown")
{
alert("User is logged out");
}
});
}
else
{
alert("User is not logged in, no need for logging out.");
}
});//end FB.getLoginStatus
}) //end $("#btnLogOut").click
});//end jQuery document ready
</script>
คำอธิบาย
ในคำสั่งข้างต้น ตรวจสอบสถานะการ log in ของผู้ใช้ด้วย FB.getLoginStatus
เพื่อตรวจสอบว่าผู้ใช้ได้ log in อยู่แล้วหรือไม่ หากยังไม่ได้ log in ก็ให้ทำการเรียกใช้ FB.login ซึ่งจะแสดงหน้าต่างให้ผู้ใช้ทำการ log in เข้า Facebook ในทางตรงข้ามใช้ FB.logout เพื่อทำการ log out ผู้ใช้ออกจาก Facebook ทั้ง FB.login และ FB.logout มี call back function ที่จะถูกเรียกใช้เมื่อ FB.login และ FB.logout ทำการ log in และ log out เรียบร้อย พร้อมทั้งส่ง response object ที่บอกสถานะการ log in ของผู้ใช้(response.status) ไปให้ call back function ด้วย
คำสั่งทั้งหมด (login-logout.html)
<!DOCTYPE html>
<html xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>Log in, Log out Facebook</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- include jQuery JavaScript library -->
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
//short hand jQuery document ready
$(function(){
//add handler to button click event
$("#btnLogIn").click(function(){
//check if user already logged in
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
alert("User is logged in this app with facebook.");
}else{
//the user hasn't even logged in to Facebook
//show pop up window for user to log in
//or not logged in this app with facebook
alert("User is not logged in facebook or not logged in this app with facebook.")
FB.login(function(response) {
if (response.status === 'connected') {
alert("User is logged in this app with facebook.");
}
else {
alert("User is not logged in this app with facebook.");
}
});
}
});//end FB.getLoginStatus
});//end FB.getLoginStatus
//log out
$("#btnLogOut").click(function(){
//check if user already logged in
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
//log out user
FB.logout(function(response) {
if(response.status == "unknown")
{
alert("User is logged out");
}
});
}
else
{
alert("User is not logged in, no need for logging out.");
}
});//end FB.getLoginStatus
}) //end $("#btnLogOut").click
});//end jQuery document ready
</script>
</head>
<body>
<div id="fb-root">
<!-- log in button-->
<input id="btnLogIn" type="button" value="log in"/>
<br/><br/>
<!-- log out button-->
<input id="btnLogOut" type="button" value="log out"/>
</div>
<script>
//fbAsyncInit is executed as soon as the JavaScript SDK is loaded asynchronously
window.fbAsyncInit = function() {
//initialize SDK
FB.init({
appId : 'appId', // App ID
channelUrl : 'channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};//end window.fbAsyncInit
// load the SDK asynchronously
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
</body>
</html>
download souce code ตัวอย่าง (NetBeanProject)
FacebookJavascriptSdk.zip
ความเห็น
- apache (4)
- asp-net (1)
- asp-net-mvc (4)
- c (1)
- c# (17)
- cms (1)
- comunity (2)
- edge (1)
- entity-framework (2)
- excel (2)
- facebooksdk (7)
- holiday (3)
- iis (1)
- javascript (12)
- jquery (9)
- log4php (1)
- mac-os (3)
- mcts (1)
- mind-map (1)
- monotouch (1)
- mysql (3)
- nant (2)
- nuget (1)
- objective-c (1)
- orchard (2)
- phonegap (1)
- php (8)
- phpmyadmin (2)
- selector (1)
- simple-test (1)
- sql-server-ce (2)
- string (1)
- svn (1)
- tool (9)
- ubuntu (1)
- unit-test (2)
- vba (2)
- visual-studio (3)
- xcode (3)
Friends
jirawat.in.th clipdonjai.com janawat.wordpress.com csharp89.blogspot.com 108blog.net