My World: April 2014

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.