Spread the love

Following the old post [Salesforce / Canvas] Set up a minimum Canvas App (Java style) I’ve decided to put togheter the code I’ve used to talk to a Force.com Canvas App in NodeJS.

For those who can’t wait the whole article, this is the repo (CanvasApp-NodeJS-Base).

Follow this steps to configure an App (something is changed in the last SF releases):

  • Setup -> Create -> Apps -> (Connected Apps) New
  • Fill Conntected App Name, API Name and Contact Email
  • Check the Enable OAuth Settings in the API (Enable OAuth Settings) section
    • Callback URL: put a valid URL (you don’t need it for the scope of this example)
    • Selected OAuth Scopes: select the scopes you want for the NodeJS app acess token to grant
  • In the section Canvas App Settings type:
  • Canvas App URL: the url of the POST action to be called by Salesforce when injecting the session data (e.g. https://my-canvas-app.herokuapp.com/canvas/callback)
  • Access Method: use Signed Request (POST)
  • Locations: choose Chatter Tab (the app will be shown in the Chatter page)

Than you need to enable this app:

  • Setup -> Manage Apps -> Connected Apps -> Your App Name
  • In the OAuth policies select Admin approved users are pre-authorized for the Permitted Users field
  • In the Profiles related list select your profile (all user of that profile are automatically allowed to consume this app)

There are more ways to configure the Canvas App usage, this is the quicker.
Now clone this github repo CanvasApp-NodeJS-Base and create your own app:

$ cd [your test folder]
$ git clone https://github.com/enreeco/CanvasApp-NodeJS-Base
$ heroku create my-canvas-app
$ git push heroku master

The app will be pushed to Heroku (if you are using Heroku 🙂 ) and you will find it listening @ https://my-canvas-app.herokuapp.com.
Remember to use the “https” protocol in the callback URL setting, otherwise the canvas app won’t work correctly when called from Salesforce (using iframes with different protocols makes the browser go creazy).

To make it work you have to set the secret as an Environmental variable (the secret is the Consumer secret field in the App settings).
On Heroku simply type:

$ heroku config:set SF_CANVASAPP_CLIENT_SECRET=XXXXXXXXX

If you access the app outside the canvas this is what you see:

This is what happens in case of error:

This is what happens if all goes well:

The core of this app is the sf-tools/index.js file which handles the decoding of the POST request that contains all the canvas info (such as token, urls, …): have a look at the verifyAndDecode(input, secret) function.
You can then use this token and urls to make whatever call you want to your instance (as long as your user has access to it), but its outside of this post!

I leave you with a picture of a cute cat, this sould bring here a lot more readers.