Setting Up Basic Facebook Authentication With Liferay Portal

This article will provide a step-by-step guide to configuring the Facebook login feature in Liferay Portal.

 

Resolution

Create Facebook Developer Account

To begin, you will need two facebook accounts; that is, a regular facebook account and a developer facebook account. To obtain a developer account,

1. Sign into facebook. using the regular facebook account.
2. Navigate to developers.facebook.com
3. Click the "Register Now" button in the top right corner of the screen.
4. Follow the prompts until you have a developer's account

 

Configure Virtual Host

In addition to the Facebook accounts, a virtual host will also be required. In Windows, this can be accomplished by:

1. Navigating to C:\Windows\System32\drivers\etc
2. appending "127.0.0.1 [host name].com" to the hosts file.

 

For this article, we will use lportal.com.

At this point, we are ready to set up Facebook authentication.

 

Create Facebook Application

The first step is to create a Facebook application that we'll use to sign in.

1. Go to developers.facebook.com and log in with you developer account.
2. In the horizontal menu at the top of the screen, click the "Apps" option.
3. Click "Create New App."
4. In the pop-up that apears, give the app a name and select any category for the app.
5. Fill in the captcha security check
   • At this point, you will be taken to a screen that shows the configuration options for your new app. Congratulations, your app is created!
6. In the box entitled "Basic Info," make sure "Sandbox Mode" is disabled.
7. Check "Website with Facebook Login" and type "http://lportal.com:8080" when asked for a URL.
8. Click "Save Changes."

 

Note: Below the title of your app is listed the "App ID" and the "App Secret." You will need these two items for configuring Liferay to authenticate with Facebook.

 

 

Configure Liferay

Finally, we will configure Liferay to use Facebook to authenticate users

Note: Remember to replace lportal.com with the virtual host you created in your environment.

1. Start a Liferay 6.1 bundle.
2. Navigate to http://lportal.com:8080.
3. As the administrator, go to Control Panel/Portal Settings/Authentication and click "Facebook" in the horizontal menu.
4. Check the "Enabled" checkbox.
5. Input the following into the fields:

Application ID:

The Application ID of your facebook app.

Application Secret:

The application secret of your facebook app.

Graph URL:

https://graph.facebook.com

OAuth Authentication URL:

https://graph.facebook.com/oauth/authorize

OAuth Token URL

https://graph.facebook.com/oauth/access_token

Redirect URL:

http://lportal.com:8080/c/login/facebook_connect_oauth

 

Click Save.

 

Sign In

Now, simply sign in using the Facebook feature in the Sign In Portlet.

1. Log out as the administrator
2. Click the top right if necessary to access the sign in portlet. Click "Facebook."
3. In the pop-up, input the facebook credentials of the regular account.
4. You will be asked to allow the app you created as a facebook developer to have access to your account. Allow it.

 

Once this is approved, you will be logged into Liferay as a newly created facebook user.

 

Additional Information

If you are getting an "Invalid Redirect Error", re-check the authentication settings. Make sure that the redirect url is using the virtual host that was created above.