Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Open social gadgets in ibm connections


Published on

Published in: Technology, Business
  • Be the first to comment

Open social gadgets in ibm connections

  1. 1. OpenSocial Gadgets in IBM Connections Social Connections V - Zurich 28th June 2013
  2. 2. 2 | © 2012 IBM Corporation Agenda ■ Open standards and IBM's role ■ OpenSocial Gadgets in Connections ■ Basics of implementing and deploying an OpenSocial Gadget ■ Advanced topics ─ OpenSocial “features” ─ Embedded Experience and Sharebox ─ Security ─ Best practices
  3. 3. 3 | © 2012 IBM Corporation Open standards, Open Social and IBM
  4. 4. 4 | © 2012 IBM Corporation IBM leads standardization of social business A commitment to drive and leverage open standards: ─ Align platform capabilities with open standards … and introduce, extend/ push for new standards whenever needed – Maximize choice, flexibility, and ease of integration – Proposing a development model where developers do not have to choose between Connections and other social networking platforms ─ Leveraging existing skill sets by building on familiar technologies and architectures … – Contributes to significantly reduce the time for a developer to get up to speed to work against Connections ─ Providing a consistent deployment model that spans traditional web to mobile applications – Build unified end-user experience – Consistent extensibility independent of the product, delivery model, and client type HTML5 ARIA SAML
  5. 5. 5 | © 2012 IBM Corporation5 The OpenSocial specifications are managed by the OpenSocial foundation, whose mission is to promote openness and interoperability of application in the “Social Business” area What is it? Why is it important? OpenSocial defines the specifications for: ● The container, which is the component hosting environment. The container is embedded in Connections 4.0 and provided out of the box. ● The APIs provided by the container covering a wide range of concerns: ● Client-side APIs – OpenSocial Gadgets ● Server-side REST APIs – People, Activity Stream ● Authorization - OAuth OpenSocial is the primary way to transform Connections into an open social network platform. General trend of OS is to go beyond initial goal of allowing 3rd party content to run in the platform, by incorporating additional social-related specifications (Activity Stream, Oauth, ...) • IBM participates on the OpenSocial board of directors and is working to drive a three-year strategy with community members. • Planned Implementations: SmartCloud, IBM Connections, IBM Lotus Notes/Domino, Rational Team Concert, Sterling • Current Implementations: Cisco, SAP, Jive, Atlassian, Google, Yahoo, LifeRay, Oracle, Magneto, Tibco, Tibbr, Surfnet, Paypal • Find out more about OpenSocial at Standards Profile :
  6. 6. 6 | © 2012 IBM Corporation Open Social gadgets in Connections
  7. 7. 7 | © 2012 IBM Corporation OpenSocial Gadgets in Connections ■ OpenSocial Gadget specs used to define extension points across Connections: ─ Sections of the Global Sharebox ─ EE experience gadgets ─ Homepage Widget page (“My Page”) and side bar
  8. 8. 8 | © 2012 IBM Corporation
  9. 9. 9 | © 2012 IBM Corporation
  10. 10. 10 | © 2012 IBM Corporation
  11. 11. | © 2012 IBM Corporation iWidgets vs OpenSocial Gadgets iWidget OpenSocial Gadget Activity Streams * X Share Dialog X Home Page X X Profiles X Communities X Rendering inline iFrame Specification iWidget 1.0 OpenSocial 2.5 ■ Recommendation: Use an OpenSocial Gadget when possible ● Provides better integration and code reuse opportunities with other products – Example: IBM Notes / Domino 9 * Available in the following applications: Home Page, Profiles, Communities
  12. 12. 12 | © 2012 IBM Corporation Anatomy of an OpenSocial Gadget 1. <?xml version="1.0" encoding="UTF-8"?> 2. <Module> 3. <ModulePrefs title="Hello World" 4. description="Hello World gadget" height="400" width="500"> 5. </ModulePrefs> 6. <Content type="html" view="default"> 7. <![CDATA[ 8. Hello World! 9. ]]></Content> 10. </Module> 1. XML version doc type 2. Root of the gadget definition (a “module”) 3. Gadget preferences (title, description, preferred height/width, …) 6. Root of the content (HTML displayed to the end-user) Gadgets might have multiple views labelled with the “view” element
  13. 13. 13 | © 2012 IBM Corporation Anatomy of an OpenSocial Gadget ■ User preferences ─ Name/value pairs ─ Supported data type: string, bool, enum, ... ─ Persisted by user in Connections ─ UI to edit pref. rendered by Connections for Homepage gadget ■ Internationalization ─ XML files containing strings (key/value pairs) per language ─ Strings are referenced by key in gadget XML, prefixed with __MSG_ ■ Complex views ─ Any standard HTML supported, as any standard HTML page ─ … can load any JavaScript library (Dojo, jQuery, …) <?xml version="1.0" encoding="UTF-8"?> <Module> <ModulePrefs title="Gadget Example" width="400" height="100"> <Locale lang="de" messages="nls/de/message_ALL.xml"/> <Locale lang="en" messages="nls/en/message_ALL.xml" /> </ModulePrefs> <UserPref name="color" display_name="__MSG_color_label__" default_value="blue" datatype="string" /> <Content type="html" view="default"><![CDATA[ <script type="text/javascript"> gadgets.util.registerOnLoadHandler(function(){ var pref = new gadgets.Prefs(); var color = pref.getString("color"); document.getElementById("myDiv").style.color = color; }); </script> <div id="myDiv">Any HTML...</div> ]]> </Content> </Module>
  14. 14. 14 | © 2012 IBM Corporation Development tools and administration
  15. 15. 15 | © 2012 IBM Corporation Development environment ■ OpenSocial gadgets are 'just' XML, HTML, JS and CSS ─ Pick your favorite IDE/text editor! ─ Eclipse with embedded Tomcat/Jetty to host gadget resources is perfectly sufficient ■ A few useful tools ─ OSDE plugin for Eclipse (“OpenSocial Development Environment”) - – Integrated gadget development within Eclipse – generate boilerplate code for gadgets, GUI editors for gadget xml, comes with packaged Shindig to preview gadget, … ─ OSE (“OpenSocial Explorer) - – Playground – comes with a number of samples that can be run. Allow editing gadget XML and resources inline and see result in real time. Great to learn more about gadget development.
  16. 16. | © 2012 IBM Corporation The Boostrap page {yourServer}/connections/resources/web/ ml?render=test&oneui=3
  17. 17. | © 2012 IBM Corporation opensocial-config.xml.. for developers <developer enabled="true" allowSSOFeature="true" allowIntranetProxyAccess="true"> <developer-hosts-whitelist allServers="false"> <!-- List of base URLs that are allowed to publish 'developer-mode' gadgets <host url="http://{}/base/url/1" /> ... <host url="http:// {}/base/url/N" /> --> </developer-hosts-whitelist> </developer> ■ Enables “developer” features including the “bootstrap” page ─ Allow gadget from whitelisted domain to be rendered without requiring administer level access to Connections ─ If developer-hosts-whitelist/ [@allServers] is set to true, then all domain are allowed (in other words, no whitelist) ■ @allowSSOFeature and @allowIntranetProxyAccess control the proxy access ─ See “Security” Proxy access section later in this presentation
  18. 18. 18 | © 2012 IBM Corporation Gadget administration ■ Administrator can: ─ Register/remove/disable gadgets ─ Gadgets are administrated through: – Homepage Admin UI – wsadmin commands ■ Prior to registration in Connections, the gadget resources (XML descriptor, JavaScript, CSS, images, ...) MUST be accessible by the OpenSocial container in Connections: ─ Resources deployed on a web server ─ Web server accessible from the container
  19. 19. | © 2012 IBM Corporation Gadget specific registration settings OpenSocial Gadgets specifics: ■ Security: ─ Control the level of feature access available to the registered gadget ─ Two main categories: “Restricted” and “Trusted” gadgets ─ See Security section later in this presentation for details ■ UI Integration points: ─ Indicate if the gadget is used in Share Dialog or as an Embedded Experience (Activity Stream) ■ Server access via Proxy: ─ Control the level of proxy access for the registered gadget – see dedicated security section later in this presentation ■ Service Mapping: ─ Map the gadget to a registered Oauth client ─ See step by step example in Security section
  20. 20. 20 | © 2012 IBM Corporation Registering an OpenSocial Gadget in Connections
  21. 21. 21 | © 2012 IBM Corporation Moving beyond the basics
  22. 22. 22 | © 2012 IBM Corporation OpenSocial gadget features Feature Access – OpenSocial exposes a number of “features”. ■ Features are often just a JavaScript libraries allowing the gadget to leverage specific capabilities ─ (in certain cases – dramatically alter the behavior of the “container” - a key example of this is “SSO”, which disables the Locked-Domains security feature) ■ Gadget developer declares which features are required in the gadget XML ■ As unrestricted feature access is dangerous, when an administrator “registers” a gadget, the specify the level of access that gadget receives ─ The container refuses to render the gadget is one of the required feature is not available ─ Features can be declared as being <Optional feature=”...”/> – Gadget is rendered even if optional features are not available – Tip: use gadget.util.hasFeature prior to using the JavaScript APIs to ensure the feature is actual available
  23. 23. 23 | © 2012 IBM Corporation OpenSocial Gadget features ■ Around 90 features in OpenSocial 2.5 specs + a few features specific to Connections ─ ■ IO and network related operations ─ ─ OSAPIs ─ Data pipelining ─ RPC ─ pub/sub ■ User preferences ■ Templating ■ UI functionalities ─ Opening popup, including to handle Oauth dance ─ Resizing gadget ■ “Utilities” ─ JSON manipulation, DOM, logging, i18n ─ … you're usually better off using existing libraries (Dojo, jQuery) if you're already familiar with them
  24. 24. 24 | © 2012 IBM Corporation Gadget API – IO operations ■ Making ajax request in a gadget: ─ Leverage server-side proxy (in container) to fetch content from remote servers on other domain (based on access policies per gadget defined by administrator) ─ Support authentication scheme: basic auth, form based auth, Oauth 1 and 2 ─ Response is cached for 2 hours by default ─ Avoid using XMLHTTPRequest (or toolkit wrappers based on top on it – such as dojo.xhr*)
  25. 25. 25 | © 2012 IBM Corporation Gadget APIs - Osapi ■ Background: OpenSocial defines a standard for server-side REST and RPC based APIs for common social capabilities ─ People, relationship, activities, groups, … ─ Connections 4.0+ implements a subset of the OpenSocial APIs: – People – ActivityStreams ■ Gadget feature “osapi” provides JavaScript utilities allowing to interact with these APIs <Module> <ModulePrefs title="OSAPI Sample"> <Require feature="osapi" /> </ModulePrefs> <Content type="html"> <![CDATA[ <script type="text/javascript"> gadgets.util.registerOnLoadHandler(function(){ osapi.people.get({"userId":"@viewer"}).execute( function(result) { document.getElementById("userName").innerHTML = result.displayName }); }); </script> Hello <span id="userName"></span> ]]> </Content> </Module>
  26. 26. 26 | © 2012 IBM Corporation Gadget APIs – Data pipelining ■ Declarative syntax allowing to specify remote data the gadget needed in advance ■ Container fetches/caches resources and send them along other gadget meta-data ─ Support OpenSocial APIs and remote HTTP resource – <os:DataRequest method="people.get" userId="@viewer"/> – <os:HttpRequest href=" sortBy=created&lang=en_us"> ■ Benefits: ─ Essentially performance – Reduce the number of browser-server round trip on gadget load – Use pipelining instead of makeRequest, osapi calls on gadget load ─ Templating – instruct container to generate dynamically HTML server-side using fetched data
  27. 27. 27 | © 2012 IBM Corporation Gadget APIs – Data pipelining <?xml version="1.0" encoding="UTF-8"?> <Module> <ModulePrefs title="data pipelining gadget"> <Require feature="opensocial-data" /> </ModulePrefs> <Content type="html"> <![CDATA[ <script type="text/os-data" xmlns:os=""> <os:DataRequest key="me" method="people.get" userId="@view" /> </script> <script type="text/javascript"> gadgets.util.registerOnLoadHandler(function(){ var me ="me"); document.getElementById("userName").innerHTML = me.displayName; }); </script> Hello <span id="userName"></span> ]]> </Content> </Module>
  28. 28. 28 | © 2012 IBM Corporation Embedded Experience and Sharebox
  29. 29. 29 | © 2012 IBM Corporation Embedded Experience ■ Conceptually: Provide a way to interact dynamically with external content directly in context without having to switch to another application ─ Used in Connections and Notes 9 to bring external content in context in the Activity Stream and an email
  30. 30. 30 | © 2012 IBM Corporation Embedded Experience
  31. 31. 31 | © 2012 IBM Corporation Embedded Experience ■ Technically: A standard OpenSocial gadget that can access to contextual information ■ The “context” is passed to the gadget as a JSON payload (name/value pairs) ─ Example {"videoId":"g8qbmhc59lY"} ─ In Connections Activity Stream, the context is included for each event in the Activity Stream – (More details on the Activity Stream specifics in workshop materials: %2Fappdevwiki.nsf%2Fxsp%2F.ibmmodres%2Fdomino%2FOpenAttachment%2Fldd %2Fappdevwiki.nsf%2F82567C415DF5243185257AEE00626F82%2Fattach%2F5-sdk- workshop-activitystreams.pdf ) ─ In Notes, the context is located in the header of the mail (MIME) ■ The gadget can access the “context” through JavaScript APIs available from the “embedded-experience” feature ─ Example for the payload above – the JavaScript call['videoId'] returns the “g8qbmhc59lY”
  32. 32. 32 | © 2012 IBM Corporation Using an OpenSocial gadget to define the EE <?xml version="1.0" encoding="UTF-8"?> <Module> <ModulePrefs title="YouTube EE" description="YouTube EE" height="300" width="500"> <Require feature="embedded-experiences"/> </ModulePrefs> <Content type="html" view="embedded, default"><![CDATA[ // (omitted) Code to load YouTube JavaScript API code <script type="text/javascript"> var context; function _runVideo(videoId) { // (omitted) Render the YouTube player for videoId } function init(){'', function(key) { context =; var videoId = context['videoId']; _runVideo(videoId); }); } gadgets.util.registerOnLoadHandler(init); </script> <div> <h3>Video Viewer</h3> <div id="videoDiv">Loading...</div> </div> ]]></Content> </Module> 1. Require feature: “embedded- experiences”. Indicates to the container to load JavaScript resources/API specific to the EE view 2. View = “embedded”. If this view is defined, then it is the view being rendered in the EE popup. 3. Init(): main function of our gadget. Function is registered through gadgets.util.registerOnLoadHandler so that it is executed by the gadget container when the gadget is open 4. DataSet(key) return an json object (name / value pairs) corresponding to the “context” defined in the event (more in next slides) 1 2 3 4
  33. 33. 33 | © 2012 IBM Corporation Sharebox ■ Sharebox can be open from anywhere in Connections through the “Share” button in header ─ Offers a quick way to create/share content from anywhere ─ “Status Updates” and “Files” sections provided out-of-the-box ■ Content of each section is defined by an OpenSocial gadget ─ Can be extended with your own gadget
  34. 34. 34 | © 2012 IBM Corporation Sharebox example <Module> <ModulePrefs title="Sample Sharebox"> <Require feature="actions"> <Param name="action-contributions"> <![CDATA[ <actions> <action id="actionExampleId" path="container/sharebox" label="Sample Gadget" tooltip="Text appearing when hovering over the tab in the Sharebox" /> </actions> ]]> </Param> </Require> </ModulePrefs> <Content type="html" view="default"><![CDATA[ <script type="text/javascript"> var customAction = { id: "actionExampleId", callback: updateContext }; gadgets.util.registerOnLoadHandler(function() { gadgets.actions.updateAction(customAction); }); function updateContext(selection) { if(selection.type == ""){ // code to init the gadget from here... } } </script> Some HTML displayed to the end-user... ]]></Content> </Module> 1. Extend the UI by contributing an “action” - contributed to the sharebox with through the path “container/sharebox” 2. Bind a Js callback function to the action with gadgets.actions.updateAction (invoked when user click the tab in the sharebox) 1 2
  35. 35. 35 | © 2012 IBM Corporation Sharebox ■ The feature “ibm.connections.sharedialog” provides APIs for extra capabilities around lifecycle: ─ Lifecycle: – Close the sharebox programmatically – Detect when user close the sharebox ─ Interaction with sharebox: – Mark state as dirty (ie: user has entered some information in your gadget but not saved yet) – Prevent user from moving to another tab of the sharebox ─ Integration with rest of page – Display info, warning, error message ■ See documentation at lookupName=IBM+Connections+4.0+documentation#action=openDocument&res_title=Optional_feat ures_for_custom_sharing_gadgets_ic40&content=pdcontent
  36. 36. 36 | © 2012 IBM Corporation Security / Authorization
  37. 37. 37 | © 2012 IBM Corporation Oauth – Open Authorization Standardized mechanism to delegate authorization ● Authorize a service (“consumer”) to act on your behalf (“user”) in another service (“provider”) ● At no stage the consumer service has access to the provider's credentials of the user Implementations Include: Facebook, G+, Microsoft Windows Live, Office 365, Google, BBC, Opera, TypePad, Gowalla, Gnip, SocialCast, Superfeedr, Tibber, YIID, Cisco, Yammer, SAP, Jive, Atlassian, Yahoo, LifeRay, Oracle . . . Consum er Provider User OAuth flow Other Legend Send to Provider's auth. page Action requiring to use provider's API Redirect to consumer page with unique code Authenticate and authorize Redirect to URL with code Exchange code for token Send access (and refresh) token API request with access token
  38. 38. 38 | © 2012 IBM Corporation Oauth – Open Authorization ■ Connections is a “provider” ─ Any Connections API can be accessed through a Oauth token (with associated flow allowing a Connections user to grant access to his Connections data to a 3rd party) ■ … but also an Oauth “consumer” (OpenSocial container) ─ The container handles most of the complexity of the Oauth dance and management of token for your gadget – Local caching of access and refresh token – Pass access token to API calls to service provider Connections page Gadget OpenSocial API Connections (server-side) Widget Container / Shindig Oauth token Service Provider Contacts Calendar documents Protected Resources Handle (most of) Oauth dance + API calls with Oauth token makeRequest Xhr call to container (security token SSO)
  39. 39. 39 | © 2012 IBM Corporation Oauth – Open Authorization From a developer perspective...
  40. 40. 40 | © 2012 IBM Corporation Oauth – Open Authorization Steps to deploy the gadget in Connections with a Oauth dependency 1) Register your application with the provider to get a client id and secret Client id and secret are used as part of Oauth dance
  41. 41. 41 | © 2012 IBM Corporation Oauth – Open Authorization 2) Register the details of the provider end-point in Connections ● Oauth authorization page (where the user is directed to approve access) ● Oauth token end-point (where the container exchange code with access token, in particular) wsadmin>NewsOAuth2ConsumerService.registerProvider("googleAPI", "standard", "false", "true", "", "") 3) Create a client (consumer) for the provider in Connections. ● The container will use these details to manage the Oauth dance with the provider ● This is where you put the client id and secret obtained when registering your application with the provider (step 1) wsadmin>NewsOAuth2ConsumerService.registerClient("googleAPI_client1","googleAPI","confidential","code","798202","PgJ8FLZk88FAuqy7i9UQF8eb","https://{opensocial}/gadgets/oauth2callback") 4) Bind the gadget with the client from the gadget administration page
  42. 42. 42 | © 2012 IBM Corporation Security ■ Feature restriction ─ “Restricted” gadgets do not have Oauth and SSO access and have limited interaction with the container (cannot open popup for instance, cannot save preferences) ─ “Trusted” gadgets can use Oauth and use all gadget features – Still in a sandbox locked domain unless the “Use SSO” option is checked ■ Proxy access ─ Configure per gadget level of proxy access for ■ Locked domains ─ Feature for rendering gadgets in an iFrame that is hosted outside of the SSO domain. ─ Gadget does not have access to: – Any cookie, including SSO token – Rest of the page (DOM) – Servers on same domain as Connections deployment
  43. 43. | © 2012 IBM Corporation Proxy Security ■ Proxy access ─ Restrict hosts that can be accessed with ─ Comes in conjunction with locked domains (otherwise a simple ajax request can be made to any server on the same domain as your Connections deployment) ■ Options: ─ Only outside the intranet – What is inside and outside the intranet is determined by the WebSphere SSO domain ─ All server – Any server WebSphere can access can be accessed by this gadget ─ Custom – Gadget has no implicit access – Manually configured in proxy-policy.dynamic file – See http://www- lookupName=IBM+Connections+4.0+documentatio n#action=openDocument&res_title=Configuring_p erhost_proxy_access_rules_for_OpenSocial_gadg ets_ic40&content=pdcontent
  44. 44. | © 2012 IBM Corporation Locked domains ■ 2 main problems with 3rd party gadget (un/semi-trusted) : ─ How do I prevent 3rd party gadget code from accessing the rest of the page (DOM) ─ How do I prevent 3rd party gadget code from performing Ajax requests on my intranet? (SSO domain) ■ Solution is to host iFrame on different host per gadget: Page: IFrame: {unique-id-per-gadget} SSO: * ■ Host name for iFrame is not in SSO domain ■ Requires configuration ─ DNS, IHS, Connections configuration, … ─ See lookupName=IBM+Connections+4.0+documentation#action=openDocument&res_title =Enabling_locked_domains_ic40&content=pdcontent Gadget In LOCKED IFRAME
  45. 45. 45 | © 2012 IBM Corporation Best practices ■ All best practices in front-end development apply to gadgets as well! ─ Use a toolkit – Social Business Toolkit, Dojo, jQuery ■ Integrate nicely into Connections UI – including support for custom theme ─ Use <Optional feature=""/> to inject Connections CSS (One UI) in gadget iFrame ─ One UI components and guidelines: ■ Remember you're in an iframe ─ Limited real-estate – impact modal popups for instance (dijit.Dialog). Design gadget accordingly. ■ Performance: minimize network latency ─ Minimize number of REST call - leverage pipelining and templating ─ Leverage content rewrite and proxy ( to cache resources locally ■ Use gadget programmatic model whenever possible ─ In particular for io - (proxying, caching) ─ User preference, ... ■ Test your gadget with multiple combination of user preferences before deploying