Blogs

Liferay 6.0 now comes with an additional Single Sign-On option - Facebook SSO using OAuth 2.0.  Setup is quite easy.  Let me walk you through the steps below.

1. In order for Facebook SSO to work, you first have to have a Facebook application account.  If you don't already have one, you can get more information here: developers.facebook.com/docs/guides/web

2. Once you have a Facebook application account (and ID), you'll need to edit settings under the Web Site tab.  Fill in the Site URL text field and the Site Domain text field.  If you're testing locally, you can set the Site URL as http://localhost:8080 and the Site Domain to be localhost.  I've added an entry in my hosts file, so lportal.com would hit my local tomcat at port 8080.  Below is an example of what I've entered.  Click Save when you're done with your settings.  Note: If you do change your domain, make sure you update all the relevant areas.

• Facebook side (pictured below)
• Liferay side (Control Panel -> Settings -> Authentication -> Facebook -> Redirect URL
• Community Virtual Host (Control Panel -> Community -> Actions button -> Settings -> public domain)
• your local environment's host file (i mapped 127.0.0.1 to lportal.com)

3. After entering these settings on the Facebook side, you now need to configure your Liferay portal.  First, log in with your administrator account.  Go to the Control Panel.  On the left menu under the instance you want to enable Facebook SSO, click on Settings.  Then click Authentication on the right menu, and lastly click on Facebook.  In this section, you want to first check the checkbox to enable Facebook SSO.  Next, fill in the Application ID which is a numeric ID (not to be confused with the application key), the Application Secret (don't tell/show anyone this), and lastly, update the domain part of the Redirect URL if not using localhost (I changed mine from localhost to lportal.com).  Below is what I've entered.  Click Save when you're finished.  (If you're not using localhost, make sure you've already updated the community's public virtual host, AND that you're accessing the site using this virtual host domain.)

4. Now you're ready to test it.  Log out of your administrator account in Liferay portal.  When you're on the login page, you should now see the Facebook link under the password field.

5. Clicking on the Facebook link should do one of two things.  If your browser already has a Facebook session, it will try to log you in with that Facebook account.  If no Facebook session exists on your browser, it will prompt you to login with your Facebook credentials.  Once you've granted access, Liferay portal will ask Facebook for the primary email address of that account you logged in with.  Liferay portal will search its database for that email address.  If found, it'll log you in automatically, if not, you will see the prompt below.

6. User can choose to create an account on your Liferay portal simply by clicking the Add Account button.  Liferay will then ask Facebook for the first name, last name, gender, and email address of the account.  It will also ask whether the account is validated by Facebook for security reasons.

NOTE: if your Facebook application you setup earlier is in Sandbox mode, only the developers of your Facebook application listed will be able to login successfully.

7. That's all there is to it!  Your users can now login with their Facebook credentials to your site!  If they don't already have an account on your site, sign up is that much easier.

We plan to add additional features in the near future.  Here's a list of them so far:

• Allow Liferay accounts to link to Facebook accounts by facebook user ID (so email addresses don't need to be the same).
• Make it configurable whether the Add Account option should be presented to user if no accounts were found on Liferay portal.
• For the add account feature, also ask Facebook for user's birthday.  This will be configurable whether birthday is required.

Update 2/23/2011: Since the Facebook "My App" interface has changed, I've taken a new screenshot and replaced the old one with the new.