Configure Facebook login

The MobiLoud Facebook Login implementation works like a bridge between the app and the website.

The idea is to let the native code handle the Facebook authentication, and then send the authentication token back to the website, inside the app, if the authentication is successful.

In this guide, we will go through the MobiLoud configuration setup, as well as details on how to make this work with a website that offers Facebook Login as an authentication option.

⚠️ Changes to your website code will be required for the Facebook Login to integrate with your website. We highly recommend implementing this with the assistance of a developer.

App Configuration

For this feature to be available for your app, an update is required.

While preparing the update the following key must be added to the .plist for iOS, or config file for Android:

<key>FacebookAppID</key>
<string>XXXXXXXXXXXXXXXXX</string>

The value for that key should be the ID of the Facebook App that is currently in use on the website to handle the Facebook Login.

MobiLoud Configuration

There are many ways to configure the Facebook login on a website, the first thing you will want to do is to test your integration on the web and look into which URL is loaded when you click the “Facebook Login” button.

You will then need to create a regex that matches that URL, so you can tell the app when to trigger the native Facebook Login. For this, you can add the following code snippet to your app’s Advanced Configuration:‍

"Regex_Social_Login": {    
  "Regex_Social_Login_Opening_Method": "popup",    
  "Regex_Social_Login_Rules": [      
    {        
    	"Regex": ".*facebook.*"      
    }    
  ]  
}

In this case, we are using a generic regex, but you will want to get more specific depending on the URL used on your website by the Facebook login.

If implemented correctly, once the website’s Facebook login button is clicked, the app will open a new window, inside your app, with the Facebook login form.

While the form might be slightly different from what you see on the website, user’s should be able to login with their Facebook account without any issues.

Receiving the Facebook token

After a successful login, the app will send a message back to the page that originally triggered the Facebook login, via Javascript. The message will include the access token, generated by the Facebook API after a successful login.

You can then use the access token to get user details, such as name and email, via the Facebook Graph API.

You can add the following Javascript code snippet to that page to receive the message:‍

window.addEventListener('message', function(event) {
	if (event.data && event.data.token) {
		var token = event.data.token;
	}
});

From here, you will need to use the access token to get the user's email, and then use his email to identify and authenticate him on the website.

WordPress code sample

We’ve prepared a simple code sample for an implementation on a WordPress website.

Here is the code that was placed on the theme’s functions.php file:‍

// Enqueue your JavaScript filefunction 
enqueue_my_script() {    
  wp_enqueue_script( 'my-script', get_template_directory_uri() . '/assets/js/my-script.js', array('jquery'), '1.2', true );
  wp_localize_script( 'my-script', 'my_ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
}

add_action( 'login_enqueue_scripts', 'enqueue_my_script' );

// Handle AJAX requestfunction 
handle_ajax_request() {    
  $token = $_POST['token'];    
  
  // Use the token to call the Facebook Graph API and get the user's email    
  $response = file_get_contents("");    
  $response = json_decode($response);    
  $email = $response->email;
  
  // Log the user into WordPress    
  $user = get_user_by( 'email', $email ); 
  
  if ( $user ) {        
    wp_set_current_user( $user->ID, $user->user_login );        
    wp_set_auth_cookie( $user->ID );        
    do_action( 'wp_login', $user->user_login, $user );    
	}    
  
  // this is required to terminate immediately and return a proper response  
  wp_die(); 
}

add_action( 'wp_ajax_nopriv_my_action', 'handle_ajax_request' );
add_action( 'wp_ajax_my_action', 'handle_ajax_request' );

Here is the Javascript code under the my-script.js file:‍

window.addEventListener('message', function(event) {	
  if (event.data && event.data.token) {		
    var token = event.data.token;		
    // Send the token to your PHP script via AJAX		
    jQuery.post(my_ajax_object.ajax_url, {			
    action: 'my_action',			
    token: token		
  }, 
  function(response) {	
    // Redirect the user to a specific URL after a successful login			
    window.location.href = "";		
  });	
}});