Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 104,490

HOME > บทความจากสมาชิก > Facebook Login Api ด้วย JavaScript SDK/PHP และการจัดเก็บใน MySQL (Update 2017)




 
VPS  250 ҷ͹

Facebook Login Api ด้วย JavaScript SDK/PHP และการจัดเก็บใน MySQL (Update 2017)

การทำ Facebook Login Api ด้วย JavaScript และ PHP และการจัดเก็บใน MySQL (Update 2017) การทำ Login ด้วย Facebook API ปัจจุบัน V.2.x ที่ใช้อยู่ได้ถูกยกเลิกและไม่สามารถใช้งานได้แล้ว จะต้องทำการอัพเดดให้เป็น V.4 หรือ V.5 แต่ก็จะมีปัญหาตามมาคือ จะต้องรองรับ PHP 5.4 ขึ้นไปเท่านั้น อาจจะมีปัญหากับหลายๆ คนที่ยังใช้ PHP 5.3 ลงมา จึงเป็นที่มาของบทความนี้ ที่จะเลือกใช้ JavaScript SDK กับ PHP เบื้องต้นที่รองรับการใช้งานทุกเวอร์ชั่น ซึ่งใน ThaiCreate.Com เองเลือกใช้ JavaScript SDK ด้วยเช่นเดียวกัน ส่วนวิธีการเขียนนั้นจะต้องบอกเลยว่าง่ายมาก สามารถดึงทั้ง Facebook ID และ Email ของสมาชิกที่ Login ได้ด้วย



การทำ Facebook Login Api ด้วย JavaScript SDK/PHP


ขั้นแรกสุดจะต้องสสมัคร Facebook Developer โดยสามารถสมัครได้ที่ https://developers.facebook.com/

ก่อนจะเปิดใช้งาน Facebook Login จะต้องสร้าง App ที่จะรองรับการทำงานซะก่อน โดยไปที่

Facebook Login JavaScript API

ลือกเมนู Add a New App

Facebook Login JavaScript API

ตั้งชื่อ App หรือชื่อเว็บ ซึ่งอาจจะหมายถึงชื่อกรุ๊ปที่จะใช้งาน

Facebook Login JavaScript API

ในหน้า Dashboard ให้ Copy ตัว App ID และ App Secret ไปใช้งาน แต่ JavaScript ADKจะใช้แค่ App ID

Facebook Login JavaScript API

แสดง App ID และ App Secret

Facebook Login JavaScript API

App Review ตั้งค่าการ Login ให้เป็น Yes

Facebook Login JavaScript API

ในส่วนของ Settings ให้เลือก Add Platform

Facebook Login JavaScript API

เลือกเป็น Website

Facebook Login JavaScript API

จากนั้นใส่ URL ให้ถูกต้อง (ถ้าใส่ไม่ถูกต้องาจจะไม่ทำงาน) จากนั้นทดสอบเขียน JavaScript แบบง่ายๆ








login.html
<html>
<head>
<title>ThaiCreate.Com Tutorials</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>

<script>

  var bFbStatus = false;
  var fbID = "";
  var fbName = "";
  var fbEmail = "";

  window.fbAsyncInit = function() {
    FB.init({
      appId      : '1660361030927512',
      cookie     : true,
      xfbml      : true,
      version    : 'v2.8'
    });
    FB.AppEvents.logPageView();   
  };

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));


function statusChangeCallback(response)
{

		if(bFbStatus == false)
		{
			fbID = response.authResponse.userID;

			  if (response.status == 'connected') {
				getCurrentUserInfo(response)
			  } else {
				FB.login(function(response) {
				  if (response.authResponse){
					getCurrentUserInfo(response)
				  } else {
					console.log('Auth cancelled.')
				  }
				}, { scope: 'email' });
			  }
		}


		bFbStatus = true;
}

function getCurrentUserInfo() {
  FB.api('/me?fields=name,email', function(userInfo) {

	  fbName = userInfo.name;
	  fbEmail = userInfo.email;

	  alert(fbID);
	  alert(fbName);
	  alert(fbEmail);

  });
}

function checkLoginState() {
  FB.getLoginStatus(function(response) {
    statusChangeCallback(response);
  });
}


</script>

เข้าสู่ระบบโดย Facebook...
<fb:login-button 
  scope="public_profile,email"
  onlogin="checkLoginState();">
</fb:login-button>

</body>
</html>

ทดสอบการทำงาน

Facebook Login JavaScript API

แสดงปุ่ม Login ของ Facebook

Facebook Login JavaScript API

เมื่อคลิกที่ Login โปรแกรมจะให้ยืนยันสิทธิ์การเข้าถึงข้อมูล

Facebook Login JavaScript API

ในส่วนของ Code เรามีการให้ดึงค่า ID,Name และ Email

Facebook Login JavaScript API

โปรแกรมจะดึง alert ค่าของ ID,Name และ Email

ตัวอย่างการทำระบบ Login ร่วมกับ PHP/MySQL

Facebook Login JavaScript API

ออกแบบตารางดังรูป

CREATE TABLE IF NOT EXISTS `tb_facebook` (
  `ID` int(6) NOT NULL AUTO_INCREMENT,
  `FACEBOOK_ID` varchar(50) NOT NULL,
  `NAME` varchar(150) NOT NULL,
  `EMAIL` varchar(250) NOT NULL,
  `PICTURE` varchar(250) NOT NULL,
  `LINK` varchar(250) NOT NULL,
  `CREATE_DATE` datetime NOT NULL,
  PRIMARY KEY (`ID`),
  UNIQUE KEY `ID` (`FACEBOOK_ID`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;









จากนั้นเราจะเขียน Code ต่างๆ ดังนี้

login.html (สำหรับแสดงปุ่ม Login ของ Facebook)
<html>
<head>
<title>ThaiCreate.Com Tutorials</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>

<script>

  var bFbStatus = false;
  var fbID = "";
  var fbName = "";
  var fbEmail = "";

  window.fbAsyncInit = function() {
    FB.init({
      appId      : '1660361030927512',
      cookie     : true,
      xfbml      : true,
      version    : 'v2.8'
    });
    FB.AppEvents.logPageView();   
  };

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));


function statusChangeCallback(response)
{

		if(bFbStatus == false)
		{
			fbID = response.authResponse.userID;

			  if (response.status == 'connected') {
				getCurrentUserInfo(response)
			  } else {
				FB.login(function(response) {
				  if (response.authResponse){
					getCurrentUserInfo(response)
				  } else {
					console.log('Auth cancelled.')
				  }
				}, { scope: 'email' });
			  }
		}


		bFbStatus = true;
}


    function getCurrentUserInfo() {
      FB.api('/me?fields=name,email', function(userInfo) {

		  fbName = userInfo.name;
		  fbEmail = userInfo.email;

			$("#hdnFbID").val(fbID);
			$("#hdnName ").val(fbName);
			$("#hdnEmail").val(fbEmail);
			$("#frmMain").submit();

      });
    }

function checkLoginState() {
  FB.getLoginStatus(function(response) {
    statusChangeCallback(response);
  });
}


</script>

เข้าสู่ระบบโดย Facebook...
<fb:login-button 
  scope="public_profile,email"
  onlogin="checkLoginState();">
</fb:login-button>

<form action="check.php" method="post" name="frmMain" id="frmMain">
	<input type="hidden" id="hdnFbID" name="hdnFbID">
	<input type="hidden" id="hdnName" name="hdnName">
	<input type="hidden" id="hdnEmail" name="hdnEmail"> 
</form>

</body>
</html>


check.php (ตรวจสอบว่ามีใน Table หรือยัง ถ้าไม่มีให้ Insert ถ้ามีแล้วให้ไปหน้าสมาชิก)
<?php
session_start();
//echo $_POST["hdnFbID"]."<br>";
//echo $_POST["hdnName"]."<br>";
//echo $_POST["hdnEmail"]."<br>";

	$objConnect = mysql_connect("localhost","root","root") or die(mysql_error());
	$objDB = mysql_select_db("mydb");
	mysql_query("SET NAMES UTF8");


	// Check Exists ID
	$strSQL = "SELECT * FROM tb_facebook WHERE FACEBOOK_ID = '".$_POST["hdnFbID"]."' ";
	$objQuery = mysql_query($strSQL);
	$objResult = mysql_fetch_array($objQuery);
	if($objResult)
	{
		$_SESSION["strFacebookID"] = $objResult["FACEBOOK_ID"];
		header("location:page1.php");
		exit();
	}
	else
	{
		// Create New ID

			$strPicture = "https://graph.facebook.com/".$_POST["hdnFbID"]."/picture?type=large";
			$strLink = "https://www.facebook.com/app_scoped_user_id/".$_POST["hdnFbID"]."/";

			$strSQL ="  INSERT INTO  tb_facebook (FACEBOOK_ID	,NAME,EMAIL,PICTURE,LINK,CREATE_DATE) 
				VALUES
				('".trim($_POST["hdnFbID"])."',
				'".trim($_POST["hdnName"])."',
				'".trim($_POST["hdnEmail"])."',
				'".trim($strPicture)."',
				'".trim($strLink)."',
				'".trim(date("Y-m-d H:i:s"))."')";
			$objQuery  = mysql_query($strSQL);

			$_SESSION["strFacebookID"] = $_POST["hdnFbID"];
			header("location:page1.php");
			exit();
	}

	mysql_close();
?>


page1.php (หลังจากที่ Login สำเร็จจะมาหน้านี้โดยใช้ Session ของ Facebook ID)
<?php
session_start();

	$objConnect = mysql_connect("localhost","root","root") or die(mysql_error());
	$objDB = mysql_select_db("mydb");
	mysql_query("SET NAMES UTF8");


	// Check Exists ID
	$strSQL = "SELECT * FROM tb_facebook WHERE FACEBOOK_ID = '".$_SESSION["strFacebookID"]."' ";
	$objQuery = mysql_query($strSQL);
	$objResult = mysql_fetch_array($objQuery);
	if($objResult)
	{
		echo "Welcome to my Account<br><br>";
		echo "Facebook ID = ".$objResult["FACEBOOK_ID"];
		echo "<br><a href='".$objResult["LINK"]."' target='_blank'>
		<img src='".$objResult["PICTURE"]."' border='0'></a><br><br>";
		echo $objResult["NAME"];
	}
	
	echo "<br><br><br><a href='logout.php'>Logout</a>";
	mysql_close();
?>


logout.php (ออกจากระบบ)
<?php
session_start();
session_destroy();
header("location:login.html");
?>


ทดสอบการทำงาน

Facebook Login JavaScript API

หน้าจอการ Login

Facebook Login JavaScript API

ยืนยันข้อมูล และ สิทธิ์การเข้าถึง ปกติจะถามแค่ครั้งเดียสเท่านั้น

Facebook Login JavaScript API

หลังจากนั้นโปรแกรมก็จะตรวจสอบข้อมูล Facebook ID ว่ามีใน Table หรือยัง ถ่าไม่มีให้ Insert ใหม่ หรือถ้ามีแล้วก็ให้ เข้ามายังส่วนของสมาชิกเลย โดยใช้ Session เก็บ Facebook ID และนำค่านี้ไปใช้งานหน้าอื่นๆ

ซึ่งตัวตัวอย่างจะมีการดึงรูปของ สมาชิก พร้อมทั้ง URL Link จะคลิกไปยังหาสมาชืกคนนั้นๆ ได้

Facebook Login JavaScript API

ข้อมูลถูก Insert ลงใน Table

สรุป จากตัวอย่างนี้จะเห็นว่าเราจะใช้ JavaScript SDK ดึงค่าจาก Facebook Account เฉพาะ ID, Name และ Email เท่านั้น และเมื่อได้ค่าเหล่านี้มาแล้วก็จะส่งให้ PHP ทำหน่าที่ในการจัดเก็บและตรวจอบเข่าสู่ระบบสมาชิก คำสั่งของ PHP ก็เป็นคำสั่งง่ายๆ ที่สามารถใช้งานได้กับ PHP ทุกๆ เวอร์ชั่น ซึ่งจะนำไปใช้งานได้กับ PHP เวอร์ชั่นเก่าๆ แทนทางเลือกการอัพเกรดเวอรืชั่น


   
Share
Bookmark.   

  By : TC Admin
  Article : บทความเป็นการเขียนโดยสมาชิก หากมีปัญหาเรื่องลิขสิทธิ์ กรุณาแจ้งให้ทาง webmaster ทราบด้วยครับ
  Score Rating :
  Create Date : 2017-04-08
  Download : No files
Sponsored Links
Windows Form กับ OpenFileDialog : การเปิด Browse และอัพโหลด Save ไฟล์ (VB.Net,C#)
Windows Form กับ OpenFileDialog : การเปิด Browse และอัพโหลด Save ไฟล์ (VB.Net,C#)
ตัวอย่างการใช้ Windows Form กับ OpenFileDialog เพื่อเปิด Browse และอัพโหลด Save ไฟล์ลงในโฟเดอร์ของ Application
Rating : Update : 2017-03-24 17:36:22
ตรวจสอบ Login จำนวนครั้งที่ผิด การแบนเวลา Login ด้วย PHP กับ MySqli (mysqli)
ตรวจสอบ Login จำนวนครั้งที่ผิด การแบนเวลา Login ด้วย PHP กับ MySqli (mysqli)
การทำระบบ Login ด้วย php กับ mysql (mysqli) และการตรวจสอบจำนวนครั้งที่ Login ผิด รวมทั้งวิธีการ Lock Account เมื่อ Login เกินจำนวนครั้ง การแบน การกำหนดระยะเวลาที่แบน
Rating : Update : 2017-03-24 17:41:11
Android Google Map (Step by Step)
Android Google Map (Step by Step)
ในการเรียกใช้งาน Google Map (แผนที่) แบบ Step by Step ขออธิบายรุปแบบง่าย ๆ เกี่ยวกับ วิธีการเรียกใช้งาน Google Map ว่าเหมือนกับการเรียกใช้งาน Google Map บน Web Application ทั่ว ๆ ไป คือ Google Map จะมีชุดคำสั่งหรือเราเรียกว่า Library ชื่อว่า Google Maps Android API
Rating : Update : 2015-11-26 13:51:18
เรามาใช้ Line Notify กันดีกว่า ด้วยการใช้ PHP ง่ายๆ และใช้งานได้ดี
เรามาใช้ Line Notify กันดีกว่า ด้วยการใช้ PHP ง่ายๆ และใช้งานได้ดี
การส่ง LINE เข้ากลุ่มโดยใช้ Line Notify ด้วย PHP แบบง่ายๆ
Rating : Update : 2017-06-23 08:28:13
PHP สอนใช้งาน Tinymce + filemanager Text Editor PHP
PHP สอนใช้งาน Tinymce + filemanager Text Editor PHP
บทความนี้จะมาสอนการใช้งาน textarea editor กันนะครับ โดยจะใช้ Tinymce + Feature filemanager ไว้ใช้สำหรับจัดการ ไฟล์ต่าง ๆหรือรูปภาพต่าง ๆใช้สำหรับ ภายในเว็บไซต์ นั่นเอง ผู้เขียน : Prapat Polchan
Rating : Update : 2016-07-29 16:52:35
แนะนำโปรแกรมเขียนโค๊ดบน มือถือ ต่อจากบทความที่แล้ว Quedo Code Editor
แนะนำโปรแกรมเขียนโค๊ดบน มือถือ ต่อจากบทความที่แล้ว Quedo Code Editor
บทความที่แล้ว สอนทำเซิร์ฟเวอร์จำลองบนมือถือ ครั้งนี้จะแนะนำแอพเขียนโค้ดบ้าง
Rating : Update : 2017-02-10 22:35:55
How to backup MySQL database and upload to google drive by Itechs
How to backup MySQL database and upload to google drive by Itechs
Backup database MySQL and upload to google drive
Rating : Update : 2016-02-13 22:06:51
ThaiCreate.Com Forum




Comunity Forum Free Web Script
Jobs Freelance Free Uploads
Free Web Hosting Free Tools

สอน PHP ผ่าน Youtube ฟรี
สอน Android การเขียนโปรแกรม Android
สอน Windows Phone การเขียนโปรแกรม Windows Phone 7 และ 8
สอน iOS การเขียนโปรแกรม iPhone, iPad
สอน Java การเขียนโปรแกรม ภาษา Java
สอน Java GUI การเขียนโปรแกรม ภาษา Java GUI
สอน JSP การเขียนโปรแกรม ภาษา Java
สอน jQuery การเขียนโปรแกรม ภาษา jQuery
สอน .Net การเขียนโปรแกรม ภาษา .Net
Free Tutorial
สอน Google Maps Api
สอน Windows Service
สอน Entity Framework
สอน Android
สอน Java เขียน Java
Java GUI Swing
สอน JSP (Web App)
iOS (iPhone,iPad)
Windows Phone
Windows Azure
Windows Store
Laravel Framework
Yii PHP Framework
สอน jQuery
สอน jQuery กับ Ajax
สอน PHP OOP (Vdo)
Ajax Tutorials
SQL Tutorials
สอน SQL (Part 2)
JavaScript Tutorial
Javascript Tips
VBScript Tutorial
VBScript Validation
Microsoft Access
MySQL Tutorials
-- Stored Procedure
MariaDB Database
SQL Server Tutorial
SQL Server 2005
SQL Server 2008
SQL Server 2012
-- Stored Procedure
Oracle Database
-- Stored Procedure
SVN (Subversion)
แนวทางการทำ SEO
ปรับแต่งเว็บให้โหลดเร็ว


สุดยอด Source Code V2.0
 

แจ้งชำระเงิน/โอนเงิน
 

Hit Link
   


Acc : thaicreate@hotmail.com










Load balance : Server 02
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2017 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
for Contact Us : [Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 , 08-9968-0655 อัตราราคา คลิกที่นี่