Facebook login with JavaScript SDK
FaceBook loging system in PHP with JavaScript SDK. Facebook Login is the easiest way to integrate login system in your web page. It allows users to log into the web application with their Facebook account. You will be glad to know that Facebook provides various SDK or API to Login with Facebook functionality on website. In PHP login with JavaScript SDK is the most user-friendly way to integrate Facebook Login on your website.
Here I have done it using Codeigniter Framewoek, you can use this login system with JavaScript SDK any PHP framework. If you have a website and using programming technology Codeigniter framework then this tutorial will be most helpful for you to give a user login with FaceBook. First create a Facebook app. collect these option. 1. Facebook APP Id, 2.Facebook App Secret, 3.Facebook login redirect URL.
Click here to create Facebook App. If you have done to create Facebook App then open your MySQL database and create a login table where user data will be inserted.
Create MySQL table
Follow the below instruction and create a table with these field.
CREATE TABLE `user_login` ( `id` int(11) NOT NULL AUTO_INCREMENT, `oauth_provider` enum('google','facebook') COLLATE utf8_unicode_ci NOT NULL, `oauth_uid` varchar(100) COLLATE utf8_unicode_ci NOT NULL, `username` varchar(50) COLLATE utf8_unicode_ci NOT NULL, `user_email` varchar(100) COLLATE utf8_unicode_ci NOT NULL, `gender` varchar(10) COLLATE utf8_unicode_ci NOT NULL, `picture_url` varchar(255) COLLATE utf8_unicode_ci NOT NULL, `register_date` datetime NOT NULL, `last_update_date` datetime NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
Create A Facebook Login Link
<a href="javascript:void(0);" onclick="fbLogin()" class="fb_log_in" id="fbLink" ><i class="fab fa-facebook-f"></i>
Use this JavaScript Library
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://apis.google.com/js/api:client.js"></script>
JavaScript SDK configuration and setup
<script type="text/javascript"> window.fbAsyncInit = function() { // FB JavaScript SDK configuration and setup FB.init({ appId : '1969047269828483', // FB App ID cookie : true, // enable cookies to allow the server to access the session xfbml : true, // parse social plugins on this page version : 'v2.8' // use graph api version 2.8 }); // Check whether the user already logged in FB.getLoginStatus(function(response) { if (response.status === 'connected') { //display user data //getFbUserData(); } }); }; // Load the JavaScript SDK asynchronously (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')); </script>
Facebook login with JavaScript SDK
<script type="text/javascript"> function fbLogin() { FB.login(function (response) { if (response.authResponse) { // Get and display the user profile data getFbUserData(); } else { document.getElementById('status').innerHTML = 'User cancelled login or did not fully authorize.'; } }, {scope: 'email'}); } </script>
Fetch the user profile data from facebook
<script type="text/javascript"> function getFbUserData(){ FB.api('/me', {locale: 'en_US', fields: 'id,first_name,last_name,email,link,gender,locale,picture'}, function (response) { console.log(response); var user_email=response.email; document.getElementById('fbLink').setAttribute("onclick","fbLogout()"); if(user_email=="" || user_email== null || user_email== undefined){ $('#Loginfaildmsg').html("You have no mail ID in your associated Account"); }else{ saveUserData(response); } }); } </script>
Save login user data
If you want to save the user data into the database then use this ajax method.
<script type="text/javascript"> function saveUserData(userData){ $.ajax({ type: "post", url: "<?php echo base_url('facebook-signup'); ?>", data:{userData: JSON.stringify(userData)}, success: function(res){ console.log(res); } }); } </script>
Now insert login user data into the database, follow this setps.
Codeigniter Route
<?php $route['facebook-signup']="LoginController/facebook_signup"; ?>
Project Controller
<?php public function facebook_signup(){ $this->MyModel->facebookSignup(); } ?>
Project Model
<?php function facebookSignup(){ $userData = json_decode($_POST['userData']); $oauth_provider="facebook" $login_email_id=$userData->email; $username=$userData->first_name.' '.$userData->last_name; $gender=$userData->gender; $picture_url=$userData->picture; $sec_qry=$this->db->select('*')->from('user_login')->where('user_email',$login_email_id)->get()->result(); if(sizeof($sec_qry) >0){ $updata=array('last_update_date'=>date("Y-m-d H:i:s")); $up_qry=$this->db->where('user_email',$login_email_id)->update('tbl_user_logins',$updata); if($up_qry){ $this->session->set_userdata('user_id',$sec_qry[0]->id); echo "update_success"; }else{ echo "error"; } }else{ $insdata=array('user_email'=>$login_email_id,'oauth_provider'=>$oauth_provider,'username'=>$username,'gender'=>$gender,'picture_url'=>$picture_url,'created_date'=>date("Y-m-d H:i:s")); $ins_qry=$this->db->insert('user_login',$insdata); $last_id=$this->db->insert_id(); if($ins_qry){ $this->session->set_userdata('user_id',$last_id); echo "insert_success"; }else{ echo "error"; } } } ?>
I do not know what to say really what you share very well and useful to the community, I feel that it makes our community much more developed, thanks
Hi :). I am from Netherlands and i don’t know how can i disable my signature? Regards 🙂
Where you want to disable your signature?