There are basically three PHP files in this tutorial, the purpose of these files is to connect to Facebook and import user details, in order to complete registration or login the existing users.
Configuration file (config.php) basically does nothing but stores settings information, which are needed by Facebook API and database queries, we just include this file wherever needed. Main Page (index.php) is the front page where visitors see Ajax Facebook Connect button.Processing (process_facebook.php) is the important file, because it retrieves, stores user details in database, logs-in user and responds with the result.
Configuration file (config.php) basically does nothing but stores settings information, which are needed by Facebook API and database queries, we just include this file wherever needed. Main Page (index.php) is the front page where visitors see Ajax Facebook Connect button.Processing (process_facebook.php) is the important file, because it retrieves, stores user details in database, logs-in user and responds with the result.
I am sure at this point, I am sure you must have created a Facebook application and wrote down its App ID and App Secret.
Run MySql query below in phpMyAdmin to create a table called “usertable“, table containing 4 fields. id(Int, Auto Increment), fbid(BigInt, Facebook ID), fullname(Varchar, Full Name) and email(Varchar, Email). Note that fbid is BIGINT to make sure all long facebook IDs fit in it.
CREATE TABLE IF NOT EXISTS `usertable` (
`id` int(20) NOT NULL AUTO_INCREMENT,
`fbid` bigint(20) NOT NULL,
`fullname` varchar(60) NOT NULL,
`email` varchar(60) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1;
`id` int(20) NOT NULL AUTO_INCREMENT,
`fbid` bigint(20) NOT NULL,
`fullname` varchar(60) NOT NULL,
`email` varchar(60) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1;
Configuration File
Insert needed values in config.php file, replace xxxx with your Facebook App ID, App Secret and MySQL database information. Specify return URL and permissions required.
1
2 3 4 5 6 7 8 9 10 11 12 13 14 |
<?php
########## app ID and app SECRET (Replace with yours) #############$appId = 'xxxxxx'; //Facebook App ID $appSecret = 'xxxxxxxxxxxxxx'; // Facebook App Secret $return_url = 'http://yoursite.com/connect_script/'; //path to script folder $fbPermissions = 'publish_stream,email'; //more permissions : https://developers.facebook.com/docs/authentication/permissions/ ########## MySql details (Replace with yours) #############$db_username = "xxxxxx"; //Database Username $db_password = "xxxxxx"; //Database Password $hostname = "localhost"; //Mysql Hostname $db_name = 'database_name'; //Database Name ###################################################################?> |
Main Page
Main page (index.php) renders “Facebook Connect” button, and logs-in user using jQuery Ajax with click of the button. It uses session variables set in process_facebook.phpto login users, you just have to replace it with some built-in user authentication system, which will instantly check user and log him/her in.
1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 |
<?php
session_start(); include_once("config.php"); if(isset($_GET["logout"]) && $_GET["logout"]==1) { //User clicked logout button, distroy all session variables. session_destroy(); header('Location: '.$return_url); } ?> <!DOCTYPE html> <html xmlns:fb="http://www.facebook.com/2008/fbml" xml:lang="en-gb" lang="en-gb" > <head> <!-- Call jQuery --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <title>Ajax Facebook Connect With jQuery</title> <script> function AjaxResponse() { var myData = 'connect=1'; //For demo, we will pass a post variable, Check process_facebook.php jQuery.ajax({ type: "POST", url: "process_facebook.php", dataType:"html", data:myData, success:function(response){ $("#results").html('<fieldset style="padding:20px">'+response+'</fieldset>'); //Result }, error:function (xhr, ajaxOptions, thrownError){ $("#results").html('<fieldset style="padding:20px;color:red;">'+thrownError+'</fieldset>'); //Error } }); } function LodingAnimate() //Show loading Image { $("#LoginButton").hide(); //hide login button once user authorize the application $("#results").html('<img src="ajax-loader.gif" /> Please Wait Connecting...'); //show loading image while we process user } function ResetAnimate() //Reset User button { $("#LoginButton").show(); //Show login button $("#results").html(''); //reset element html } </script> </head> <body> <?php if(!isset($_SESSION['logged_in'])) { ?> <div id="results"> </div> <div id="LoginButton"> <div class="fb-login-button" onlogin="javascript:CallAfterLogin();" size="medium" scope="<?php echo $fbPermissions; ?>">Connect With Facebook</div> </div> <?php } else { echo 'Hi '. $_SESSION['user_name'].'! You are Logged in to facebook, <a href="?logout=1">Log Out</a>.'; } ?> <div id="fb-root"></div> <script type="text/javascript"> window.fbAsyncInit = function() { FB.init({appId: '<?php echo $appId; ?>',cookie: true,xfbml: true,channelUrl: '<?php echo $return_url; ?>channel.php',oauth: true});}; (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 CallAfterLogin(){ FB.login(function(response) { if (response.status === "connected") { LodingAnimate(); //Animate login FB.api('/me', function(data) { if(data.email == null) { //Facbeook user email is empty, you can check something like this. alert("You must allow us to access your email id!"); ResetAnimate(); }else{ AjaxResponse(); } }); } }); } </script> </body> </html> |
No hay comentarios. :
Publicar un comentario