Integrating Web Apps with Canvas

67 %
33 %
Information about Integrating Web Apps with Canvas

Published on March 7, 2014

Author: rdonkin



Overview of 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.

Integrating Web Apps with Canvas Richard Donkin @rdonkin Cloudfind Ltd © Cloudfind Ltd 2011-2014

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

Agenda • Integration challenges • Canvas overview • Tips for development 3

Ideal World

Real World

Ideal World “All our apps are on Salesforce!”

Real World CRM & Service Marketing Third Party Apps HR ERP Financials Supply Chain … Field Service Project Management Industry-Specific … Cloud Storage

Real World CRM & Service Marketing Third Party Apps Canvas integration via Cloudfind app: Show auto tagged files from cloud storage in Salesforce ERP Financials Supply Chain … HR Field Service Project Management No need to hunt Industry-Specific through folders in … cloud storage Cloud Storage

Real World Canvas “frame” CRM & Service Marketing Third Party Apps HR ERP Financials Supply Chain … Field Service Project Management Industry-Specific … Cloud Storage

Real World Any Salesforce Page Canvas “frame” CRM & Service Marketing Third Party Apps Any Web Application HR ERP Financials Supply Chain … Field Service Project Management Industry-Specific … Cloud Storage

Canvas as a UI integrator Any Salesforce Page Salesforce1 Canvas Any Web Application (full page or part) Canvas CRM & Service Marketing Third Party Apps Any Web Application HR ERP Financials Supply Chain … Field Service Project Management Industry-Specific … Cloud Storage

Why not use a UI for web apps? Assume you have a web app outside Salesforce Using, 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 12

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 • limits mostly not affected by Canvas apps • Can use CPU and API calls for data integration not UI logic 13

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 14

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 User authorizes Cloudfind app Cloudfind confirmation page Outside Canvas Canvas Signed Request, and AJAX Canvas Web App

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 Canvas Signed Request, and AJAX Custom Canvas App App API Enterprise app

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 18

Tips: Working inside an iframe • Frame resizing • Make your app responsive – just like mobile • Horizontal is easy – not Canvas-specific • Vertical is much harder – 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 19

Tips: Browser quirks • IE fun: • Cookie setting requires a P3P header in HTTP response • Configure web server to deliver this on all pages $ curl -si | grep P3P P3P: CP="Facebook does not have a P3P policy. Learn why here:" • 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… • User clicks Register • Show ‘almost registered’ page in new browser tab User clicks Finish Registration • • • • Show a ‘please register device’ page 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 20

Tips: Limits and security • Canvas Limits • 2 API calls per Canvas frame load • 5K calls per user per day = 2,500 frame loads • High limits given typical usage • Security • Standard web app security, including… • Correct encoding of text inputs to prevent XSS • Using CSRF protection in forms • Preventing SQL injection • See Salesforce and OWASP guides 21

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 22

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? 23

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 24

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 tab 2. Get org ID from Canvas signed request 3. Get random number + timestamp 4. 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 URL 2. Use hash to access right ‘tab session’ state from cookiebased 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 25

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! 26

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 You Richard Donkin @rdonkin @CloudfindHQ Presentation delivered at the Salesforce Platform Developer User Group Bristol, UK on 6th March 2014

Canvas Resources • Main DeveloperForce page • Canvas Developer Guide • Architecture overview 29

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

Ask the PM – What is Canvas? | Developer Force Blog Canvas is an exciting new feature for integrating new or existing Web apps into Salesforce. I sat down with Jay Hurst, the PM for ...
Read more

Integrating Salesforce with Window Desktop Apps Using ...

... js and Canvas to ... Integrating Salesforce with Window Desktop Apps ... Web Apps Using Canvas ...
Read more

Integrating external apps with salesforce using C ...

Integrating external apps with salesforce using Canvas, Any web ... Integrating external apps with salesforce using Canvas ... title> Canvas ...
Read more

Integrating third-party applications within Salesforce ...

... applications within Salesforce using Canvas ... Web Apps Using Canvas ... Integrating a Node .js App Using ...
Read more

Webinar FAQ: Intro to Canvas -

Webinar FAQ: Intro to Canvas. ... the direction of integrating Selenium Webdriver ... Java or Ruby to develop Canvas apps? A: No, any web app can ...
Read more

Alfa img - Showing > Salesforce Canvas App

Intro to Canvas Apps in the... Release Notes. Intro to Build your First F... ... Integrating Web Ap...
Read more

App Cloud: How you integrate: Connect everything, fast ...

How You Integrate; How You Manage; How ... Easily sync data between your Heroku customer apps and your ... Using our Canvas technology, any ...
Read more