Current trends require usage of services from hundreds of websites in a connected world. Most of these websites need the user to create an account with them by providing a valid email address and password. Remembering all the different user IDs and passwords that you use can be difficult and cumbersome. To make the life easier most websites now provide the user with an option to log in using their Facebook account, Twitter account or Google account. Since most of the internet users have one of these accounts, it makes creating a new account an instant action.
...
| Table of Contents | ||||
|---|---|---|---|---|
|
Configuring the Facebook app
- Go to https://developers.facebook.com/ and log in using your Facebook credentials.
- Click on My Apps and then click Create a New App.
- Choose the platform you wish to use. Select Website here when working with this sample.
- Enter the name of your new app in the window that appears and click Create New Facebook App ID.
- Enter a Display Name, Contact Email and select an appropriate category from the dropdown. Click Create App ID.
- This will lead you to the quick start guide. You can view the configuration there and skip the quick start guide to access the developer dashboard.
This will take you to the app Dashboard where you can find the App ID and App Secret as shown in the image below. Click Show to view the App Secret.
Info App ID is the Client ID and the App Secret is the Client Secret in OAuth terminology. The API Version is Facebook’s API that is used to create the application.
Click Settings on the left menu and navigate to the Basic tab. Add the App Domains (since WSO2 IS is running on localhost, you can add localhost as the App Domain) and click Add Platform.
- Select Website as the platform for the application and enter the following as the site URL: https://localhost:9443. Click Save Changes.
On the left panel, click Add Product and click Get Started for a Facebook Login product.
You can configure the Client OAuth Settings on the window that appears.
- Client OAuth Login should be set to Yes.
- Web OAuth Login should be set to Yes.
- Valid OAuth redirect URIs should be set to https://localhost:9443/commonauth.
- Scroll down and click the Save Changes button to save the changes.
...
| Info | ||
|---|---|---|
| ||
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 makes the app available to every Facebook user. You can find more information on the review process by clicking on App Review in the left navigation menu of your app's dashboard. The review process may take some time, so for the purposes of this sample, you can specify some Facebook users as Developers or Testers. Only the users specified here can use this app to log in with Facebook until the app goes public. To do this, click on Roles in the left navigation menu of the dashboard and specify the required Facebook users as Developers or Testers.
|
Deploying travelocity.com sample app
The next step is to deploy the travelocity.com sample app in order to use it in this scenario.
...
Once this is done, the next step is to configure the WSO2 Identity Server by adding a service provider and identity provider.
Configuring the identity provider
Now you have to configure WSO2 Identity Server by adding a new identity provider.
...
You have now added the identity provider.
Configuring the service provider
The next step is to configure the service provider.
...
You have now added and configured the service provider.
| Note |
|---|
The default client-truststore.jsk jks found in the |
Configuring claim mappings for Facebook
The next step is to configure claims in the Identity Server and map them with Facebook.
- In the Identity section under the Main tab, click List under Identity Providers.
- Click Edit to edit the facebook identity provider you created.
- Under Claim Configuration, go to Basic Claim Configuration.
- Select the Define Custom Claim Dialect option under Select Claim mapping Dialect.
- Click Add Claim Mapping to add custom claim mappings as follows.
You can retrieve all the public information of the user and the email address. The following are some common attribute names.
Panel id
email
name
first_name
last_name
link
gender
locale
age_rangeMore 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 that is suitable.
- Select a suitable User ID Claim URI (e.g., email).
- Click Update to save changes.
Configuring requested claims for travelocity.com
- In the Identity section under the Main tab, click List under Service Providers.
- Click Edit 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.
Note Note: To use email address as the Subject Claim URI, you have to allow the usage of email addresses as usernames in the
<IS_HOME>/repository/conf/carbon.xmlfile. To allow using email address as usernames, uncomment the following in the carbon.xml file.<!--EnableEmailUserName>true</EnableEmailUserName-->
Now you have configured the Identity Server.
Testing the sample
- To test the sample, go to the following URL: http://localhost:8080/travelocity.com.
- Click the link to log in with SAML from WSO2 Identity Server.
- You are redirected to the Facebook Login page. Enter your Facebook credentials and you will be taken to the home page of the travelocity.com app.