How to post to salesforce web to lead using express.router() - node.js

I'm new to node.js, I have a salesforce web to lead form. I want to use express.Router() to post the form to salesforce. How do i format the
router.post( '/Contact', function(req,res,next) {
var body = req.body;
});
body? The form action = 'https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8'
and for example the OID = '1111111' ** I will use process.env.ORG_ID to get the real org ID.

Express isn't used for making a request but rather is a library for making Web APIs/Apps. If you need to make a request then you could use request which is very popular and wraps the Node Core API HTTP Library function, http.request().
Using request you can make your POST request to salesforce as such
let orgId = process.env.ORG_ID
request({
method: 'POST',
url: `https://webto.saleforce.com/servlet/servlet.WebToLead?encoding=UTF-8&OID=${orgid}`
}, (err, res, body) => {
if (err) {
return err
}
// Handle res/body per needs
})

Related

Dealing with express.raw for 2 different apis in node.js

I am building an app on an a marketplace in which I receive webhooks from the app and then make api calls to perform certain actions.
I am using the Hubspot API for most functions and the Stripe API to collect payment and verify payment status. The entire code is written in Node JS and I am running the express node js library to listen to endpoints and deal with requests.
This is the setup of my express
const express = require('express')
const app = express()
app.use(express.raw({type: "application/json"})
app.use(express.json())
I am using express.raw because of the stripe API which requires the raw request to be called into some kind of Buffer.
Now this is the call for an example endpoint for a non-Stripe call, such as getting account settings for Hubspot
app.post('/account-fetch', (req, res) => {
const portalId = req.body.portalId
console.log(portalId)
setup.retrieveKey(portalId, "hubname")
.then((acc) => {
console.log(acc)
const component = {
"response": {
"accounts": [{
"accountId": '"' + portalId + '"',
"accountName": acc
}]
}
}
console.log(component)
res.status(200).send(component)
})
.catch((err) => {
console.error(err)
res.status(400).send(err)
})
})
Now the issue is that while stripe needs it to have that express.raw call, it messes up everything else, because the Buffer is encoded and it just comes out as numbers.
I've also tried on the stripe endpoint:
app.post('/stripe/:type', express.raw({type: "application/json }),(req, res) => {
//rest of my code
})
or not calling it at all, still no cigar. All I get is a StripeSignatureVerificationError because it can't read the signature on the payload properly.
I've tried placing that line just before the stripe endpoint, but it doesn't work.
Is there a way to either to convert the Buffer back into what it would be if I didn't do the express.raw call or a way to just make that call isolated for one endpoint?
Ok I found the answer to this. It was to use Routers
Essentially I did this:
const stripeApp = express.Router()
stripeApp.use(express.raw({type:"*/*"}))
app.use('/stripe',stripeApp)
and then for the endPoint:
stripeApp.post('/:type', express.raw({type: "application/json"}),(req, res) => {
//my code here
})
Both Hubspot and Stripe APIs started working.

external api handling in the backend

On my express server I make queries to an external API using its own token. When I log in to my server I request a token to the external API based on the user who logged in, and I keep the token of the external API in the token of my express server.
Each user gets different data according to their token from the external api, for queries that require external API information, I read the received token and get the external API token to send it through headers with axios, for example:
const LoginUser = (request, response) {
axios.post('/ExternalApi/auth',request.body)
.then( data =>{
const payload = {
...
tokenExternalApi: data.token
}
const token = jwt.sign(payload, ...)
return response.status(200).json(token)
})
}
const getData = (req, response){
const tokenFromClient = req.headers.authorization
//Function extract tokenExternalApi from payload Token
const tokenExternalApi = getTokenExternl(tokenFromClient )
axios.get(`/urlExternalApi`, { headers:
{ Authorization: tokenExternalApi }}
).then(res => {
return response.status(200).json(res.data)
})
}
Is this the correct approach to managing external apis tokens or is there a cleaner way to do it?
Here is my sample code that I use for hit an external API within function in node js using axios
first time you should install axios npm install axois
const axios = require('axios');
async yourFunction(){
axios({
method: 'POST',
url: "http://yoururl.com",
data: {
name: '+62'+phoneNumber,
number: '+62'+phoneNumber,
message: 'success',
}
});
}
In my personal opinion, this seems to be a clean approach.
But keep in mind that tokens are visible to users, so the fact is your users can decode the token, view tokenExternalApi, know that you are using an external API in the backend and directly make calls to ExternalApi using that token, provided they have the know-how of it. If you understand this fact and are fine with it, then this works.
Otherwise, you can consider encoding the token before sending it to the user or store it on the server-side session.

POST request to 3rd party URL from Angular/NodeJS/ExpressJS

Option 4.2 seems like the best direction for me. Does anyone have any other suggestions?
Is there a way to access response in any of the below scenarios or I need to rewrite whole logic?
I need to perform a form POST to a 3rd party payment provider with Angular Typescript with or without NodeJS/ExpressJS with the redirect.
Flow:
The problem is that in some cases when I perform URL redirect successfully I don't receive any response from payment gateway. When a user clicks "Pay" - "Plati" he is redirected to the success page http://example.com/success and in case of error response to page http://example.com/cancel.
The expected scenario
The user comes to the website selects the products and clicks on the buy button. At that point, s/he is taken to another page where s/he makes the payment. After successful payment, the user is redirected back to the website and I get a response from the server and show the user a related message.
Option 1 - Form Action URL
If I do standard form submit and put payment gateway URL inside [action]="'https://test-wallet.example.com/checkout/'" then the user will be redirected directly to that URL and payment will be processed successfully. But in that case I don't receive a response that is needed for me to know what data to show to the user - success or error message.
<form [action]="'https://test-wallet.example.com/checkout/'" ngNoForm method="POST" target="_blank">
<button type="submit">Pay with card</button>
<input name='param1' value='param1'>
<input name='param2' value='param2'>
<input name='param3' value='param3'>
<input name='param4' value='param4'>
<input name='param5' value='param5'>
<input name='param6' value='param6'>
<input name='param7' value='param7'>
<input name='param8' value='param8'>
<input name='param9' value='param9'>
</form>
Option 2 - HttpClient through service
I've also tried making HttpClient POST request inside the Angular app and without NodeJS backend. In that case, I call the Payment Gateway URL directly but with CORS error.
payment.service.ts:
payFunction(parameters: any){
return this._httpClient.post('https://test-wallet.example.com/checkout/'+
'param1='+parameters.param1+
'&param2='+parameters.param2+
'&param3='+parameters.param3+
'&param4='+parameters.param4+
'&param5='+parameters.param5+
'&param6='+parameters.param6+
'&param7='+parameters.param7+
'&param8='+parameters.param8+
'&param9='+parameters.param9
,parameters
,this.httpOptions
)
.catch(err => {
console.log(err);
return Observable.of(err)
})
}
I call the previous service in component:
async test(form){
await this._myPaymentService.payFunction(form.value).subscribe(res => {
console.log(res);
})
In that case I received only CORS error.
Option 3 - jQuery AJAX
I'm calling this inside my Angular component with cross-domain contentType.
But I also received only CORS error as in the case above. I know that using jQuery in the Angular app is not by the book but I had to try.
$.ajax({
headers: {
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
},
url : 'https://test-wallet.example.com/checkout/',
type: "POST",
beforeSend: function(xhrObj){
xhrObj.setRequestHeader('Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8');
},
dataType : "json",
async:true,
crossDomain:true,
data: corvusDataObject,
error: function () {
alert('Ajax Error');
},
onFailure: function () {
alert('Ajax Failure');
},
statusCode: {
404: function() {
alert("Ajax 404");
}
},
success : function (response) {
alert("Success: " + JSON.stringify(response));
}
})
.done(function( data ) {
alert("Done: " + JSON.stringify(response));
});
Option 4 - NodeJS/ExpressJS backend
If I use this approach then I received a redirect in the same way as in the first case. But my backend doesn't receive any response from the payment gateway provider.
In Angular app I'm calling my API:
<form [action]="'http://localhost:8080/myPaymentAPI/'" ngNoForm method="POST" target="_blank">
<button type="submit">Pay with card</button>
<input name='param1' value='param1'>
<input name='param2' value='param2'>
<input name='param3' value='param3'>
<input name='param4' value='param4'>
<input name='param5' value='param5'>
<input name='param6' value='param6'>
<input name='param7' value='param7'>
<input name='param8' value='param8'>
<input name='param9' value='param9'>
</form>
In NodeJS/ExpressJS I've made myPaymentAPI API with 307 redirects (from this SO answer).
var express = require('express');
var app = express();
var cors = require('cors') // CORS
var bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.use(cors());
var port = process.env.PORT || 8080;
var apiRoutes = express.Router();
apiRoutes.get('/', function(req, res) {
res.json({ message: 'API works!' });
});
app.use('/api', apiRoutes);
app.post('/myPaymentAPI', function(req, res, next) {
let param1 = req.body.param1;
let param2 = req.body.param2;
let param3 = req.body.param3;
let param4 = req.body.param4;
let param5 = req.body.param5;
let param6 = req.body.param6;
let param7 = req.body.param7;
let param8 = req.body.param8;
let param9 = req.body.param9;
res.status(200).redirect(307, 'https://test-wallet.example.com/checkout/?param1='+param1 +'&param2='+param2+...)
//res.end();
});
Above redirection transfers the user to URL (see the first image): https://test-wallet.example.com/#/checkout/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx and user on that URL make a payment but I, once again, don't receive any response.
Option 4.1
fetch returns HTML page but with blank <body>
app.post('/myPaymentAPI', function(req, res, next) {
const url = 'https://test-wallet.example.com/checkout/?param1='+param1+'&param2='+param2+'&param3='+param3+'&param4='+param4+'&param5='+param5+'&param6='+param6+'&param7='+param7+'&param8='+param8+'&param9='+param9;
fetch(url, {
method : "POST",
body: res.body
}).then(
response => response.text()
).then(
html => res.send(html)
).catch((err) => {
reject(err);
});
});
Option 4.2
In this approach, I successfully get a short version of the URL (see the first image) and then I redirect the user to that URL.
app.post('/myPaymentAPI', function(req, res, next) {
let param1 = req.body.param1;
let param2 = req.body.param2;
let param3 = req.body.param3;
...
try{
var body = JSON.stringify(req.body);
const url = 'https://test-wallet.example.com/checkout/?param1='+param1+'&param2='+param2+...;
var newData = await fetch(url, {method: "POST", body: body})
console.log(newData.url)
res.redirect(307, newData.url);
}catch(error){
console.log(error)
}
});
This page is opened after 307 redirects. The message says "Your request cannot be processed. We are sorry, an error occurred."
Do I need in this step once again append FormData before making that redirect?
Option 4.3
In this approach, I'm making a call to my API and create an object inside res.send which then I send to my frontend.
try{
var body = JSON.stringify(req.body);
const url = 'https://test-wallet.example.com/checkout/?param1='+param1+'&param2='+param2+'&param3='+param3+...;
await fetch(url, {method: "POST", body: body}).then((response) => {
const data = response;
res.send({
success: true,
redirectURL: data.url,
body: req.body
})
})
.catch((error) => {
console.error(error);
})
}catch(error){
console.log(error)
}
On frontend I successfully receive redirectURL and body data and try to make a redirect.
this._myPaymentService.payFunction(form.value).subscribe(res => {
console.log(res);
console.log(res.redirectURL);
window.location.replace(res.redirectURL);
})
The web browser then goes to the following page with blank content.
Because request has become GET. I know that it's not possible to send a POST request this way and I'm looking for way to do it.
Wow, sounds like you are very eager to write code but are really lacking some fundamentals. Do you want to have an SPA or have an old school form POST? Of course you get an CORS error when you try to send an direct API request.
I am quite worried about the outcome of this since you are actually dealing with payments and dont seem to know much about architecture - maybe i'm wrong. Did you hear about OWASP or CSRF? Did you think about storing transactions just in case something bad happens? Did you protect against users sending bad requests with i.e. negative numbers? What about
Give yourself and the pockets of your users some comfort and read up first before writing code, go through at least some examples, i.e. Angular Tour of heroes.
Here is the basic flow of how it should look like.
The backend is the translator here. It provides an API, transforms data that the user sent (after validation) into a request that the payment provider needs. After getting the result it will transform the answer into a defined response to the Angular app - something which will be a success or error message. Then the Angular app can decide what to do: Show a ok or error message to the user.
And! You always get a message from the payment provider, if really not then you should implement a timeout and react with an error message to the user.
Good luck, i really pray that you learn about and implement some security measures.
These 2 approach are seems correct:
Option 1
Option 4 (with nodejs server - before 4.1 where payment is successful)
However, there is a flow which seems missing. After the payment is made, the Payment API server does a post request to http://example.com/success or http://example.com/cancel and in the body you find the parameters. So, you can't directly use the url to show user the information on the screen (client side browser).
What you need to do is:
Have the node server (or your backend API server will also work), and use app.post handle the url at the server - the way you are doing for app.post('/myPaymentAPI',).
Update your database or get the relevant payment details or id from req.body etc.
Make a new url like https://yourwebsite.com/payment?status=SUCCESS&other-info or https://yourwebsite.com/payment/id
Redirect user to particular url on browser
That particular url will have the details or id. You can show the relevant details or get the id and make the API call as needed
app.post("http://example.com/success", function(req, res){
//get the req.body/params here which Payment Server will post to success url
//update your backend etc about payment status etc
//redirect to your custom page from here https://yourwebsite.com/payment?status=success&id=id or similar
})
app.post("http://example.com/cancel", function(req, res){
//get the req.body/params here which Payment Server will post to cancel url
//update your backend etc about payment status etc
//redirect to your custom page from here https://yourwebsite.com/payment?status=failure&id=id
})
Hope it helps. Revert for any doubts/clarifications

How to send user data object along with token to the angular front-end using node?

At the time of signup and login I want to send User's data along with JWT so that I can update current users profile data.
router.post('/signup', (req, res) => {
let userData = req.body;
let user = new User(userData);
user.save((err, registeredUser) => {
if(err) {
console.log(err);
}else{
let payload = { subject : registeredUser._id }
let token = jwt.sign(payload, 'abcd');
res.status(200).send({token});
}
});
});
How can I send registeredUser object along with token.
Two ways :
Simple and crude: res.status(200).send({token, user})
Expose custom headers from your backend and send the token as part of the response. Then you can use the response body to simply send the user/resource data. res.status(200).send({user}).
Usually #2 is a better design, since the token is more like a auth/session information and can be intercepted using custom middleware/filters (eg:PassportJS) on the backend and always attached as part of the request headers from the front-end using Angular interceptors.
Express config options: headers.https://expressjs.com/en/resources/middleware/cors.html#configuration-options

OAuth Authorization in pipeDrive callback using express framework

I created an app on sandbox.pipedrive.com in Marketplace Manager and then I created a callback which asked user to install the app which I setup in pipedrive.
If user allow to install they get redirected to my callback url in controller, my controller the code is :-
app.get('/pipedrive-callback', function(req, res) {
console.log('Success')
});
Now in function I want to exchange the auth token. Can anyone help me to solve this.
Can you try this?
You need to send another post request to their server after user is redirected to your callback. After the redirection you will get the authorization_code from the request params. You have to send that code in this post request to get the actual tokens that will allow you to do magic.
app.get('/pipedrive-callback', function (req, res) {
console.log('Success');
const authorization_code_from_service = req.query.code; // This will extract the authorization_code from the call back url.
//Here goes your step 4 + 5. You need to make a post request to their server now. For this, there is a library aka "request" in npm.
// Here is the link for that https://www.npmjs.com/package/request
const request = require("request");
const formData = {
"grant_type": "authorization_code",
"redirect_uri": "rediect url that you have set for your app",
"code": authorization_code_from_service
}
request.post({
url: 'https://oauth.pipedrive.com/oauth/token',
form: formData
},
function (err, httpResponse, body) {
//This will be the data that you need for further steps. Actual token, expiry time etc
console.log(body);
}
);
});
Npm link : https://www.npmjs.com/package/request

Resources