In this blog post my aim is to cover up how to login to an application using your Facebook credentials with WSO2 Identity Server.
Prerequsities :
Download WSO2 Identity Server 5.1.0
Steps :
1. Configuring the Facebook App
2. Configuring the travelocity SSO sample
3. Configuring Identity Provider
4. Configuring Service Provider
5. Configuring Claim Mappings for Facebook
Configuring the Facebook App
Follow [1] to configure the Facebook App and get the App ID and secret generated for the application
Configure the travelocity SSO Sample
To obtain and configure the single sign-on sample, follow the steps below :
1. You can check out the repository of the SSO sample from GitHub. - https://github.com/wso2/product-is/tree/master/modules/samples/sso
2. In your command line, navigate to <SAMPLE_HOME>/sso in the folder you checked out and build the sample using mvn clean install. You must have Apache Maven installed to do this.
After successfully building the sample, a .war file named travelocity.com can be found inside the <HOME>/sso/SSOAgentSample/ target folder. Deploy this sample web app on a web container. To do this, use the Apache Tomcat server.
3. Use the following steps to deploy the web app in the web container:
- Stop the Apache Tomcat server if it is already running.
- Copy the travelocity.war file to the <TOMCAT_HOME>/webapps folder.
- Start the Apache Tomcat server.
Configure Identity Provider
To configure Facebook as the Identity Provider, you have to Log into Identity Server, and in the main tab in the Identity Providers section, click Add
Provide a "Identity Provider Name" and Expand Federated Authenticators > Facebook Configuration and give the App ID and App secret of your Facebook application. User Information fields are some of the claims that are supported by Facebook and you should map them with Identity Server claims later on for Facebook authentication. Claim mappings will be done in further steps
Make sure to Tick both the check boxes to enable the Facebook authenticator.
Configure Service Provider
Go to Service Provider > Add, and create a service provider to register the travelocity application. Give "travelocity.com" as the Service Provider Name and expand Inbound Authentication Configuration > SAML2 Web SSO Configuration and fill the following details :
Issuer : travelocity.com
Assertion Consumer URLs : http://localhost:8080/travelocity.com/home.jsp
Enable Response Signing
Enable Single Logout
Tick Enable Attribute Profile and Include Attributes in Response Always
Click on Update to save the changes and you will be directed back to the service provider page. Here expand Local & Outbound Authentication Configuration and select Federated Authentication radio button and select "Facebook" as the IDP. Save all the changes.
Configure Claim Mappings for Facebook
Go to the Identity Provider created for Facebook and expand Claim Configuration > Basic Claim Configuration
- Select Define Custom Claim Dialect
- Click Add Claim Mapping
Here Facebook has different attributes/claims that are supported to retrieve all the public information of the user. So these claims should be mapped with any Local Claim URI that is supported by WSO2 Identity server.
Some of the Facebook Supported Claims :
- id
- name
- first_name
- last_name
- link
- gender
- locale
- age_range
Now you have to configure the requested claims for travelocity.com. Go to the Service Provider created for travelocity.com and expand the Claim Configuration.
Click "Add Claim URI" for Requested Claims, Here you should add the claims you mapped in the Identity Provider claim configuration.
Select Subject Claim URI as email (To use email as the Subject Claim URI you have to Enable Email authentication. Please follow [2] )
Now the configurations are done. To check how this works, access http://localhost:8080/travelocity.com
You will be directed to the travelocity application. When you click on to Login with SAML, you would be directed to Facebook authentication. Enter your Facebook credentials and log into the application.
