integrating web apps with canvas - salesforce1 world tour
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. Includes: - why Canvas is essential to integrate diverse enterprise web apps - how it works for both desktop and mobile, using Salesforce1 - tips from Cloudfind developers to solve some key challenges with Internet Explorer and SafariTRANSCRIPT
Integrating Web Apps with Force.com CanvasRichard Donkin @rdonkin
CTO, Cloudfindcloudfindhq.com
Salesforce1 World Tour - May 22, 2014
www.slideshare.net/rdonkin
About Cloudfind
xxxxSmart tagging makes it simple to find and manage files in the cloud
Brings collateral into Salesforce so that teams close deals faster
Ideal World
Real World
Ideal World
“All our apps are on Salesforce”
Real World
ERPSCM…
Field ServiceProject Management…
HR
Cloud Storage
SalesServiceMarketing
Real World
ERPSCM…
Field ServiceProject Management…
HR
Cloud Storage
SalesServiceMarketing
Force.com Canvas iframe
Real World
ERPSCM…
Field ServiceProject Management…
HR
Cloud Storage
SalesServiceMarketing
Canvas integration via Cloudfind app
Show auto tagged files from
cloud storageNo need to hunt through folders
Real World
ERPSCM…
Field ServiceProject Management…
HR
Cloud Storage
SalesServiceMarketing
Any Salesforce Page
Any Web Application(full page or part)
UI integration
ERPSCM…
Field ServiceProject Management…
HR
Cloud Storage
SalesServiceMarketing
Any Web Application
Any Salesforce Page
Any Web Application
Salesforce1
Demo – Canvas for desktops
Why not build a Force.com UI? 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
Why use Canvas?
With Canvas:
• No re-building – just embed existing UI
• Any language: Java, C#, Python, Ruby, PHP, JavaScript, …
• Flexible deployment:
• Cloud - Heroku (PaaS), Amazon AWS (IaaS)
• On-premise
• Any technology, e.g. NoSQL, Big Data, …
• “Pay as you go” resources
• Easier limits: generous allocation for Canvas
• Off-platform resources
• Use daily limits on data integration, not UI
Where can you use Canvas?
Wherever Visualforce works:
• Custom tab
• Object detail page
• Chatter publisher
• Chatter feed
• Chatter page
Chatter publisher
Chatter feed
Canvas for mobile with Salesforce1
Integrate with Salesforce1, through Canvas
• Visualforce page setup is one click!
• Ensure web app works for mobile• Fonts, touch targets, responsiveness, …
• Can add Canvas app to Salesforce1 menu
• Usage: Canvas app is view-only in main page
• Touch this area to interact on separate page
Demo – Canvas for Salesforce1
How to embed with Canvas – real-life example
Height - 600 pixels works for laptops at 1366x768 or higher – Test with your app, and adjust for Saleforce1 on mobile
Width - 100% allows horizontal resizing (and use 100% in page layout)
Parameter Format – JSON, XML, …
Parameter Encoding – prevent XSS security issues
<apex:page> <apex:canvasApp namespacePrefix="MyApp" applicationName="MyApp" height="600px" width="100%" parameters=”{id:'{!Account.Id}', name: '{!JSENCODE(Account.Name)}'}” /><apex:page>
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 – extra permission allows background API use
– Included in request: org, time zone, user, OAuth token, …
– Use Canvas Framework SDK for Java - or roll your own
Use Canvas OAuth token for Salesforce access:– Browser: Canvas SDK for JavaScript
• Wrapper around REST, SOAP and Chatter APIs
– Backend: REST, SOAP and other APIs from your web app
Canvas-enabling (1): Add Canvas to the App
If you have source code access for the app:– Make the app work in iframe, and with Canvas
authentication
– Selectively disable any frame-busting and anti-clickjacking
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 (2): new Canvas “UI app”
If you don’t have source code for an enterprise app:– Write a small custom “UI app” on top
– Focused UI for specific tasks or views
– No data storage in Canvas app
Salesforce UI
Canvas iframe Canvas “UI App”
Canvas Signed Request, and AJAX
Enterprise app
App API
Browser Tips: Internet Explorer
• Cookie setting requires a P3P header in HTTP response
• Configure web server to deliver this on all pages
• Once configured, works without user interaction
21
$ curl -si https://www.facebook.com/ | grep P3P P3P: CP="Facebook does not have a P3P policy. Learn why here: http://fb.me/p3p"
Browser Tips: Safari on OS X and iOS• Cookie setting requires user interaction with non-framed page
• First cookie set by app requires two clicks per user device• 1. Try to set a cookie, and if you can’t …
• Ask user to ‘Please Register Your Device’ within iframe
• 2. User clicks Register• Open new browser tab to show ‘almost done’ page
• 3. User clicks Finish Registration • Canvas app sets any cookie
• Allowed by Safari due to the button click interaction in this ‘first party’ tab
• 4. Web app’s JavaScript calls into main iframe to finish
• Future sessions - cookie-setting in iframe will work
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
Summary
Salesforce as the “single screen” for key apps
Thank YouRichard Donkin
@rdonkin
http://cloudfindhq.com
@CloudfindHQ
www.slideshare.net/rdonkin
Slides, including notes