Node + OAuth + google plus

In this blog, we will learn how to use open authentication while working with Node JS. We will be using Yarn package manager for managing node dependencies.
Let’s initialize Yarn and proceed with installing necessary dependencies.
Install yarn using node package manager.

Create a project directory and execute the following commands in terminal.

Passport.js is a library in node environment to implement OAuth with ease. Let’s install passport as our dependency.

Let’s install other dependencies like express and dev dependencies like nodemon.

After installing all the above dependencies package.json should look like below (versions may vary)

package.json

The folder structure of our application looks like below.

Let’s create server.js file to configure node server and manage middleware

server.js

In order to use google plus oauth, we need to register our application with google using google cloud console.

Head over to credentials menu in the above screen and create an application, with host details, for development we can use http://localhost:<port>.

On creation of client we will be presented with a screen as below with client id and secret

Let’s now resume our coding, export client credentials from auth.js.

we need to persist the user data to a data store on successful OAuth for the first time. In this blog, we would use mongo DB and mongoose for Object-Document mapping.

Mongoose uses models to persist data to Mongo DB. Let’s create a user model object.

We now need to configure mongo DB server connections which would be used to store user account data and social profile details.

Last but not the least, let’s configure passport OAuth configuration.

Now that we are done with passport configuration let’s go ahead and define our application routes/endpoints.

we have registered localhost:9090/oauth as trusted javascript origin and localhost:9090/oauth/redirect as redirect URI in google cloud console. so let us define these routes.

Finally, Let’s configure views of the application.

Index.ejs

Profile.ejs

variables in profile.ejs are passed in the routes like below

Now let’s configure routes and mongoose in server.js

server.js

Now let’s start the server using npm start command, in order to use npm start command we need to add script to package.json

open terminal and run npm start Now let’s open localhost:9090 in browser

on logging in successfully, we will get profile data which is shown

 we have successfully retrieved the social profile of a user and persisted in our mongo DB

 

 

Salesforce Node.js Canvas Signed Request

Introduction

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 Force.com Canvas.
  9. In the Canvas App URL field, enter https://localhost:8443/
  10. In the Access Method field, select 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 https://arcane-woodland-93536.herokuapp.com/ .

8. Go to 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 the 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

Introduction

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 simple HTML table.

Prerequisites

  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 https://localhost.com/_callback. 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 Force.com Canvas
  • Canvas App URL: https://localhost.com/canvas/callback.Later 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. Application folder structure is shown below.

package.json

  • 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 https://limitless-retreat-55750.herokuapp.com/

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 https://limitless-retreat-55750.herokuapp.com/

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 : https://github.com/rajamohanvakati/Canvas-App-Quick-Action