October 7, 2013

How to allow Facebook logins on your Drupal site

When creating a Drupal site with the hopes of user engagement you generally need users of the site to have an account. Often potential users don't want to share their email account or other personal information with just any random site on the internet and this barrier can be a huge hurdle when it comes time for them to signup. An effective way around this is to leverage third party login services such as Google+ or Facebook. In this short tutorial I'll show you how to enable the latter on your Drupal site.

The modules you'll need

Before getting started you're going to need a Drupal 7 site and some modules. Download each of the modules listed below,

or better yet, use drush

drush dl oauth oauthconnector oauth2 connector http_client ctools

Next, head to your modules page and enable the OAuth Connector module which will handily enable all dependencies needed or again use drush

drush pm-enable oauthconnector

With that part out of the way, head on over to Facebook and setup a Facebook App. You'll need to have a Facebook account and be logged in. Once you're both of those things follow this link to go directly to the Facebook developers area: https://developers.facebook.com/apps.







Give your app a name and optionally a namespace and/or category and click continue. You'll need to enter a captcha after this as well. I had a hard time with mine, but you should do fine.

After that you'll get to the good stuff. Go ahead and enter your app domain (eg. socialnetworklogins.com). After that we'll head back to your Drupal site. Don't close the Facebook app window just yet. You'll need it in a minute.

From the admin menu on your Drupal site, click Structure, then OAuth Connector.




The OAuth Connector developers have been nice enough to provide some presets for commonly used OAuth providers. Select Facebook from the Preset drop down and click Add Provider. All the defaults should be fine the way there are, but you'll want to grab both the OAuth Consumer Key and the OAuth Consumer Secret from your Facebook App and enter them into the appropriate fields. Don't close that Facebook App page yet!







You'll then want to scroll to the bottom of the page and open the two fieldsets labeled "NAME" and "AVATAR". These are values coming from the logging user's Facebook profile and being mapped to a Drupal user account.

Under the "Field to match on user profile" label select Username for the NAME and Picture for the AVATAR.




Click save and continue and you'll be back on the OAuth Connector listing page. What you'll need now from this page is your connectors callback URL. Copy it and head back to your Facebook App's settings page.










Once you've done that you can close the Facebook App page and head back to Drupal for the final stretch.

The last two things you'll need to do are allow Anonymous users access to the login button for Facebook and put that login button somewhere on your site. First start by loading up your permissions page and under the Connector fieldgroup look for a "Connect with Facebook" permission and check the box for Anonymous users.




And lastly, put the Connector block somewhere in a region on your site.




There you have it. Log out and navigate to any page that you placed the Connector block on, click it, and you'll be logging in with Facebook on your Drupal site.

Keep in mind that while your facebook app is in sandbox mode only admins of your app on Facebook will be able to successfully login to your site.