Integrating WebSphere Commerce with Facebook

Many e-commerce sites are allowing customer's to login to their website using social commerce login options such as facebook, google+ etc.

OOB WCS is also providing support for connecting the e-commerce site with facebook, but the functionalities are limited to share and likes. It doesn't provide support for login using facebook account.

In this article, I will explain how to integrate facebook login option with websphere commerce. In this example, we are doing direct integration and we will not be using any third party APIs. The steps mentioned here are applicable for integrating Facebook login with simple J2EE applications too, except the last few steps.

The integration can be done in 2 ways - one is using Facebook JavaScript APIs and another one is using graph API. Though both the integrations are simple, we will be going with graph API. The reason being, in the code we need to mentioned the appId and app secret and if we are using JavaScript integration, these secrets will be visible to everybody.

As part of integration, first we need to provide an option in the front end for the user to login to facebook. This can be achieved through the following code snippet.

<%
    String fbURL = "http://www.facebook.com/dialog/oauth?client_id=XXXXXXXXXXXX&redirect_uri=" + URLEncoder.encode("https://localhost/webapp/wcs/stores/servlet/en/mytestesite/processLogin?storeId=10201") + "&scope=email,public_profile";
%>
</br>
<a href="<%= fbURL %>" class="h_tnav_but" id="headerFBlogin" >Login With Facebook 
<img class="img_align" id="WC_FacebookConnectDisconnectDisplayImg_1" src="<c:out value="${jspStoreImgDir}images/socialIntegration/facebook.png" escapeXml="false" />" alt="" /></a>
</div> 
 

This snippet can be placed any JSP file, where you want to show the login button. Replace the client_id with whatever clientId you obtained after registering at Facbook developer. Once the customer click on the above button, he will be directed to Facebook login page. After login, customer will be redirected back to the redirect_uri specified in the above code.

Now, let us write the custom logic to handle the redirection from Facebook. processLogin is a controller command, which is mapped in struts-config-ext.xml file. The main functionality of this code is to authenticate our application with Facebook, retrieve whatever customer details we required, check whether the customer is an existing customer and proceed with login/registration accordingly.

In processLogin command, first we need to confirm our authenticity with Facebook and fetch the auth token from them. For this, invoke https://graph.facebook.com/oauth/access_token API by passing client_id (which is same as appID), client_secret and the code which we received through URL from Facebook as part of redirection.

Once we get the access token from Facebook, invoke https://graph.facebook.com/me API to retrieve the details we require by passing this access token. Whatever information we need from Facebook should be mentioned in the request. A sample request is given below.

https://graph.facebook.com/me?fields=id,name,first_name,last_name,email,gender,link,locale,timezone

The above request will retrieve id, name, firstname, lastname, emailed, gender etc. of the customer. Now, we can add our logic on how to handle this details.

Using the below snippet, we can check whether the customer is an existing customer or not.

UserRegistryAccessBean userAB= UserRegistryCache.findByUserLogonId(strLogonId);

If the customer is an existing customer, we can invoke the OOB logon command to login the user to our website. If the user doesn't exist, first check whether you have received all the mandatory parameters required for registering at your site from Facebook, and if everything is there, assign it to request properties and invoke UserRegistrationAddCmd.

Now, customer's can login to your site through social login options.

During integration, you may encounter issue with SSL certificate as Facebook is using oauth mechanism and HTTPS for handshaking. Refer my post  for how to download and install the certificate in WebSphere server.