« Socialsite on roller... | Main | The future of Projec... »

OAuth everywhere (continued)

In my earlier OAuth everywhere post I explained at a high level "how I got a Roller Gadget working, one that uses OAuth to call Roller and enables Roller to use OAuth to call back to the social network." I ended with some unanswered questions:

  • How do I add my gadget to SocialSite so users can install and use it?
  • How does SocialSite get the Consumer Key and Secret needed for calling Roller?
  • How does Roller get the Consumer Key and Secret needed for calling SocialSite?
  • How does the user authorize Roller's access to his Profile information in SocialSite?
  • When is OAuth support coming to the Roller trunk and can you use it for AtomPub?

(that last question was answered in OAuth for AtomPub in Roller earlier this week)

Now that I've wrapped up my work on OAuth in SocialSite and OAuth in Roller, I'm prepared to answer those questions. I'll do it by reviewing how I developed my Social Roller gadget and set it up to work on http://rollerweblogger.org, my Roller and SocialSite powered site.

Along the way, I'll provide links to source code and screen-shots. I'll be referring to the diagram from first post, so I'll reproduce it here for the sake of convenience:

http://rollerweblogger.org/roller/resource/oauth-roller-socialsite.jpg

NOTE: this post is based on the current code in the Project SocialSite SVN trunk. The things described below WILL NOT work with the SocialSite M3 release.

Step 1 - Develop an OpenSocial Application#

My first step was to develop an OpenSocial application for Roller. This application is made up of the three parts listed below. These are the parts show in light-blue in the diagram above.

  1. An OpenSocial Gadget for Roller that a user can install into his SocialSite profile. An OpenSocial Gadget is defined by Gadget Specification, an XML file with the metadata, HTML, CSS and JavaScript that render the gadget's user interface. I developed my gadget as a Roller page template and you can view it's source code here: gadget.xml
  2. A gadget setup page, a new JSP page in Roller that is called by the gadget to enable and disable Activity posting. This JSP page is protected by OAuth and returns data in JSON format to the gadget. View the source code here setupgadget.jsp
  3. A Roller Task that runs periodically, checks to see if any gadget users have created new blog posts and if they have, posts a Activity to SocialSite for each, by calling the OAuth-protected OpenSocial REST API provided by SocialSite. View the source code here SocialRollerTask.java

Step 2 - Register gadget with SocialSite#

This section answers the question "How do I add my gadget to SocialSite so users can install and use it?"

My next step was to register my application. Remember that SocialSite is intended to add social features to existing web sites and has very little user interface of its own, it's mostly made up of gadgets. So, the way you register a new application on a SocialSite-enabled site is to sign-up as a user of that site, go to your profile page, install the SocialSite Developer Gadget and then use that gadget to register your new application.

You can see a screenshot of the SocialSite Developer Gadget below. In the simplest case, you just enter the URL of your Gadget Specification, but I needed to take a couple of extra steps because my gadget needs to call an OAuth protected resource in Roller.

http://rollerweblogger.org/roller/resource/socialroller-register.png

This next paragraph answers the question "How does SocialSite get the Consumer Key and Secret needed for calling Roller?"

I need my gadget to call back to the Roller setupgadget.jsp page (that's part #4 in the diagram above) to enable/disable activity posting. Because that page is protected by OAuth, I had to go into Roller and get Roller's site-wide OAuth key and secret (see also: OAuth for Roller) and then enter those it the Developer Gadget. SocialSite stores them and will use them to take care of the OAuth authentication process on each gadget call to Roller (in part #2 above).

Step 3 - Approve gadget registration#

Since I'm the administrator of my site, I approved my own gadget registration. I did this by logging into my site's SocialSite admin console, went to the Gadget Management tab, saw my new gadget registration request and approved it. Here's a screenshot of the Gadget Registration approval page:

http://rollerweblogger.org/roller/resource/socialroller-approval.png

Step 4 - Add OAuth consumer key and secret to Roller#

This next paragraph answers the question "How does Roller get the Consumer Key and Secret needed for calling SocialSite?"

After your gadget is approved for use on a SocialSite enabled site, you'll find the consumer key and secret that Roller needs to call the OpenSocial REST API (that's step #6 above) in the SocialSite Developer Gadget. Here's what you see in the Developer Gadget once you gadget is approved.

http://rollerweblogger.org/roller/resource/socialroller-approved.png

My OpenSocial Roller application needs to know about those keys, so I put them in its configuration. For simplicity's sake, I'm not going to go into the details of this step.

Step 5 - install the Social Roller gadget#

Finally, the OpenSocial Roller application is ready for use. To install it, I went to my profile page, clicked the Gadget Directory button, browsed through the gadgets until I found it and then clicked the install button. Here's a screenshot of the SocialSite Gadget Directory, which you can access from the SocialSite Profile Gadget:

http://rollerweblogger.org/roller/resource/socialroller-gadgetdir.png

The Social Roller Gadget is the last item in the list, the "Simple Roller Gadget."

Step 6 - authorize and enable the Social Roller gadget#

After I installed the gadget, it appeared in my Profile page as you can see in the screenshot below. It's installed and ready to run, but it's not yet authorized to access my Roller account so it tells me "Before you can use this gadget, you must authorize it to access your Roller account."

http://rollerweblogger.org/roller/resource/socialroller-unauthorized.png

Finally, I can answer the question "How does the user authorize Roller's access to his Profile information in SocialSite?"

I want the gadget to access my Roller account so I clicked on the authorize link and saw this page popup, directly from Roller, which asks me to take the final step to authorize access.

http://rollerweblogger.org/roller/resource/socialroller-authorization.png

After I clicked the authorize button, page disappeared and the Social Roller gadget redisplayed itself as you can see in the screenshot below. The gadget is now ready to access my Roller account and is asking me to enable activity posting:

http://rollerweblogger.org/roller/resource/socialroller-disabled.png

I clicked the enable posting button and saw this:

http://rollerweblogger.org/roller/resource/socialroller-enabled.png

And now, whenever I post a new blog entry, an activity is added to my profile. Here's proof in the form of a screenshot:

http://rollerweblogger.org/roller/resource/socialroller-activities.png

Conclusion#

I've done the work to enable OAuth in SocialSite and Roller, so now it's possible to develop OpenSocial gadgets for Roller that will work with SocialSite and other OpenSocial containers. The Roller side of this work is now available in Apache Roller (in the SVN trunk), but the future of the SocialSite is still uncertain.

I think SocialSite still has great potential. That's why I'm spending so much time promoting it and moving it forward, but I can't do it all myself. I'm joining IBM next week and as far as I know, SocialSite will NOT be part of my job. I'll wrap up this series of posts tomorrow with a post discussing the future of Project SocialSite.

Comments:

Post a Comment:
  • HTML Syntax: NOT allowed

« Socialsite on roller... | Main | The future of Projec... »

Welcome

This is just one entry in the weblog Blogging Roller. You may want to visit the main page of the weblog

Related entries

Below are the most recent entries in the category Social Software, some may be related to this entry.