OAuth and OpenSocial

A growing number of websites are adopting OAuth to authorize third-party applications to interact with a user's resources.  For example, back on August 31, 2010, Twitter flipped the kill-switch on Basic Auth and starting requiring all third-party Twitter applications to authenticate using OAuth.  Other sites (ie: service providers) supporting OAuth include Evernote, Google, LinkedIn, MySpace, Photobucket, Vimeo, Yahoo, among many others.

OpenSocial defines a specification that allows gadgets to leverage OAuth to access protected resources from service providers which Liferay's OpenSocial portlet has now implemented.  In this blog post, I will demonstrate how to configure OAuth for an OpenSocial gadget in Liferay.  This example will showcase a simple Twitter gadget that shows the authenticated user's tweet timeline and allows status updates.

Note: The code to support OAuth for OpenSocial gadgets is implemented in portal trunk (revision 71759). You can grab and build the latest source code from Liferay's repository to use this feature. Otherwise, you will need to wait for the 6.1 release of the portal.

Gadget XML

Before we begin configuring our OAuth gadget, let's first take a brief look at the gadget's XML structure.  You can find the full XML for the gadget here: link.

Within the ModulePrefs element, we see the following OAuth element:

<OAuth>
  <Service name="twitter">
    <Request url="http://api.twitter.com/oauth/request_token" param_location="uri-query" />
    <Access url="http://api.twitter.com/oauth/access_token" param_location="uri-query" />
    <Authorization url="http://api.twitter.com/oauth/authorize" />
  </Service>
</OAuth>

Gadgets using OAuth should define a Service Name and its Request, Access, and Authorization URL.  These URL's are provided by the service provider (Twitter in this example: link).  See the OpenSocial wiki for more information on these parameters: link.  

Further down in the XML within the Javascript section, there's a function named fetchData().  Take note of the gadgets.io.makeRequest(url, callback, params) and how the parameters are constructed to fetch data using OAuth.

Note that gadgets.io.makeRequest() is part of the 0.7/0.8 OpenSocial spec and has since been deprecated.  The 0.9+ spec defines a simpler, more intuitive methods in osapi.http.get/post, however it seems Twitter doesn't return the expected results when the user has not yet granted access to the gadget.  As a result, I used the deprecated methods in my Twitter gadget.  I've contacted Twitter about osapi.http support and hope to hear back soon.  More information on gadgets.io.makeRequest and osapi.http can be found here: link.
 

Admin Configuration

Now let's configure our gadget.  We need to define the consumer key and secret given by our service provider.

  1. Open the OpenSocial configuration page in the Control Panel.  First add the gadget via URL as you would with any other gadget. (https://raw.github.com/dejuknow/opensocial-gadgets/master/Twitter/Twitter.xml).
     
  2. For any OAuth enabled gadgets, you'll see a "Manage OAuth" pop-up option under "Actions".  Click on "Managed OAuth".
     
  3. You will see a list of all the service names defined in your XML.  To use a service, we will need to enter a consumer key and secret.  In our case, we have one service named "twitter".  Click on the link.
     
  4. Now we need to retrieve a consumer key and secret from our service provider (Twitter).  Go to http://dev.twitter.com/apps (sign in if you haven't already) and click on "Register a new application".
     
  5. Fill out all necessary information.
    • For the "Callback URL", enter Liferay's default callback URL: "http://myLiferayServer/opensocial-portlet/gadgets/oauthcallback".  (replace myLiferayServer with an appropriate value.  127.0.0.1:8080 will work for demonstration sake).
    • For "Default Access Type", select "Read & Write" as we will need to write access to post status updates.  
  6. After registering, Twitter will provide you with a consumer key and secret as well as the request token URL, access token URL, and authorize URL.  Take note of the consumer key and secret.  Also note that Twitter uses the HMAC-SHA1 algorithm.

     
  7. Enter the "Consumer Key" and "Consumer Secret" in the OpenSocial Control Panel page.  Select "HMAC_SYMMETRIC" for the "Key Type" then click "Save".

     

Adding the Gadget

  1. Now we're ready to add the gadget to a page.  Go to "My Private Pages" and click on "Add" -> "More" -> "OpenSocial" and add "Twitter Gadget".
     
  2. Click on "Personalize this gadget" to be redirected to the service provider.
     
  3. Twitter will ask the end user whether your application (ie: your gadget) should be given "the ability to access and update your data on Twitter".  You can sign out and sign in with another Twitter account here.  Click "Allow".


     
  4. The pop-up window should close and your gadget should now show the last 20 tweets from your timeline.  

     
  5. You can use the gadget to tweet your new status update.  (Note: you can also change the number of tweets to display by clicking on the wrench icon on the upper right and going to "Configuration".  The screenshot below shows the last 5 tweets instead of the default 20.)

That's it!  I hope this blog entry helps you get started creating OpenSocial gadgets that require OAuth.  Feel free to leave a comment below if you have any questions.

Blogs
I saw your Liferay Live talk this morning, which was pretty good by the way, and was glad to find this post which goes over some of the same material. One question I got a little confused on was which versions of Liferay supported what features in OpenSocial. I'm running 6.0.4 CE as my test site and don't see the OAuth menu item you mentioned on your TwitterDemo.xml example. Thanks, and thanks for the demo code.
Thanks for the feedback Joseph. You will actually need to be running a trunk build (rev 71759+) of the portal to use OAuth as the code was committed just a few weeks ago. I have updated the blog post with this information.
Hello,

Where can I find this portlet please?

Thanks emoticon
You can find the latest code (trunk) on our svn repo here:

svn://svn.liferay.com/repos/public/plugins/trunk/portlets/opensocial-portlet
Thanks Dennis !

But where can I find the war please?
Thanks
Hi Helder,

Currently, the war is only available for the latest released version of the CE portal, which is currently 6.0.10. However, 6.0.10 does not include OAuth support. And the current trunk version of the OpenSocial portlet will only work with the trunk version of the portal.

You will either need to wait for the 6.1 release of the portal or attempt to backport the code to work with 6.0.10 (or whatever version of the server you're on).
Hi Dennis,

I saw your solution for Jira + Liferay integration through OAuth in
http://stackoverflow.com/questions/8491844/jira-liferay-integration.

I am also using Jira 4.4.4 and Liferay 6.1.0.

I created public/private key using keytool and exported the certificate to rsaSigningKey.pem. Placed this file in liferay-folder/data/opensocial/.

Configured Incoming authentication in Application Links of Jira with

Consumer key - www.myliferay.com
Consumer Name - Liferay
Public key - public key text from rsaSigningKey.pem file.

On saving the configuration, the Public key greyed out.

Added the OpenSocial gadget onto the Liferay page. Gave the url of activityStream of Jira and in Manage OAuth section selected RSA_private and gave the consumer key as www.myliferay.com. Saved the configuration.

My activity stream in Liferay shows empty. When I checked the liferay console, it shows an error of jodd.bean.BeanException: Simple property not found: oAuthConsumerId Invalid property: 'OAuthConsumerImpl#oAuthconsumerId (actual: 'OAuthConsumerImpl#oAuthConsumerId', forced=false)

Where am I going wrong? should the consumer key be the CN of public/private key creation?

Please help me. You are my only source.

Regards,
Kicha
The link in step (1) of Admin Configuration is broken.
(https://opensocialdeju.googlecode.com/svn/Twitter/TwitterDemo.xml).
Hi Kicha,

Were you able to fix the issue? I have done the same steps for the JIRA opensocial gadget to work on Liferay (EE GA2).

But not able to get it working.

Can you please share the steps if you were able to fix this issue.

Any help on this is appreciated.

Thanks

Vaibhav
This setting is not working now. getting
The Twitter REST API v1 is no longer active. Please migrate to API v1.1

Can you update us? what is require changes for this ?
https://opensocialdeju.googlecode.com/svn/Twitter/Twitter.xml is configured for Twitter api 1
Now getting following error.
Please migrate to API v1.1. https://dev.twitter.com/docs/api/1.1/overview

Can you please update us with latest xml that configured for api 1.1
Updated to 1.1.

Just had to change the URL's from .../1/... to .../1.1/... See changes here. https://github.com/dejuknow/opensocial-gadgets/commit/4dac084776555ecba3ac5cce603618b94ee90b7f

Note, I also moved the code to github from Google's SVN repo.