Integrating Web Apps with Canvas - Salesforce1 World Tour
•Descargar como PPTX, PDF•
2 recomendaciones•2,249 vistas
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 Safari
Recomendados
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Similar a Integrating Web Apps with Canvas - Salesforce1 World Tour
Similar a Integrating Web Apps with Canvas - Salesforce1 World Tour (20)
Más de Richard Donkin
Último
Último (20)
Integrating Web Apps with Canvas - Salesforce1 World Tour
- 1. Integrating Web Apps with Force.com Canvas Richard Donkin @rdonkin CTO, Cloudfind cloudfindhq.com Salesforce1 World Tour - May 22, 2014 www.slideshare.net/rdonkin
- 2. About Cloudfind xxxx Smart tagging makes it simple to find and manage files in the cloud Brings collateral into Salesforce so that teams close deals faster
- 3. Ideal World
- 4. Real World
- 5. Ideal World “All our apps are on Salesforce”
- 6. Real World ERP SCM … Field Service Project Management … HR Cloud Storage Sales Service Marketing
- 7. Real World ERP SCM … Field Service Project Management … HR Cloud Storage Sales Service Marketing Force.com Canvas iframe
- 8. Real World ERP SCM … Field Service Project Management … HR Cloud Storage Sales Service Marketing Canvas integration via Cloudfind app Show auto tagged files from cloud storage No need to hunt through folders
- 9. Real World ERP SCM … Field Service Project Management … HR Cloud Storage Sales Service Marketing Any Salesforce Page Any Web Application (full page or part)
- 10. UI integration ERP SCM … Field Service Project Management … HR Cloud Storage Sales Service Marketing Any Web Application Any Salesforce Page Any Web Application Salesforce1
- 11. Demo – Canvas for desktops
- 12. 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
- 13. 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
- 14. Where can you use Canvas? Wherever Visualforce works: • Custom tab • Object detail page • Chatter publisher • Chatter feed • Chatter page Chatter publisher Chatter feed
- 15. 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
- 16. Demo – Canvas for Salesforce1
- 17. 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>
- 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 – 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
- 19. 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
- 20. 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
- 21. 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"
- 22. 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
- 23. 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
- 24. Summary Salesforce as the “single screen” for key apps
Notas del editor
- POLL Built a force.com app? Built a web app on other platform? Built a Canvas app? WHY – diversity of enterprise apps HOW – embed different types of apps TIPS – from Cloudfind developers I’m going to start out on this Canvas introduction by looking at one of the big challenges of enterprise IT: integrating the huge diversity of applications within a business. Then I’m going to go into the why, what and how of Canvas, and finally cover some tips that the developers at Cloudfind have come up with as a result of developing one of the first Canvas applications in the AppExchange.
- Reality is that almost all companies will have quite a few apps that are not on the Salesforce platform, including intranet apps, intranet websites, and cloud apps. Even companies that have Salesforce as a preferred platform are likely to have some off-platform apps.
- One key point about Canvas web apps is that they can still integrate back into Salesforce via normal Salesforce APIs, as well as some new Canvas APIs. This can be for data integration, ensuring Salesforce and the web app are in sync, or function integration, allowing the web app to call Salesforce operations.
- The web app could be your own custom app, or an enterprise app from an ISV. If existing app doesn’t have an API, you will need source code access to add an API
- Choice of language is a key benefit of Canvas – at Cloudfind we use Python, which is great for our use case, and you can choose whatever makes sense for your team. IaaS or on-premise deployments enable you to use multi-core, SSDs, memory caches, NoSQL databases, Big Data technologies, or whatever is required by your application, and still deliver it within the Salesforce UI. Generous Canvas limits, and the use of off-platform processing, mean you can use Force.com’s daily governor limit allocations for CPU, API, etc on data integration from the Canvas app instead of the UI-driven interactive processing required by an app using Force.com UI. - Canvas needs 2 API calls each time the Canvas frame loads, so up to 2,500 Canvas frame loads are possible per day, given the Canvas API allocation of 5,000 Canvas calls per day
- Also: Service Cloud Console, OpenCTI, … Virtually anywhere that Visualforce works.
- Standard web app techniques: mobile toolkits, responsive design, size of touch targets Since you are just delivering a standard mobile web app with a few Canvas changes, it can also work inside a separate mobile hybrid app, using technologies such as Cordova/PhoneGap.
- Resources to check exact size of your browser window and screen: http://www.whatsmybrowser.org/ - quick test of screen size and browser window dimensions available to apps. http://www.whatismybrowser.org/ - more detailed Some of the work required to make a web app UI fit into a smaller iframe (for object detail page or the Chatter feed/publisher) is similar to responsive design for mobile devices – you can’t predict the exact size of the iframe the Salesforce admin may create, or the width of the user’s window. Internal apps don’t have to do so much on this, but in any case it’s good preparation for doing a mobile web app.
- Watch out for a couple of app characteristics that may make it not work in an iframe - it should be possible to turn these off if the app is invoked via Canvas frame-busting, aka frame-killing – some apps specifically break out of iframes if they find themselves within one. See http://en.wikipedia.org/wiki/Framekiller clickjacking prevention – these are attacks that carefully position malicious buttons on top of the app’s buttons, by putting it in an iframe without the app developer’s knowledge. To prevent this, some apps protect against this by sending a special HTTP header, X-Frame-Options. See https://docs.djangoproject.com/en/dev/ref/clickjacking/ for more about this, and how the Django framework for Python enables this protection
- This option is simply creating a new focused web UI, with whatever language / technology makes sense, and ensuring that this UI is Canvas-enabled. As long as there’s a suitable API (including the option of DB access where available), this is a great option. Typically the data or tasks that must be exposed from the enterprise app into Salesforce are quite specific, particularly if used in the object detail page. More ambitious integrations with a large UI may be better off integrating the whole enterprise app with Canvas. There are other options, for example creating a generic Canvas “UI to API” proxy application which can surface any enterprise app page – however, the value is not so clear compared to other types of integration.
- Reference: P3P policies in Internet Explorer: http://stackoverflow.com/a/16737097/992887
- Reference: Safari third-party cookies in iframes – there are many hacks to try to bypass Apple’s policies. I don’t recommend these as they are fragile – with any Safari update, Apple can break these hacks as they regard them as bypassing their cookie policies, and in fact many such hacks have been broken see http://stackoverflow.com/questions/9930671/safari-3rd-party-cookie-iframe-trick-no-longer-working. The recommended approach here requires only two extra clicks per device when first using the device. After this, there are no additional clicks for later login sessions on the same device – and most importantly, it won’t break in the future as doesn’t try to bypass Apple’s policies.