externalizing chatter using heroku, angular.js, node.js and chatter rest apis
DESCRIPTION
Enterprises love the social collaboration of Chatter, especially since Chatter is tightly aligned with enterprise data in Salesforce. Many companies that integrate their legacy data into Salesforce want to extend Chatter to these mission critical, integrated systems allowing employees to engage in communities right where they work. Join us as Appirio shows how you can use Chatter to engage user communities in external systems using the Chatter UI in the cloud to plug Chatter into external systems with just one line of code. We'll walk through architectural patterns for avoiding browser cross-domain restrictions, access Chatter APIs from the browser, then dive deep into the implementation details of the AngularJS User Interface, NodeJS Chatter Proxy server on Heroku, use of Oauth2, Heroku platform considerations, and specific Chatter REST APIs used.TRANSCRIPT
Chatter EverywhereExternalizing Chatter with Heroku and the Chatter REST APIs
Michael Press, Technical Architect & Cloud Asset Library Program Lead, [email protected]
Social Collaboration On Enterprise Data In Salesforce
SalesforceCommunities
VisualForce
Collaboration On Enterprise Data Outside of Salesforce
CommentsOrder Detail
Chatter > Order #1234
ConversationsDocument Libraries
Chatter > Groups > Marketing Group
Browser
SharePoint Legacy
System
Intranet
Chatter Everywhere - Design GoalsTrivial installation – embed Chatter in any app with 1 line of codeSaaS Subscription - Chatter As A ServiceStandard UX - Closely follow standard Chatter look-and-feelStandard Salesforce Authentication – Oauth2Adaptable - Conform to any container sizeContextual - Parameterized context & container integration Customizable – Custom branding, language translation, etc. Browser-independent– Chrome, Firefox, IE 8+
Challenges to Externalizing ChatterChatter REST APIs return data – you need to write a UICross-Domain restriction – can’t directly call APIs from clientAuthentication & AuthorizationRefresh Token storage & securityMultiple apps & multiple languages
Considerations for an External Chatter AppUser Interface – Which Chatter features do you need?Cross-Domain browser restrictions – Where is your proxy server?Authentication – Oauth2 vs. Session ID vs. SSORefresh Token security – How to encrypt? Store in cookie or db?Server Security – Entitlements or access keysOther Integrations – Google Translate or enterprise application Chatter Licenses – Not all licenses support all Chatter features UI Flow - When/how to link back to Salesforce
Chatter Everywhere DemoExternal Chatter locations
▪ Intranet, SharePoint, Legacy App, Browser sidebarChatter Features
▪ Feeds – comments, likes, posts▪ Navigation – Feeds, People, Groups▪ Custom features – branding, views, language translation
Container Integration▪ Show/hide, link post population, new feed item notification
External Chatter App – First Try
Cross-Domain Request
X
External Chatter App – High Level Architecture
Architecture of an Externalized Chatter Application
Chatter Everywhere TechnologiesBrowser client
• AngularJS - Single-page app, HTML markup, two-way data binding, MVCish, dependency injection, handles JSON well
Chatter Proxy Server• Heroku for price, scalability, add-ons (app monitoring, db)• Node.JS for package mgmt, Heroku support, fast & non-blocking• Nforce for authentication (Salesforce Oauth2 web server flow), utilities• Npm.Crypto.js for refresh token encryption• Google Translate APIs for language translation
Chatter REST API AuthenticationOAuth2
▪ Requires one-time authentication & authorization step by the user▪ Provides permanent (revocable) access via refresh token.▪ Treat refresh tokens as securely as a password (encrypt it)
Salesforce Session ID▪ Direct replacement for Oauth token for custom Chatter apps in VisualForce
SSO & Connected Apps▪ <company>.my.salesforce.com as your OAuth2 endpoint + Connected Apps = users skip authentication and authorization
Chatter REST APIs for User Data/connect/organization – determine if feed polling enabled/chatter/feeds/news/me/is-modified – new feed item available?/chatter/feeds/to/me/feed-items – my feed/chatter/feeds/news/<userid>/feed-items – user’s feed/chatter/users/<userid> – user profile/chatter/users/me/following/filterType==005 – users I’m following/chatter/users?q=<chars>* – search by user name
Code: AngularJS Client<!-- CHATTER PUBLISHER -->
<div data-chatterpublisher></div>
<!-- CHATTER FEED -->
<ul class="feedcontainer actionsOnHoverEnabled" data-ng-controller="MainCtrl">
<!-- FEED ITEMS -->
<li ng-repeat="item in feed.items">
<div data-translatablefeed="item"/>
</li>
</ul>
<!-- SHOW MORE BUTTON -->
<div class="cxshowmorefeeditemscontainer" data-ng-show="feed.nextPageUrl != null">
<a href data-ng-click="loadNextPage($event,feed.nextPageUrl);">Show More</a>
</div>
Chatter Proxy Server – Sequence Of Events
A Few Specific Technical ChallengesChatter Images – URLs are provided in JSON, but access token expires, URL fails without proxy server being awareNo sorting on Group and User discovery feedsNew feed item notification
• “Enabled Chatter Feed Polling” must be enabled in Salesforce org. • Query Identity service, poll isModifiedUrl on the “me” feed
Translations – may fail without warning, UI looks unresponsive
All about Appirio
Technology-enabled professional services, supported by 1,000 cloud experts and a 600,000+ cloud developer community
Chatter Everywhere - ImplementationProduct Manager/Architect fulltime for 3 months45 CloudSpokes contests $35,000 total prizesAngularJS, NodeJS on Heroku, Chatter REST APIsXXX lines of code< $100/month Heroku fees
Externalizing Chatter With 1 Line Of Code
<iframe src="https://chattereverywhere.com/base#?record=000012345¬ify&refreshbtn”/>
brandingserver context (feed)
container options
app options
Conversations
Chatter > Groups > Marketing Group
Demo Backup Slides – Chatter externalized locationsScreenshot of CE in SharePoint
Screenshot of CE in Intranet
Screenshot of CE in Legacy App
Screenshot of CE in browser sidebar
Demo Backup Slides – Chatter Everywhere featuresScreenshot of CE feed w/• Text, link, image
feed items• Comments• Likes• Filled in post
form
Screenshot of CE Group Search w/type-ahead
Screenshot of CE People Search w/type-ahead
Screenshot of CE Gallery View
Screenshot of CE custom branding – presscorp, avon
Screenshot of CE language translation
Demo Backup Slides – Container IntegrationScreenshot of link post integration
Screenshot of new feed item notification
Screenshot of hide/close integration