Last week's tutorial on Drupal Facebook comments integration lead our blog to traffic records and a mention on TheWeeklyDrop among other places. There's a lot of demand from Drupal website owners and managers to integrate Facebook with their website platform. Today, we're going to work through another of the most requested Facebook integration needs: login and connect.
One of the experiences that most irritate users of your website is having to create yet another account just to access your website or key functionality of it. The user now has to keep track of another username or email and password combination. If you require a unique login to your website, you're going to discourage some users from using your website.
Make it easy for your Drupal users: login with Facebook
A common solution to this poor experience in recent years is to suggest the user logs in via an account on a third-party website. Commonly, this is a social media account: Twitter, Google+, Facebook, etc. Most internet users have one of these accounts, and, among them, Facebook has the largest user base. Allowing users to login with their Facebook account is often the first third-party login system website owners or managers wish to integrate with their Drupal websites.
The negative side of allowing users to login with a third-party account, such as Facebook, is that their login has now become dependent on a third-party. As unlikely as it is for Facebook to go belly up anytime soon, it is possible. Massive social networks have collapsed quickly in the past (see: MySpace).
The Drupal Content Management System (CMS) provides multiple methods to authenticate Drupal users with Facebook accounts through contributed modules. Let's work through what I think is the best candidate for setting up a simple Drupal Facebook login: Simple FB Connect module.
Drupal user authentication with Facebook using Simple FB Connect module
To integrate a simple Facebook login and authentication system for Drupal, my choice for this tutorial is the appropriately named Simple FB Connect module. The module operates under the premise that all you want to do with it is allow users to login with their Facebook accounts: nothing more, nothing less. This module has very few configuration options and certainly doesn't integrate as deeply with Facebook and Drupal as some other login-related modules do. There's no way to pull additional account details from Facebook and add their data to custom user fields in Drupal here.
The Simple FB Connect module simply allows users to click a login link which syncs their Facebook data (after authentication) with a new Drupal user account. Their Facebook email address and profile photo will be added to their Drupal user account. The module works with the Drupal core account settings options of allowing users to create accounts with or without a secondary verification email or acceptance from an administrator account. Disabling a second verification level means that users can login with their Facebook account instantly and have access to your site.
Support for Simple FB Connect and Drupal 8
Updated July 7, 2017
One of the key reasons I'm using the Simple FB Connect module in this tutorial is that it is well supported with recent updates and rising usage statistics. In addition, the module supports Drupal 8 and has a full release available. I'll discuss alternative modules for Facebook authentication later in this tutorial.
The process outlined below is for Drupal 7 but is quite similar regarding the Drupal 8 release of Simple FB Connect. The key difference is in the installation process which is dependent on Composer. Our first Drupal 8 based tutorial revolves around the installation of Simple FB Connect and helps outline the specific details.
Setup Simple FB Connect module for Drupal Facebook login
Let's work through the steps of integrating the Simple FB Connect module with your Drupal website to allow Facebook user account authentication. First, we need to download our module and related dependencies.
- Download the Simple FB Connect module from its Drupal project page
Note: I would suggest using the 7.x-2.x version which is in Beta at the time of writing; the 2.x branch integrates the latest Facebook Connect API - Download and enable the dependencies (required for the 7.x-2.x+ versions of Simple FB Connect):
- X Autoload module from its Drupal project page
- Libraries API module from its Drupal project page
- Facebook PHP SDK version 4.0.x PHP library from its Github project page
Note: put the library in a "sites/all/libraries/facebook-php-sdk-v4" folder; I'm using version 4.0.23 in this tutorial
After enabling the module and dependencies, head to the config page (/admin/config/people/simple-fb-connect) for Simple FB Connect.
Phew, for a module with "Simple" in the title, it sure has a lot of dependencies! Integrating with third-party services is rarely straightforward. It might be time for a drink, there's more to do.
On the configuration page, you'll notice a few blank fields which are required (and I've filled in the above screenshot). You'll need a Facebook App ID and App Secret. You'll want to setup a Facebook Connect URL as well for security purposes. The field should be pre-filled on the configuration page with your site URL. We'll use this later. As the help text suggests, you'll need to create a Facebook App in order to get these pieces of data.
I have to create an entire Facebook App just to setup Drupal login for Facebook users?!
I know, it sounds like a lot of work. Fortunately, it's just a couple of steps. You can create the App with a personal Facebook account or a public Facebook page. Follow the link on the configuration page above to the Facebook app starter.
Create a Facebook App to support your Drupal Facebook login module
Let's run through creating the necessary basic app to allow Drupal website logins with Facebook. It's only a few steps. From the starter page, hit "Create a New App". You'll be prompted to fill out some basic App information. Here's how I filled out the App fields for this tutorial:
Hit "Create App ID" and you'll be prompted with a security question and/or Facebook verification process. You may need to add a credit card or walk through a mobile phone verification process to prove to Facebook you're a real person. As an additional step, I had the pleasure of proving my humanity by clicking on fireworks photos. I suppose Independence Day is less than a month away in the U.S., but I digress.
The subsequent landing page will show a dashboard which contains your App ID and App Secret (hidden). It will also reveal the API Version of your app which may be useful to be sure your module is compatible with the Facebook App.
Show the App Secret and paste these two data points into your Simple FB Connect configuration page's appropriate fields.
Next, hit "Settings" in the left menu panel of the Facebook App. On the Settings page, add a new Website platform.
After adding the new Website platform, two fields will appear:
- Site URL
- Mobile Site URL
Fill both of these fields with the URL from the Simple FB Connect module's configuration page's "Connect url" field data as I did in the screenshot. Save your changes.
Configure your Drupal website to accept Facebook logins
Now we have our Facebook login module installed and setup alongside our Facebook app. The last major step to having a working Facebook login system on your Drupal website is to configure your account settings appropriate to your goals. For this tutorial, I just want users to be able to instantly sign in with their Facebook account, creating a Drupal account automatically with their Facebook credentials in the background.
- Go to Drupal's Account settings page (/admin/config/people/accounts).
- Under Registration and cancelation → "Who can register accounts?", tic the "Visitors" option
- Hit "Save configuration" at the bottom of the page
This will allow any anonymous visitor to create an account on your Drupal website without approval from an administrator. The "Require e-mail verification" option will not force Facebook users to also authorize an email, so you can leave this checked to help keep out the auto registration spam bots (hopefully you're doing a few other things to keep the spammers out, too).
You can keep the "administrator approval is required" option active if you wish, but you will have to manually unblock every Facebook user account before they can use your site. This will generally discourage new users from making using of your member section, take this into consideration for your website strategy.
Login to your Drupal website with your Facebook account
Now that all the pieces are in place, test your Facebook login process with your own account credentials. Logout of your administrator account and visit your Drupal login page (/user). You should see a new tab or link to "Register/Login with FB".
Hit the link to begin the Drupal login with Facebook process. If you don't see this link, try clearing your Drupal website's cache. If you still don't, double check you've completed all the above steps correctly. If there's a warning or error message shown, it will offer up some clues as to what you might have missed. If you still can't get it working, feel free to ping us on Twitter or consider hiring the experts to integrate Facebook with your Drupal website.
Be sure you're logged into your own Facebook account in the browser session you're testing with. If all goes well, you should see a pop-up on Facebook requesting authorization to associate your account with the Facebook App you created earlier.
Hit "Okay" and you should be redirected back to your Drupal website user page, logged in. The username should be populated with your Facebook name, your email appropriately synced, and your picture shown as your Drupal profile photo.
While the module is called "Simple FB Connect", there are a lot of steps to setting up the Facebook authentication and login system as a whole. You'll need to not only configure the module and related dependencies, but also a Facebook App and your website's user account settings.
Once done, you'll be able to offer your users a seamless login and account creation service for those that wish to use their Facebook account details to login. This can dramatically improve the user experience as opposed to requiring them to create yet another user profile on yet another website.
Alternative Drupal Facebook login modules
The Simple FB Connect Drupal module is one of the easier, modernized, Drupal and Facebook login integration modules available. There are of course several other choices:
I wanted to talk about a few of these as they each have interesting differences. Depending on your use case, one may be a much better choices for your implementation—especially if you intend to integrate other social network login systems.
Drupal's Facebook OAuth (FBOAuth) module
This module deserves special attention. In many ways, FBOAuth actually offers a simpler setup process than Simple FB Connect. It has less dependencies (well, none). It'll even work with a few profile related modules so that you can integrate Facebook user data fields further with your own custom user data fields in Drupal.
FBOAuth's setup process is very similar to Simple FB Connect: install the module, setup a Facebook app, copy the Facebook app credentials into the module configuration, and you're nearly off and running. All you really need to do beyond that is setup a location for the actual login button which can be a block or some PHP to print the button in a template file. Here's a screenshot of how I setup FBOAuth on the same website after disabling the Simple FB Connect module and adding the FBOAuth's login block to the content area:
Note the "F Connect" blue button under the "Log in" button. The FBOAuth module is quite easy to setup, especially after already going through the process of creating a Facebook App. It may fit your use case better if you need to integrate a few custom user fields with Facebook data (perhaps importing the Facebook user's "About" details to a custom "Bio" field for Drupal users).
The primary reason I didn't base this tutorial around FBOAuth is that Simple FB Connect, for the purpose of merely offering a Facebook login process in Drupal, seems to be aiming towards future compatibility. FBOAuth doesn't yet have a roadmap for Drupal 8 support. In addition, while it makes the setup process slightly harder, the Simple FB Connect relies upon Facebook's PHP library. Hopefully this means the module team will be able to keep pace with Facebook API changes. This has been evident with their release history and presumably the team will continue to keep up.
Still, the FBOAuth module is backed by a very well known Drupal-focused company and the module has been around for some time. It has additional features and is quick to setup. Don't be afraid to give it a whirl if it fits your use case better. The move to Drupal 8 production sites is still probably years away for the majority of the Drupal web.
Multiple social media accounts with Hybrid Auth Social Login or OAuth Connector modules
If you just want to add a single additional login system (perhaps Twitter), you still might be best off with sticking to Simple FB Connect or FBOAuth plus a related Twitter login module. Beyond that, consider a more multi-purpose tool. If your intention is to integrate other social media platforms as addition login options, it's probably best to utilize a non-Facebook focused module.
I've setup OAuth Connector a few times in recent projects and I can tell you it's a difficult process. It works, and it's flexible to allow logins with several social networks that support OAuth, but it really can be a pain to configure the credentials and integration points for each platform. OAuth Connector is the best choice for a more flexible login integration system or for platforms that aren't supported by other modules.
Use Hybrid Auth Social Login module for multi-login Drupal
For multiple social network login Drupal setups, I tend to implement Hybrid Auth Social Login module. The team behind it have done an amazing job of keeping all the related social network login integration up to date as APIs have changed over the years. We have sites that have been using Hybrid Auth for years without trouble, even as platforms update and deprecate API versions.
If there's interest, I may do a tutorial on Hybrid Auth Social Login module in the future. I think it's a great tool. Ping us on Twitter if you'd like that.
Improving User Experience with Third Party Drupal Logins like Facebook
Remember, the primary reason you're integrating any social media login system is to improve the user experience for your users. Keep this in mind as you're considering how to configure the related user permissions and workflow. If you're attempting to build a community around your Drupal website or app, keep that at the forefront of your decisions. A little more effort maintaining systems and avoiding spam on your end can go a long way to giving users the quick login experience they expect.
Your Drupal Facebook login process should be part of your larger strategy to integrating the social network. Read our tutorial on setting up Facebook commenting integration from last week and keep an eye out for more Drupal Facebook integration tutorials coming.
- Drupal Facebook Comments
- Drupal Facebook Login
- Drupal Facebook Feed
- Drupal Facebook Like
If you're interested in thoroughly integrating Facebook with your Drupal website strategy through professional services, reach out. Think this tutorial is useful? Don't forget to share!