Technology on "Cloud": Canvas

Canvas enables you to easily integrate a third-party application in Salesforce. Canvas is a set of tools and JavaScript APIs that you can use to expose an application as a canvas app. This means you can take your new or existing applications and make them available to your users as part of their Salesforce experience.
The third-party app that you want to expose as a canvas app can be written in any language. The only requirement is that the app has a secure URL (HTTPS).

Note-Before diving into canvas, consider these other options for integrating a third-party application in salesforce:

Web tabs- Canvas apps present third-party applications as part of a page. Web tabs can present a full application in large screen space.

HTML iframes in a custom component-Canvas apps provide greater functionality than developing with iframes. Iframes are sometimes easier to integrate with your application

Where Canvas Apps Appear?

Canvas apps can appear in a few places.

Chatter Feed—The canvas app appears in the feed. If this option is selected, you must create a CanvasPost feed item and ensure that the current user has access to the canvas app.
Chatter Tab—The canvas app appears in the app navigation list on the Chatter tab. If this option is selected, the canvas app appears there automatically.
Console—The canvas app appears in the footer or sidebars of a Salesforce console. If this option is selected, you must choose where the canvas app appears in a console by adding it as a custom console component.
Layouts and Mobile Cards—The canvas app can appear on a page layout or a mobile card. If this option is selected, you choose where the canvas app appears by adding it to the page layout.
Mobile Nav—The canvas app is accessible from the mobile app navigation menu.
Open CTI—The canvas app appears in the call control tool. If this option is selected, you must specify the canvas app in your call center’s definition file for it to appear
Publisher—The canvas app appears in the Chatter publisher and action bar. If this option is selected, you must also create a canvas custom action and add it to the global publisher layout or to an object’s page layout.
Visualforce Page—The canvas app can appear on a Visualforce page . If you add an <apex:canvasApp> component to expose a canvas app on a Visualforce page, be sure to select this location for the canvas app; otherwise,you’ll receive an error.

Note- You can see what are the available options for canvas from the connected app under Canvas app setting.

Authentication-

When you create a canvas app, you can use one of the following authentication methods:

Signed request—The default method of authentication for canvas apps. The signed request authorization flow varies depending on whether the administrator gives users access to the canvas app or if users can self-authorize. The signed request containing the consumer key, access token, and other contextual information is provided to the canvas app in one of these ways:

The administrator allows access to the canvas app for the user.
The user approves the canvas app in the OAuth flow.

OAuth 2.0—Canvas apps can use the OAuth 2.0 protocol to authorize and acquire access tokens.When using OAuth with Canvas, you have two options:

Web server flow—To integrate a canvas app with the Salesforce API, use the OAuth 2.0 web server flow, which implements the OAuth 2.0 authorization code grant type. With this flow, the server hosting the web app must be able to protect the connected app’s identity, defined by the client ID and client secret.
User-agent flow—With the OAuth 2.0 user-agent flow, users authorize a canvas app to access data using an external or embedded browser. This flow uses the OAuth 2.0 implicit grant type.

Demo of Canvas Application

Let’s start with a very basic demo of Canvas. Let’s say we have two Salesforce orgs, Salesforce Service Provider and Salesforce Identity provider. The Canvas app is hosted in Idp salesforce org and uses signed requests to reference a VF page in the second org.

Step1: Go to Idp org and enable Identity Provider as below: