View
1.826
Download
5
Embed Size (px)
DESCRIPTION
Overview of Force.com Canvas, a technology that enables you to rapidly integrate third party web applications (on-premise or cloud) into a Salesforce environment, showing their user interface within a secure iframe. Covers how Canvas works and basic operation, and also provides tips from a recent development project on browser issues, multi-tab support, and more. UPDATED 8 Mar 2014: No need to download to see builds. I have removed all the builds and made many content updates to explain things better.
Citation preview
© Cloudfind Ltd 2011-2014
Integrating Web Apps with Force.com Canvas
Richard Donkin
@rdonkin
Cloudfind Ltd
http://cloudfindhq.com
About Cloudfind
Smart tagging makes it simple to find and manage files in the cloud
Brings collateral into Salesforce so that teams close deals faster
3
Agenda
• Integration challenges• Canvas overview• Tips for development
Ideal World
Real World
Ideal World
“All our apps are on Salesforce!”
Real World
ERPFinancialsSupply Chain…
Field ServiceProject ManagementIndustry-Specific…
HR
Cloud Storage
CRM & ServiceMarketingThird Party Apps
Real World
ERPFinancialsSupply Chain…
Field ServiceProject ManagementIndustry-Specific…
HR
Cloud Storage
CRM & ServiceMarketingThird Party Apps
Canvas integration via Cloudfind app:
Show auto tagged files from cloud
storage in Salesforce
No need to hunt through folders in
cloud storage
Real World
ERPFinancialsSupply Chain…
Field ServiceProject ManagementIndustry-Specific…
HR
Cloud Storage
CRM & ServiceMarketingThird Party Apps
Force.com Canvas “frame”
Real World
ERPFinancialsSupply Chain…
Field ServiceProject ManagementIndustry-Specific…
HR
Cloud Storage
CRM & ServiceMarketingThird Party Apps
Force.com Canvas “frame”
Any Salesforce Page
Any Web Application
Canvas as a UI integrator
ERPFinancialsSupply Chain…
Field ServiceProject ManagementIndustry-Specific…
HR
Cloud Storage
Any Web Application
(full page or part)
Any Salesforce Page
Force.com Canvas
Canvas
Any Web Application
Salesforce1
CRM & ServiceMarketingThird Party Apps
12
Why not use a Force.com UI for web apps?
Assume you have a web app outside Salesforce
Using Force.com, build a new UI for the app:
• Existing skills for Salesforce developers
• Easy data integration via Apex
• Classic model used by ISVs
But…
• Must replicate UI and integrate with app
• Two UIs: one for Salesforce, one for non-Salesforce
• Existing app must have an API• Or source code to add an API
13
Why use Canvas to embed UI for web app?
With Canvas:• Just embed the UI – no re-building, easy integration• Same app can work outside Salesforce• Use any programming language• Deployment options:
• PaaS (Heroku) – easy setup• IaaS (Amazon AWS), or on-premise – full control
• Multi-core, SSDs, memory caches, NoSQL, …
• Deployment model is “pay for capacity”:
• Good for intensive processing, e.g. file tagging
• Force.com limits mostly not affected by Canvas apps• Can use Force.com CPU and API calls for data integration not
UI logic
14
Where can you embed a web app?
Many of the places Visualforce works, including:
• Custom tab
• Object detail page
• Chatter page
• Chatter feed (GA in Spring ‘14)
• Chatter publisher (GA in Spring ‘14)
And it all works in …
• iOS/Android app, plus mobile web app in browser
• Swipe to see related objects including Canvas app
• Canvas apps can be on Salesforce1 menu
How to embed with Canvas
Realistic Visualforce example:<apex:page> <apex:canvasApp namespacePrefix="myapp" applicationName=“myapp” height="600px" width="100%" parameters=”{{id:'{!Account.Id}', name: '{!JSENCODE(Account.Name)}'}” /><apex:page>
• Always set width to 100% to allow horizontal resizing• And use 100% when including in page layout
• Take care of parameter encoding to prevent XSS vulnerablities• JSON is easily processed in most languages
• Same source code for Salesforce1 mobile use
Canvas-enabling a web app (1)
If you have source code access for the app:• Make the app work in iframe, and with Canvas• Quite easy – mostly standard web app techniques
Can open new tab if required – e.g. Google OAuth2
Salesforce UI
Canvas iframe Canvas Web App
Canvas Signed Request, and AJAX
User authorizes
Cloudfind app
Cloudfind confirmation
page
Outside Canvas
Canvas-enabling a web app (2)
If you don’t have source code for enterprise app:• Write a small custom app on top of the main app
• Call into main app’s API as required• Best for a few functions only
• Or… generic proxy for the main app
Salesforce UI
Canvas iframe Custom Canvas App
Canvas Signed Request, and AJAX
Enterprise app
App API
18
How Canvas works
Salesforce provides context for the Canvas “frame”
• User’s authentication is passed through:• Signed Request – no authorization step, some OAuth
permissions• OAuth Web Server flow – allows background API use
• Plus standard info: org, time zone, etc• Plus your own parameters – embed via Visualforce• Canvas Framework SDK for Java, or roll your own
Use Canvas OAuth token for Salesforce access:• JavaScript + Canvas SDK
• Browser access to REST, SOAP and Chatter APIs• Or use standard APIs from your web app backend
19
Tips: Working inside an iframe
• Frame resizing• Make your app responsive – just like mobile• Horizontal is easy – not Canvas-specific• Vertical is more work – coding + OAuth token
• Framebusting and friends• Anti-clickjacking and framebusting in the web app
• These will stop app from working in iframe• Just turn off these features if you are entering app via
Canvas
20
Tips: Browser quirks
• IE fun:• Cookie setting requires a P3P header in HTTP response• Configure web server to deliver this on all pages
• Safari fun (iOS and OS X):• Cookie setting requires user interaction with non-framed page.
Two clicks per user device, not per session.• Try to set a cookie, and if you can’t…
• Show a ‘please register device’ page• User clicks Register
• Show ‘almost registered’ page in new browser tab• User clicks Finish Registration
• Set cookie • Allowed by Safari due to the button click interaction in this ‘first party’ tab
• JavaScript calls into main iframe to finish• Future sessions - cookie-setting in iframe will work
$ curl -si https://www.facebook.com/ | grep P3P P3P: CP="Facebook does not have a P3P policy. Learn why here: http://fb.me/p3p"
21
Tips: Limits
• Canvas Limits• 2 API calls per Canvas frame load• 5K calls per user per day = 2,500 frame loads• High limits given typical usage
22
Tips: Security
• Canvas gives you:• No login/password management in web app• All Canvas users authenticated by Salesforce
• Reduced risk:• Less risk from ‘the wild Internet’ • Main threat: privilege escalation
• Standard web app security, including:• Encode inputs to prevent XSS• Using CSRF protection in forms• Preventing SQL injection• See Salesforce and OWASP guides
23
Tabs and Sessions for AJAX – The Problem
• Only affects AJAX web apps • Not unique to Canvas, but you may run into this• Mostly likely to hit power users or admins who have many
browser tabs open• “Two orgs” use case:
• User logs into two orgs in different tabs • not using Incognito window in browser
• Different URLs for Salesforce in each tab• e.g. sandbox on cs2 and production on na3
• Same Canvas web app behind both• App uses AJAX
• Simpler “two tabs” use case:• Two browser tabs open in one org• Also covered by this approach
24
Tabs and Sessions for AJAX – Problem Detail
• Multiple browser tabs for same Canvas web app • Single cookie-based session per user
• Single domain for the web app server across all tabs• AJAX app in iframe • HTTP requests from two tabs to AJAX API, for same user
session• App is getting requests from tab 1 and tab 2, each of which
is in different org, so they should use different app data• How do you keep the requests from each tab separate?
• Test case:• Login to org 1 in tab 1, then login to org 2 in tab 2• Return to tab 1 and click an AJAX button
• Backend of web app receives AJAX request• Should the app apply this request to org 1 or org 2 data?
25
Tabs and Sessions for AJAX – Solution
• Use ‘tab session’ state to distinguish between tabs • Each tab has its own unique state• Tab state stored within the user’s session state in your
web app• Tab 1, org 1 sandbox org state within web app• Tab 2, org 2 production org state
• Create a unique ID per tab by hashing per-tab info
• Append this ID to every URL sent to AJAX API
• Result: AJAX backend can tell which tab is calling
26
Tabs and Sessions for AJAX – Solution Detail
• User page load – signed request via POST:1. Pass tab-specific params (page name, object ID, …) to
identify the tab2. Get org ID from Canvas signed request 3. Get random number + timestamp4. Hash all these items and suffix hash to every URL in
iframe• User clicks on button – AJAX request via GET:
1. Extract the hash from incoming URL2. Use hash to access right ‘tab session’ state from cookie-
based session data • If not found in session, app should treat user as logged out
• Security:• Don’t trust the VF page to tell you info that is available via
Canvas signed request – e.g. org ID
27
Tabs and Sessions for AJAX – Summary
• Unique URL per tab …
• … enables separate app state per tab
• So your AJAX app supports many tabs, in many orgs at once!
Summary
Canvas has great potential
Great option for existing web apps
Lets you reach non-Salesforce users
Salesforce becomes the “single screen” to access your key applications
Thank YouRichard Donkin
[email protected]@rdonkin
http://cloudfindhq.com @CloudfindHQ
Presentation delivered at theSalesforce Platform Developer User Group
Bristol, UK on 6th March 2014
30
Canvas Resources
http://bit.ly/ForceCanvas
• Main DeveloperForce page
http://www.salesforce.com/us/developer/docs/platform_connect/
• Canvas Developer Guide
http://www.are4.us/best-practices/salesforce-canvas/
• Architecture overview