Category: Node Js

Salesforce Node.js Canvas Signed Request


In this blog, I am going to explain how to set up salesforce canvas signed the request with node js. Signed Request is default authentication for canvas app. The signed request authorization flow varies depending on whether the canvas app’s Permitted Users field is set to “Admin approved users are pre-authorized” or “All users may self-authorize”. The signed request containing the consumer key, access token, and other contextual information is provided to the canvas app if the administrator has allowed access to the canvas app for the user or if the user has approved the canvas app via the approve/deny OAuth flow

Setup Connected App
First, we are going to create a connected app to obtain the consumer secret key which we will be used in the signed request.

  1. In Salesforce, from Setup, enter Apps in the Quick Find box, then select Apps.
  2.  In the Connected Apps related list, click New.
  3. In the Connected App Name field, enter NodeJsSignedRequest.
  4. In the Contact Email field, enter your email address.
  5.  In the API (Enable OAuth Settings) section, select the Enable OAuth Settings field.
  6. In the Callback URL field, enter https://localhost:8443/sdk/callback.html.
  7. In the Selected OAuth Scopes field, select Full Access.
  8. In the Canvas App Settings section, select Canvas.
  9. In the Canvas App URL field, enter https://localhost:8443/
  10. In the Access Method field, select the Signed Request (Post).
  11. In the Locations field, select Chatter Tab and save it.

On the detail page for the canvas app, next to the Consumer Secret field, click the link Click to reveal. The consumer secret is used in the app to authenticate. We will configure the this later in the Heroku apps.

Configure Who Can Access the Canvas App

Now you need to configure the canvas app for the user access

  1. go to “NodeJSSignedRequest” managing connected apps and click on manage and edit policies
  2.  In the Permitted Users field, select “Admin approved users are pre-authorized.” and then save it 
    3. In the Profiles related list, click Manage Profiles.
    4. Select the System Administrator profile and click Save.

Time to Code

1 .create a package.json file as shown below

2.create index.js file as shown below

3. create the index.ejs view inside the “views” folder.

4. Create Profile to host it to Heroku

5. Run the following commands from the terminal.

6. Set the environmental variable to Heroku app. we are going to set the environmental variable with consumer secret which we got in the connected app.

7. Now you will see Heroku app URL some think like .

8. Go to the connected app and edit and replace OAuth callback URL and canvas app URL with Heroku app URL.

9. Now if you can go to chatter page you see the canvas app is returning the response with SignedRequest.

What Signed Request Contains?

The signed request is a string of the following elements concatenated

  • The canvas app consumer secret encrypted with HMAC SHA–256 algorithm
  • A period (“.”)
  • The context and authorization token JSON encoded in Base64

When using a signed request, Salesforce delivers the user context and authentication information to your canvas app URL. To ensure that the signed request is valid, you must verify that the signed request was signed using your specific canvas app consumer secret as explained below.

  1. Receive the POST message that contains the initial signed request from Salesforce.
  2. Split the signed request in the first period. The result is two strings: the hashed Based64 context signed with the consumer secret and the Base64 encoded context itself.
  3. Use the HMAC SHA-256 algorithm to hash the Base64 encoded context and sign it using your consumer secret.
  4. Base64 encode the string created in point 3.
  5. Compare the Base64 encoded string with the hashed Base64 context signed with the consumer secret you received in point 2.




Node Js Heroku Canvas Integration


In this blog, I am going to explain Heroku and node js canvas integration. Canvas allows you to integrate web applications with Salesforce in the different places of salesforce like Chatter Tab, Visualforce Page, Lightning Component, Publisher, Chatter Feed, Console, Open CTI, Mobile Navigation, Layouts, and Mobile Cards. In this post, I am going to show the simple table that contains the product master data which is a simple HTML table.


  1. Git installed on your local machine
  2. Heroku account
  3. Heroku toolbelt installed.
  4. Node.js installed on your local machine

Creating Connected App

In order to integrate the salesforce with Heroku application, you need to create the configure the salesforce connected app as shown.

  • Setup -> Create -> Apps -> Connected Apps-> New
  • Fill  Connected App NameAPI Name, and Contact Email as shown in the image 
  • Check the Enable OAuth Settings in the API (Enable OAuth Settings) section
    • Callback URL: add as Later after deploying node js app to Heroku, we need to change this.
    • Selected OAuth Scopes: select the scopes you want for the NodeJS app access token to grant.  Select as ” Full Access ” for this testing app.
  • In the section, Canvas App Settings type Check Canvas
  • Canvas App URL: after deploying the apps Heroku, we are going to change this URL.
  • Access Method: Signed Request (POST)
  • Locations: choose Chatter Tab and publisher as of now. but you can select one or more based on the where you want to show this the canvas on salesforce.
    Now finally connected App is looking as shown below.

Now you need to enable the app for the profiles or users. To do this,

  • Click on the Manage on the connected App which you created in above .click edit policies
  • In the OAuth policies select Admin approved users are pre-authorized for the Permitted Users field and save it
  • In the Profiles related list add the profiles or permission set which you wanted to grant access

Building Your App on Node Js

Let’s set up the basic app structure. We will use Express to set up a basic Node application. Here is the below package.json file which we will use to build the node js application. The application folder structure is shown below.


  • Once you have created your file structure, set up a Git repo in this directory by running from command. $ git init your command line within this directory.
  • Inside of the public > views > index.html file, add the following code

  • From the command line in the main app directory initialize your Node app by running -.npm install which will load all the node modules from the package.json

In the index.js file add the following code:

Run the following from the command line within your main app directory to push your changes to Heroku.

  1. heroku create
  2. git add .
  3. git commit -m "pushing to heroku"
  4. git push heroku master
  5. heroku open
    Open the URL which looks like as a random string like

Now go to the Connected app which you created in earlier, update the callback URL and Canvas App URL with the Heroku app URL  example

Now We have to add the Environmental variable Consumer secret from the connected app to Heroku by runs the following command.

Now you can see the Canvas app on the chatter tab as shown below.

Github URL for complete code: