How to implement facebook login using FB OAuth in Drupal7?

May 09, 2016 - 07:48

In one of my Drupal 7 projects, I had to implement "Login with Facebook" in the site. So I used fboauth module with fboauth_profile2. First I  created a Facebook app. To create a Facebook app, use the following steps in your Facebook profile.

  1. Go to developers.facebook.com and click 'Add a new App' from the right hand side - top select box.
  2. Select a platform and type your app name.
  3. Go with the configurations and enter your site url (if your are using a virtual host setup, it can also be integrated with your app through its url).
  4. Now you will get an App ID, API Version and a App Secret (available in your dashboard).
  5. Add a valid contact email id.
  6. Go to 'APP status and review' page of your app; click 'yes' for 'Do you want to make this app and all its live features available to the general public?' option. This is for making this app and all its live features available to the general public.
  7. Now we can configure our Facebook app with Drupal site as,
    • Download and enable the module fboauth.
    • Go to Facebook OAuth settings(admin/config/people/fboauth) and enter the App ID, API Version, App Secret.
    • Click the 'Save' button.
  8. After this we have to create a profile type to save the Facebook details for user account credentials. For implementing this,
    • Download and enable the modules,
    • Follow the steps to map the Facebook profile with your site.
      • Create a new profile at "Structure" -> "Profile Types" -> "Add Profile Type" (admin/structure/profiles/add).
      • Make sure to enable the option "Show during user account registration".
      • Add fields to the profile, such as "First name", "Last name", "Gender", "Location" and "Facebook profile link" as textfield type.
      • Map the Facebook properties to the profile fields 'Facebook OAuth settings' page (admin/config/people/fboauth) in Profile2 Field Mapping section.
  9. Now the settings for user account creation via FB login.
    • Go to Account settings (admin/config/people/accounts).
    • In Registration and cancellation,
      • Check 'Visitors'.
      • Uncheck 'Visitors, but administrator approval is required'.
      • Click 'Save configuration' button.
  10. Give execute permission for facebook profile picture folder (sites/default/files/styles/thumbnail/public/pictures).
  11. Hide the normal user login block and configure facebook login/connect button block.
    • Go to 'Blocks' (admin/structure/block).
    • Configure the 'Facebook login' block to the 'sidebar first' region (select regions based on your needs).
    • Select 'anonymous user' in Roles (Show block for specific roles) to set the block for login section itself.
  12. You can create a custom login button instead of Facebook login/connect button block configuration. For this,
    • First of all, you have to create a markup link using fboauth_action_display in your module callbacks,
      // Facebook login for anonymous users.
      if (in_array('anonymous user', $GLOBALS['user']->roles)) {
       // Set the redirect to the current page (unless we're on the login page).
       $destination = drupal_get_destination();
       $redirect = (arg(0) === 'user' && (arg(1) === 'login' || arg(1) == '')) ? NULL : $destination['destination'];
       // Add button for login.
       $button['site-facebook-button'] = array(
       '#markup' => fboauth_action_display('connect', $redirect),
       );
       if (variable_get('fboauth_popup', 1) && !variable_get('fboauth_always_load_js', 0)) {
       drupal_add_js(drupal_get_path('module', 'fboauth') . '/fboauth_popup.js');
       }
      }
    • Now $button['site-facebook-button'] contains a login button.To theme this button, copy and paste theme_fboauth_action__connect() function from fboauth.module file into your template.php file of your theme and change the output by adding classes to attributes or rel attribute to the link, change the return values etc. Below I have changed a lot,
      /**
       * Theme function for facebook link to initiate a Facebook Connect login.
       * @param $variables.
       * @return $fb_connect_link (facebook themed link).
       */
      function MYTHEME_fboauth_action__connect($variables) {
        $action = $variables['action'];
        $link = $variables['properties'];
        $url = url($link['href'], array('query' => $link['query']));
        $link['attributes']['class'][] = 'facebook-action-connect MY-STYLE-CLASS';
        $link['attributes']['rel'] = 'nofollow';
        $attributes = isset($link['attributes']) ? drupal_attributes($link['attributes']) : '';
        $title = 'LOGIN BUTTON';
        $src = ($GLOBALS['is_https'] ? 'https' : 'http') . '://www.facebook.com/images/fbconnect/login-buttons/connect_light_medium_short.gif';
        $fb_connect_link = '<a ' . $attributes . ' href="' . $url . '">' . $title . '</a>';
        return $fb_connect_link;
      }
    • And clear your site cache, try login.

Hope this information is useful. To make more changes, read the README.txt from fboauth module.