I need to get a full url as parameter to convert it in a qrcode. Once the url is in this format https://website.com.br/2k , I can't receive it as parameter in my node.js route
That's how I'm sending the parameter to ejs page
res.render("tutorial.ejs", { qrcode: '/qrcode/'+ link });
link is something like: http://comp.co/32
In tutorial.ejs, I render the qrcode calling qrcode route
<img src="<%= qrcode %>">
qrcode route:
routes.get('/qrcode/:url',(req,res, next) => {
const code = qr.image(req.params.url, {type: 'svg'});
res.type('svg');
code.pipe(res);
})
It's not working. I think that happening because my qrcode route is getting something like this as parameter: http://comp.co/32
when you make get request, you are basically calling
routes.get(/qrcode/http:/comp.co/32){...}
so router in the backend understands it as a route and it wont call your expected route i.e.
routes.get(/qrcode/:url){...}
Solution:
Url encode your url as and try your code again.
var link="http%3A%2F%2Fcomp.co%2F32"
res.render("tutorial.ejs", { qrcode: '/qrcode/'+ link });
<img src="<%= qrcode %>">
routes.get('/qrcode/:url',(req,res, next) => {
const code = qr.image(req.params.url, {type: 'svg'});
res.type('svg');
code.pipe(res);
})
But better way to pass parameter is using query to avoid confusion, you can do this
res.render("tutorial.ejs", { qrcode: '/qrcode?url='+ link });
routes.get('/qrcode',(req,res, next) => {
const code = qr.image(req.query.url, {type: 'svg'});
res.type('svg');
code.pipe(res);
})
Hope it solves your problem.
You can console.log(req) inside your qrcode route to see what data you can get from the request.
Related
I had created a chatroom in my website and I had used the default action of a form to post message's data into the server and store it in MongoDB. But, know I am trying to make it live by using fetch instead as the data will go the server without refreshing the page simultaneously. But, after posting the data to the server as JSON, the server is unable to get the data of the post. I am also using the Body Parser to get the data in the req object, but, that too isn't working and it shows that the data is null. Can someone tell me how I can fix this issue?
My HTML:
<form id="form-container">
<input type="text" id="user-name-input" name="userName">
<input required type="text" id="message-input" name="message" placeholder="Send a message here!">
<button type="submit" id="submit-button">Submit</button>
</form>
My Client-Side Javascript:
submitButton.addEventListener('click', (e) => {
e.preventDefault();
var message = document.getElementById('message-input').value;
fetch('/dps/chat/request-message-insert', {
method: 'POST',
body: JSON.stringify({
userName: userName,
message: message
}),
headers: {
'Content-Type': "application/json; charset=UTF-8"
}
}).then(res => res.json()).then(data => console.log(data));
})
My server.js file:
app.post('/dps/chat/request-message-insert', urlencodedParser, (req, res) => {
console.log(req.body)
const userName = req.body.userName;
const message = req.body.message;
client.connect(async (err) => {
const collection = client.db("gradilo").collection("chat-messages");
await collection.insertOne({ text: message, userName: userName })
await client.close();
})
})
I will check your code your server-side are perfect but I think the problem is client-side are a few issues.
Check async await because I think responses are not perfect get your DOM through user and Message is perfect work when sending API through post then show a Problem.
I will provide the following link to help you
https://www.topcoder.com/thrive/articles/fetch-api-javascript-how-to-make-get-and-post-requests
check this link same as your solution
I fixed my problem with a simple line of code. Looks like the client-side code and the server code is all fine. We have also specified headers in the options of the fetch too. The problem was that the server didn't know in which format it could expect data from the client. Thus, adding the following code before the app.post() method will fix this issue.
app.use(express.json());
Then, you do not even need the npm body-parser dependency to parse the incoming data. The data will be added to the req.body object without any additional middleware or dependency.
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+
'¶m2='+parameters.param2+
'¶m3='+parameters.param3+
'¶m4='+parameters.param4+
'¶m5='+parameters.param5+
'¶m6='+parameters.param6+
'¶m7='+parameters.param7+
'¶m8='+parameters.param8+
'¶m9='+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 +'¶m2='+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+'¶m2='+param2+'¶m3='+param3+'¶m4='+param4+'¶m5='+param5+'¶m6='+param6+'¶m7='+param7+'¶m8='+param8+'¶m9='+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+'¶m2='+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+'¶m2='+param2+'¶m3='+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
I have an url like this: http://localhost/editblog/58a5da1df3ec9614fc9893d3
and code in pug like this:
input.form-control(type='hidden', name='id', value='')
The question is how to get the value on the url and pass it to value=''
I've known about req.params.id but it is not what could solve my issue
When you render your pug template you could send any variable as res.locals property so it will send to template:
app.get('/editblog/:id', function(req, res) {
res.render('editblog', { title: 'edit blog', id: req.params.id });
});
And now you have access to id whithin your template:
editblog.pug:
input.form-control(type='hidden', name='id', value=id)
How do I translate the examples from the shrinkroute README file:
// or views...
User profile
User profile
for use in jade templates?
For example, something like
a(href="#{ url( "user", { id: 1 }) }") User profile
Thanks in advance.
First of all, ensure that you're using the shrinkroute middleware:
app.use( shrinkr.middleware );
It'll automatically provide you the following helpers:
req.buildUrl and res.locals.url - builds paths for a route. The same as using shrinkr.url().
req.buildFullUrl and res.locals.fullUrl - builds full URLs for a route. The same as using shrinkr.fullUrl().
In Jade, you simply have to use the following:
a(href=url( "user", { id: 1 } )) My Username
a(href=fullUrl( "user", { id: 1 } )) My Username
Rendered output:
My Username
My Username
The above output will depend on the routes you have named in your shrinkroute instance.
Disclaimer: I'm the creator of Shrinkroute.
here's a general solution for calling a function from within a template; see #gustavohenke 's answer for a specific solution for how to use shrinkroute's built-in locals.buildFullUrl function within a jade template
// node.js
var url = require('url');
// Set up locals.shrinkUrl for every request
app.all('*', function(req, res, next){
res.locals.shrinkUrl = function(path, queryObject){
var out = url.format({
pathname: path,
query: queryObject,
});
return out;
};
next();
});
// template.jade
a(href=locals.shrinkUrl("user", {id: 1}) ) User profile
// rendered
<a href='/user?id=1'>User profile</a>
I'm using Node.js and I want to see all of the parameters that have been posted to my script. To get to my function, in my routes/index.js I'm doing:
app.post('/v1/order', order.create);
Then in my function, I have:
exports.create = function(req, res, next) {
console.log( req.params );
But it's returning an empty array. But when I do:
exports.create = function(req, res, next) {
console.log( req.param('account_id') );
I get data. So I'm a bit confused as to what's going on here.
req.params
can only get the param of request url in this pattern:/user/:name
req.query
get query params(name) like /user?name=123 or body params.
req.params only contain the route params, not query string params (from GET) and not body params (from POST). The param() function however checks all three, see:
http://expressjs.com/4x/api.html#req.params
I had a similar problem and thought I'd post the solution to that for those coming here for the same reason. My req.params was coming out as an empty object because I declared the URL variable in the parent route. The solution is to add this option to the router:
const router = express.Router({ mergeParams: true });
With postman, you can have two types of get requests:
Using x-www-form-urlencoded and passing data through the body.
Using url parameters
You can always use this code snippet to always capture the data, no matter how you pass it.
/*
* Email can be passed both inside a body of a json, or as
a parameter inside the url.
* { email: 'test#gmail.com' } -> test#gmail.com
* http://localhost/buyer/get/?email=test#gmail.com -> test#gmail.com
*/
let { email }: { email?: string } = req.query;
if (!email) email = req.body.email;
console.log(email);
Add this for your server.js or app.js:
app.use(express.urlencoded({ extended: true })) // for parsing application/x-www-form-urlencoded