DEV Community: javier nicolás adan

Integración de Salesforce, Node.js y React: Una Guía Paso a Paso

javier nicolás adan — Mon, 20 Jan 2025 10:44:05 +0000

En este artículo, te guiaré paso a paso para conectar un backend construido con Node.js a Salesforce usando OAuth 2.0, e integrarlo con un frontend, en este caso, React.

Esta solución utiliza una Connected App en Salesforce y los paquetes sf-jwt-token y jsforce en el backend.

Explicaré cómo hacerlo en tu máquina local y en un entorno de prueba utilizando Ngrok.

1. Configuración en Salesforce

Para habilitar una comunicación segura entre Salesforce y nuestra aplicación, primero necesitamos configurar una Connected App en la interfaz de usuario (UI) de Salesforce.

Así que, antes de empezar a programar, necesitamos configurar Salesforce para permitir la integración con nuestra aplicación.

Pasos en la UI de Salesforce:

Crear una Connected App:
- Ve a Setup → App Manager → Create a Connected App.
- Habilita el acceso a la API seleccionando Enable OAuth Settings.
- En Selected OAuth Scopes, selecciona:
  - Perform request at any time (refresh_token, offline_access)
  - Manage user data via APIs (api)
  - Full access (full).
Configurar las políticas de OAuth:
- Dentro de la nueva aplicación, navega a Manage → Edit Policies y configura:
  - Permitted Users: Admin approved users are pre-authorized.
- También necesitamos asignar el perfil que queremos usar en Manage Profiles.
Consumer Key y Secret:
En la sección API (Enable OAuth Settings), haz clic en Manage Consumer Details y guarda el Consumer Key (Consumer_Id) y el Consumer Secret (Consumer_Secret).

Estos valores se usarán más adelante en el archivo .env para la configuración del backend.
Restablecer tu token de seguridad:
Restablece tu token de seguridad, si es necesario, navegando a tus configuraciones personales en Salesforce.

Este token también se agregará a las variables de entorno (explicado más abajo).

2. Configurar el servidor en Node.js

A continuación, configuraremos un backend en Express y las herramientas necesarias para interactuar con Salesforce.

Puedes usar este repositorio ya preparado para este propósito:

Backend Node

Instalar dependencias:

npm install express jsforce sf-jwt-token

Nota:

Escribo este artículo en diciembre de 2024, y creo que hay dos características interesantes recientes de Node.js que deberías conocer:

Si usas Node.js v21.7.0 (abril de 2024) o posterior: Ya no necesitas dotenv para las variables de entorno, puedes usar process.loadEnvFile() al inicio de tu aplicación. Después de esto, tendrás tu archivo .env como de costumbre en la raíz del proyecto, y podrás llamar tus variables desde cualquier parte del código usando process.env.TU_VARIABLE. Web Developer.
Además, desde Node.js v22 (Soporte a Largo Plazo desde octubre de 2024), puedes usar node --watch <tu archivo> en lugar del paquete nodemon para reinicios automáticos del servidor. Logrocket.

Así que, dos paquetes menos para instalar.

Variables de entorno:

Crea un archivo .env y define lo siguiente:

CONSUMER_ID=tu_consumer_id
SF_USERNAME=tu_usuario_de_salesforce
LOGIN_URL=https://login.salesforce.com OR https://test.salesforce.com

¿Probando localmente? Usa Ngrok

Ngrok se utiliza para exponer tu servidor local a internet, permitiendo que Salesforce envíe callbacks a tu aplicación durante el proceso de autenticación (necesario principalmente en la primera llamada):

Instala y ejecuta Ngrok.
Ejecuta tu servidor.
Apunta Ngrok al puerto donde se ejecuta tu backend escribiendo ngrok.exe http <tu_puerto> en tu terminal.
Copia la URL generada por Ngrok y configúrala como Callback URL en tu Connected App en la sección API (Enable OAuth Settings).

3. Clave privada y certificado

Genera una clave privada y un certificado con el siguiente comando en la terminal:

$ openssl req  -nodes -new -x509  -keyout private.pem -out server.cert

Subir la firma digital a Salesforce

Ahora que los dos archivos están en tu proyecto, habilita la opción Use digital signatures en tu Connected App y sube el certificado generado en:

Setup → Certificates and Key Management.

Ahora, ejecuta la ruta del token en tu navegador:

http://localhost:3000/token

Si todo salió bien, obtendrás tu access_token.

{
  "access_token": "",
  "scope": "api full",
  "instance_url": "",
  "id": "",
  "token_type": "Bearer"
}

En esta solución, opté por solicitar un nuevo token de Salesforce para cada llamada a la API. Salesforce puede devolver el mismo token o emitir uno nuevo, ya que los tokens se actualizan periódicamente.

4. Usando JSforce

Con el token, puedes comenzar a interactuar con Salesforce desde tu servidor Node.js. Aquí hay un ejemplo simple:

const jsforce = require('jsforce');

const conn = new jsforce.Connection({
  instanceUrl: 'https://tu-instancia.salesforce.com',
  accessToken: 'tu_access_token',
});

conn.query('SELECT Id, Name FROM Account', (err, result) => {
  if (err) return console.error(err);
  console.log('Cuentas:', result.records);
});

5. Integración con React

Finalmente, usa React para crear un frontend que consuma datos del backend y los muestre de forma interactiva. Por ejemplo, podrías construir:

Un formulario para crear registros en Salesforce.
Una tabla para mostrar los datos de cuentas recuperados desde el backend.

En mi caso de uso, necesitaba una forma en que los empleados de una empresa pudieran registrar datos de desplazamiento y hacer registros en Salesforce, específicamente en Net Zero Cloud. Para este ejercicio, creé el objeto necesario y desarrollé la solución con un Developer Org gratuito.

También puedes usar este repositorio de frontend en React para este propósito:

Frontend React.

Conclusión

Integrar Salesforce, Node.js y React es una forma sencilla de experimentar con herramientas y hacer que todo funcione.

Espero que este artículo te ayude a empezar con tu propia solución de integración.

¿Tienes preguntas o ideas para mejorar este flujo de trabajo? Déjalas en los comentarios.

Integration of Salesforce, Node.js, and React: A Step-by-Step Guide

javier nicolás adan — Sat, 28 Dec 2024 00:00:13 +0000

In this article, I’ll walk you through how to connect a backend built with Node.js to Salesforce using OAuth 2.0, and then integrate it with a frontend, in this case, React.
This solution is with Connected app in Salesforce, and sf-jwt-token & jsforce packages in the backend.
I’ll explain how to do this on your local machine, and in test environment, using Ngrok.

1. Salesforce Configuration

To enable secure communication between Salesforce and our application, we first need to configure a Connected App at the User Interface (UI) in Salesforce.
So before start coding, we need to configure Salesforce to allow integration with our application.

To do in UI Salesforce:

Create a Connected App:
- Go to Setup → App Manager → Create a Connected App.
- Enable API access by selecting Enable OAuth Settings.
- In Selected OAuth Scopes, choose:
  - Perform request at any time (refresh_token, offline_access)
  - Manage user data via APIs (api)
  - Full access (full).
Set OAuth Policies:
- Inside our new App, navigate to Manage → Edit Policies and set:
  - Permitted Users: Admin approved users are pre-authorized.
- Also we need to assign the profile we want to use in Manage Profiles.
Consumer Key and Secret:
In the API(Enable OAuth Settings) section, click on Manage Consumer Details and save Consumer Key (Consumer_Id) and Consumer Secret (Consumer_Secret). These values will be used later int the .env file fot the backend configuration.

4 Reset Your Security Token:
Reset your security token if needed by navigating to your personal settings in Salesforce. This token will also be added to your environment variables (explained below).

2. Setting Up the Node.js Server

Next, we’ll set up an Express backend and the required tools to interact with Salesforce.

You can use this repo already prepared for that purpose:
Backend Node

Install Dependencies:

npm install express jsforce sf-jwt-token

Note:

Im writing this post december '24, and these might not be the newest tools, but there are two recent nice to know node's features. So i just let you know about them, just in case:

If you're using Node.js v21.7.0 (April 2024) or later: You don’t need dotenv for environment variables anymore, you can use process.loadEnvFile() at the beginning of your aplication instead. After this, you will have your .env like normally in the root of your project with your variables, and now you can call your variables from everywhere in your code with process.env.YOUR_VARIABLE_NAME. Web Developer.
Also, from Node.js V22 (Long-Term Support from October 24), you can use node --watch <your file> instead of nodemon package for automatic restarts of the server. logrocket.

So, two less packages for installing.

Environment Variables:

Create a .env file and define the following:

CONSUMER_ID=your_consumer_id
SF_USERNAME=your_salesforce_username
LOGIN_URL=https://login.salesforce.com OR https://test.salesforce.com

Testing Locally? Use Ngrok

Ngrok is used to expose your local server to the internet, allowing Salesforce to send callbacks to your application during the authentication process (needed mainly in first call):

Install and run ngrok.
Run your server.
Point ngrok to the port your backend is running on, typing ngrok.exe http <you port> in your terminal.
Copy the ngrok-generated URL and set it as the Callback URL in your Salesforce Connected App in the API(Enable OAuth Settings) section.

3. Private Key and Certificate

Generate a private key and certificate with the following terminal command:

$ openssl req  -nodes -new -x509  -keyout private.pem -out server.cert

Upload digital signature to SF

Now the two files are in your project. Time to Enable the option Use digital signatures in your Connected App, and Upload the generated certificate in Setup → Certificates and Key Management.

Now, run the token route in your brower

http://localhost:3000/token

If everything went well, now you will get your access_token.

{
  access_token: '',
  scope: 'api full',
  instance_url: '',
  id: '',
  token_type: 'Bearer'
}

In this solution, I chose to request a new token from Salesforce for every API call. Salesforce may return the same token or issue a new one, as tokens are refreshed periodically.

5. Using JSforce

With the token, you can start interacting with Salesforce from your Node.js server. Here’s a simple example:

const jsforce = require('jsforce');

const conn = new jsforce.Connection({
  instanceUrl: 'https://your-instance.salesforce.com',
  accessToken: 'your_access_token',
});

conn.query('SELECT Id, Name FROM Account', (err, result) => {
  if (err) return console.error(err);
  console.log('Accounts:', result.records);
});

6. Integrating with React

Finally, use React to create a frontend that consumes data from the backend and displays it interactively. For instance, you could build:

A form to create records in Salesforce.
A table to display account data retrieved from the backend.

In my use case, I needed a way in which a company's workers were able to put the commuting data in, and make registers in SF, concrete in Net Zero Cloud, but for this exercise I just created the object needed and build the solution with a demo developer free org.

You can use also this React Frontend form repo for this purpose.

React Frontend.

Conclusion

Integrating Salesforce, Node.js, and React in a easy way, just to play around with tools and make things workings.
I hope this article helps you get started with your own integration solution.

Got questions or ideas to improve this workflow? Drop them in the comments.