Login with Facebook for WSO2 Identity Server

Nowadays we are using services form hundreds of websites. Most of these websites need the user to create an account providing a valid email address and password. For most people it is a nightmare to remember all the different user ids and passwords. To make the life easier most websites provide a user a option to login with Facebook Account, Twitter Account or Google Account. Since most of the internet users have one of these accounts it makes creating a new account instant.

With WSO2 Identity Server 5.0 now users can login to Identity Server with their Facebook account. To do that first you have to create a Facebook app after registering as a Facebook developer.

Step 1 : Configuring the Facebook App

• Go to https://developers.facebook.com/ and login with your Facebook credentials.

• Go to Apps > Create a New App

• Enter an App Name and select an appropriate category and click on Create App. This will take you to the App Dashboard where you can find the AppID and AppSecret.

• Go to Settings and click on Add platform 

Click on website and configure as shown in the screenshot.

• Go to Settings > Advanced

Here you need to configure security settings as shown in the screenshot

• Client OAuth Login should be set to Yes and OAuth redirect URL should be set to https://localhost:9443/commonauth .  Click on Save Changes button to save the changes.

The app is not available to general public yet. To make to app available to every Facebook user, you have to submit the app for review. After a review Facebook make the app available to every Facebook user. More information on review process can be find by clicking on Status and Review.

Because the review process is taking some time, you can specify some Facebook users as Developers or Testers. Only the specified here can use this app to Login with Facebook until the App go public.

• Click on Roles to go the below page and specify the required Facebook users as Developers or Testers.

Step 2 : Deploying  travelocity.com sample app

Now you have finished configuring Facebook as an Identity Provider. Now you can configure IS to login to IS sample travelocity.com app using your Facebook credentials. 

You can download travelocity.com.war file using the following link. 

https://drive.google.com/file/d/0B6TqW_IScmilVzdsSUNVWEQ0UWs/edit?usp=sharing

Deploy this sample web app on a web container. To do this, use the Apache Tomcat server. Since this sample is written based on Servlet 3.0 it needs to be deployed on Tomcat 7.x. Use the following steps to deploy the web app in the web container:

Step 3 : Configuring Identity Provider

Now you have to configure WSO2 Identity Server. First you need to download the latest version from

http://wso2.com/products/identity-server/  (If you are new to WSO2 Identity Server please refer https://docs.wso2.org/display/IS460/Getting+Started )

• Extract the zip file and run wso2server.sh file inside the bin directory. (If you are using windows run wso2server.bat instead).

• Login to the management console using

                           URL :  https://localhost:9443/carbon/

                           User Name : Admin                                        Password : Admin

• In the Identity Section in the Main tab, click on Add button under Identity Providers.

• Give a suitable name as the Identity Provider Name.

• Go to Federated Authenticators > Facebook Configuration and enter the App ID and App Secret values form Facebook app into Client ID and Client Secret fields respectively.

• Tick both check boxes to enable Facebook Authenticator and Make it the default. 

Step 4 : Configuring Service Provider

• Now go back to the WSO2 IS Management console. In the Manage Section in the Main tab, click on Add button under Service Providers.

• Enter travelocity.com in the Service Provider Name text box and click Register. 

• Click on Configure link under Inbound Authentication Configuration > SAML2 Web SSO Configuration.

• Now set the configuration as follows:

              Issuer : travelocity.com

              Assertion Consumer URL : http://localhost:8080/travelocity.com/home.jsp

• Check the following check-boxes :             

              Enable Response Signing

              Enable Assertion Signing

              Enable Single Logout

              Enable Attribute Profile

              Include Attributes in the Response Always

• Click on Update button to save the changes. Now you will be send back to the Service Providers page. 

• Go to Local and Outbound Authentication Configuration.

• Select the Identity Provider you created form the drop down under Federated Authentication. 

• Select the Federated Authenticator option button and click Update button to save the changes. 

Step 5 : Configuring claim mappings for Facebook.

• In the Identity Section in the Main tab, click on List button under Identity Providers.

• Click on the Edit button to edit the facebook identity provider. 

• Go to Claim Configuration > Basic Claim Configuration

• Select Define Custom Claim Dialect option under Select Claim mapping Dialect

• Click on Add Claim Mapping to add custom claim mappings as follows. 

• You can retrieve all the public information of the user and the email address. Here are some common attribute names. 

• id
• email
• name
• first_name
• last_name
• link
• gender
• locale
• age_range

          

• More information is available from the following link.

                https://developers.facebook.com/docs/facebook-login/permissions/v2.0

• You can map these attributes to any Local Claim URI which you feels suitable. 

Step 6 : Configuring requested claims for travelocity.com

• In the Identity Section in the Main tab, click on List button under Service Providers.

• Click on the Edit button to edit the travelocity.com service provider. 

• Go to Claim Configuration 

• Click on Add Claim URI  under Requested Claims to add the requested claims as follows. Here you should add the claims you mapped in the Identity Provider claim configuration. 

• Select a suitable claim for the Subject Claim URI. (Please not that email address cannot use without allowing using email addresses as user names in carbon.xml. To allow using email address as usernames uncomment <!--EnableEmailUserName>true</EnableEmailUserName--> in carbon.xml file inside wso2is-5.0.0/repository/conf)

Now you have finished the configurations. To see the thing at work go to the following URL.

http://localhost:8080/travelocity.com

• Click on : Click here to login with SAML from WSO2 Identity Server.

Now you will be redirected to Facebook Login page. Enter your Facebook credentials and you will be taken to the home page of the travelocity.com app.