How to Do Facebook Login Using 'wp_insert_user'? - json

Question

I am building a user generated content sharing theme and I want to make a custom Facebook connect. After researching, I found out this code.
The following code is adding the app to the users profile in Facebook, but is not creating a new user and also doesn't makes them logged in.
Here is the full code (to be added in functions.php).
Step 1 - Intializing javascript at header area
function fb_head(){
if( is_user_logged_in() )
return;
?>
<script type="text/javascript">
window.fbAsyncInit = function(){
FB.init({
appId:'APP_ID',
status:true,
cookie:true,
xfbml:true,
oauth:true
});
};
</script>
<div id="fb-root"></div>
<script type="text/javascript">
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
<?php
}
add_action( 'wp_head', 'fb_head' );
Step 2 - Inserting a button for facebook login
<button id="facebook_connect">Connect with facebook</button>
Step 3 - Loading Jquery Library
function mytheme_enqueue_scripts(){
wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_scripts');
Step 4 - Add a jQuery on-click function to the button we have created
This code will be placed on the wp footer section (before the closing body tag).
function fb_footer(){
if( is_user_logged_in()):
echo "<script type='text/javascript'> jQuery('#facebook_connect').hide(); </script>";
return;
endif;
?>
<script type="text/javascript">
jQuery('#facebook_connect').click(function(){
FB.login(function(FB_response){
if( FB_response.status === 'connected' ){
fb_intialize(FB_response);
}
},
{scope: 'email'});
});
function fb_intialize(FB_response){
FB.api(
'/me',
'GET',
{'fields':'id,email,username,verified,name'},
function(FB_userdata){
jQuery.ajax({
type: 'POST',
url: 'AJAXURL',
data: {
"action": "fb_intialize",
"FB_userdata": FB_userdata,
"FB_response": FB_response
},
success: function(user){
if( user.error ){
alert( user.error );
}
else if( user.loggedin ){
window.location.reload();
}
}
});
}
);
};
</script>
<?php
}
add_action( 'wp_footer', 'fb_footer' );
Step 5 - MAIN STEP: Adding the handler function
function wp_ajax_fb_intialize(){
#error_reporting( 0 ); // Don't break the JSON result
header( 'Content-type: application/json' );
if( !isset( $_REQUEST['FB_response'] ) || !isset( $_REQUEST['FB_userdata'] ))
die( json_encode( array( 'error' => 'Authonication required.' )));
$FB_response = $_REQUEST['FB_response'];
$FB_userdata = $_REQUEST['FB_userdata'];
$FB_userid = (int) $FB_userdata['id'];
if( !$FB_userid )
die( json_encode( array( 'error' => 'Please connect your facebook account.' )));
global $wpdb;
$user_ID = $wpdb->get_var( "SELECT user_id FROM $wpdb->usermeta WHERE meta_key = '_fbid' AND meta_value = '$FB_userid'" );
if( !$user_ID ){
$user_email = $FB_userdata['email'];
$user_ID = $wpdb->get_var( "SELECT ID FROM $wpdb->users WHERE user_email = '$user_email'" );
if( !$user_ID ){
if ( !get_option( 'users_can_register' ))
die( json_encode( array( 'error' => 'Registration is not open at this time. Please come back later..' )));
extract( $FB_userdata );
$display_name = $name;
$user_login = $username;
if( empty( $verified ) || !$verified )
die( json_encode( array( 'error' => 'Your facebook account is not verified. You hae to verify your account before proceed login or registering on this site.' )));
$user_email = $email;
if ( empty( $user_email ))
die( json_encode( array( 'error' => 'Please re-connect your facebook account as we couldnt find your email address..' )));
if( empty( $name ))
die( json_encode( array( 'error' => 'empty_name', 'We didnt find your name. Please complete your facebook account before proceeding..' )));
if( empty( $user_login ))
$user_login = sanitize_title_with_dashes( sanitize_user( $display_name, true ));
if ( username_exists( $user_login ))
$user_login = $user_login. time();
$user_pass = wp_generate_password( 12, false );
$userdata = compact( 'user_login', 'user_email', 'user_pass', 'display_name' );
$user_ID = wp_insert_user( $userdata );
if ( is_wp_error( $user_ID ))
die( json_encode( array( 'error' => $user_ID->get_error_message())));
update_user_meta( $user_ID, '_fbid', (int) $id );
}
else{
update_user_meta( $user_ID, '_fbid', (int) $FB_userdata['id'] );
}
}
wp_set_auth_cookie( $user_ID, false, false );
die( json_encode( array( 'loggedin' => true )));
}
add_action( 'wp_ajax_nopriv_fb_intialize', 'wp_ajax_fb_intialize' );
THis is how I add the Facebook button:
<button id="facebook_connect">Connect with Facebook</button>
If anyone is trying it please replace the App ID.

Answer 1

Thanks for the code! Worked like a charm. But there is one really important security thing I discovered!
In the console I just changed facebook variables before sending the ajax request and I could login with everyones fb account (if you know their facebook id). The next couple of lines also check the fb token and validates if the login really is valid!
So in your wp_ajax_fb_intialize function you should definetely add these couple of lines:
$FB_response = $_REQUEST['FB_response'];
$FB_userdata = $_REQUEST['FB_userdata'];
$FB_userid = (int) $FB_userdata['id'];
//NEW CODE INSERT - check if token is valid
$token = $FB_response['authResponse']['accessToken'];
$path = 'https://graph.facebook.com/me?access_token='.$token;
$content = #file_get_contents($path);
$fb_user = json_decode($content);
if ($fb_user->id != $FB_userdata['id'])
die( json_encode( array( 'error' => 'FB login error' )));
I used file_get_contents but it is also possible to use curl

Answer 2

Changed the ajax url from
url: 'AJAXURL',
to
url: '<?php echo admin_url('admin-ajax.php'); ?>',
One thing I noticed while testing was that if I delete a user from the wp_users table the user meta with the facebook id will still be there so you may need to check if the facebook id is associated with an invalid user id in your ajax callback e.g.
global $wpdb;
$user_ID = $wpdb->get_var( "SELECT user_id FROM $wpdb->usermeta WHERE meta_key = '_fbid' AND meta_value = '$FB_userid'" );
// check if the user id is valid
if( false === ($check_user = get_userdata($user_ID)) )
{
$user_ID = false; // set to false to force create a new user
}
The rest of your code worked fine.