Sent html email using gmail API, it appears in "chinese" on apple mail client - node.js

I am sending emails using the Gmail NodeJS API using these code snippet (leaving auth out of it)
const headers: any = {
'To': event.to,
'Subject': event.subject,
"Content-Type": "text/html; charset='UTF-8'",
"Content-Transfer-Encoding": "base64"
}
let email = ''
for (let header in headers) {
email += header += ": " + headers[header] + "\r\n";
}
email += "\r\n" + event.body;
const theMessage = {
'userId': "me",
'resource': {
'raw': _btoa(unescape(encodeURIComponent(email))).replace(/\+/g, '-').replace(/\//g, '_')
}
}
const auth = new google.auth.OAuth2(
webAppClientId, this.clientSecret, "https://docs-n-data......");
const gmail = google.gmail({version: 'v1', auth})
gmail.users.messages.send(theMessage)
The email renders correctly on most email clients, except the ios email client on iphone. It looks like "chinese" in that client. Please see the attached image, following the suggestion by #DalmTo:
Some articles on the web hint that this might be due to the email being interpreted as UTF-16 instead of UTF-8, but none of them explain what to do.
I am trying to state that the encoding is UTF-8 in the above code, so am not sure whats wrong. Please help, thanks!
Update Maybe the content of the email body is important. The content comes from this template:
const emailBody = `<html>
<body>
<p>Hi {{Customer.First name}},</p>
<p>Your booking is confirmed for {{Date}} at {{Time}} and we have charged you the
amount of £{{Paid}}</p>
<p>Your booking reference is {{Booking number}}.</p>
<p>Use this link to cancel your booking, should you wish to.</p>
<p>Use this link to amend your booking, should you wish to.</p>
</body>
</html>`
Update 2 I changed the template for the email to:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<p>Hi {{Customer.First name}},</p>
<p>Your booking with The Smart Wash Ltd is confirmed for {{Date}} at {{Time}} and we have charged you the
amount of £{{Paid}}</p>
<p>Your booking reference is {{Booking number}}.</p>
</body>
</html>
And now I get this rendering on iphone mail client. On the ipad mail client and gmail, it renders correctly:
When I view the same email in gmail, and "Show original", I see this:
Not sure who or what is putting the text/plain version in there, but including this detail in case it helps.

I setted "Content-Transfer-Encoding": "8bit" and it worked for me!

Related

message: 'from parameter is not a valid address. please check documentation'

Hi all I am facing this problem with mailgun, mail sends OK in localhost, but it does'nt send when I move to server online. My server is hosted via AWS and the error it shows is message: 'from parameter is not a valid address. please check documentation'
My code is below
const mailgun = require("mailgun-js");
const DOMAIN = 'mailing.medappafrica.com';
const mg = mailgun({ apiKey: process.env.api_key, domain: DOMAIN });
module.exports.sendConfirmationEmail = (name, email, confirmationCode) => {
const data = {
from: `Medapp Verify <noreply#${DOMAIN}>`,
to: email,
subject: 'Please confirm your account',
html: `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
...code too long

Node.JS :How to forward to the login page with parameter?

I am building the login function with node.js, express,express-session, ejs.
This is the log-in page (i.e. index.ejs)
<html>
<head>
<meta charset="UTF-8">
<title>Video Chat Room</title>
<link rel="stylesheet" type="text/css" href="/css/style.css">
<style>
#message
{
color:red;
font-weight: bold;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$( document ).ready(function() {
var messageBox=document.getElementById("message");
<%
if (typeof errorField!="undefined") {
switch (errorField) {
case "email":%>
messageBox.innerHTML="Your email address has been used by another user, please use another one.";
document.getElementById("email").focus();
<% break;
case "logoutSuccess":%>
messageBox.innerHTML="<%=alias%> has successfully logged out.";
<% break;
}
}
%>
});
</script>
</head>
<body>
<form method="post" action="/login">
Nick name/Alias:<input type=text required name="alias" value="<%=((typeof user=='undefined')?'':user.alias)%>"><br>
Email Address:<input type=email id="email" required name="email" value="<%=((typeof user=='undefined')?'':user.email)%>"><br>
<input type="submit" value="Login">
</form>
<div id="message">
</div>
</body>
</html>
Here is the server-side code(i.e. server.js)
........
app.get('/',function (req,res) {
res.render('../ejs/index.ejs');
});
app.post('/login', function(req, res) {
var alias = req.body.alias;
var email = req.body.email;
var user=require("./classes/user.js");
user.alias=alias;
user.email=email;
if (user.login) {
req.session.user = user;
res.redirect('/home/');
} else {
res.locals.errorField="email";
res.locals.user=user;
res.render('../ejs/index.ejs');
}
It works fine, however, when the login process failed, although the web output the login page(i.e. index.ejs), the browser address bar still stay in "/login"; is it possible to change the browser address bar to "/" and the index.ejs can read the errorField and user value also?
If you want a user login error to go back to /, then you need to do res.redirect("/"). If you want to add some parameters to that page that can be used either in server-side rendering or client-side rendering, then the simplest way to do that is to add query parameters:
res.redirect("/?error=email")
Then, either your server-side rendering or some client-side Javascript can pick up that query parameter and display something like a message in the page that explains what happened.
There are lots of ways to do something like this. Here's a partial list:
Send data in a query parameter that server-side rendering picks up and adds some explanatory text to the page.
Send data in a query parameter that client-side Javascript picks up and adds some explanatory text to the page.
Set a cookie that contains an error message that your server-side rendering will pick upon the redirect and then clear the cookie.
Set some error data in the user session object on the server that your server-side rendering will pick up when rendering the redirected page and the clean that info from the session.
Use an Express middleware module built for these temporary messages called flash.
Render an error page from the server (without an immediate redirect) and then have a client-driven redirect back to "/" that occurs after a few seconds time. The client-driven redirect can either be from a <meta> tag or can be client-side Javascript on a timer.

Why does the Stripe Google Pay Button not render for me on the UI despite not having any errors or exceptions?

I've used the Stripe Payment Request Button HTML code from the stripe docs on https://stripe.com/docs/stripe-js/elements/payment-request-button to incorporate the Google Pay button on my UI but the stripe component is not being rendered on the UI.
I'm using a Windows 10 machine and have served my application over a https server, the HTML code that I took from Stripe Docs does not show any errors or exceptions on the developer console, the iframe component can be seen on the Elements tab but the button is not being rendered on the UI.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Google Pay Payment</title>
</head>
<body>
<h1>This is a sample payment page using Stripe</h1>
<label for="card-element">
Credit or debit card
</label>
<form action="{{ url_for('pay')}}" method="post" id="payment-form">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<div id="payment-request-button">
<!-- A Stripe Element will be inserted here. -->
</div>
</form>
<script src="https://js.stripe.com/v3/"></script>
<script type="text/javascript">
var stripe = Stripe('pk_test_IVLw1g5rpDe7MwEu6PpxKxFL00SQlZd4eB');
var paymentRequest = stripe.paymentRequest({
country: 'US',
currency: 'usd',
total: {
label: 'Demo total',
amount: 1000,
},
requestPayerName: true,
requestPayerEmail: true,
});
var elements = stripe.elements();
var prButton = elements.create('paymentRequestButton', {
paymentRequest: paymentRequest,
});
// Check the availability of the Payment Request API first.
paymentRequest.canMakePayment().then(function(result) {
if (result) {
prButton.mount('#payment-request-button');
} else {
document.getElementById('payment-request-button').style.display = 'none';
}
});
// Check the availability of the Payment Request API first.
paymentRequest.canMakePayment().then(function(result) {
if (result) {
prButton.mount('#payment-request-button');
} else {
document.getElementById('payment-request-button').style.display = 'none';
}
});
</script>
</body>
</html>
Faced same issue and finally solved it. Looks like it depends on country in you google payment profile.
So my solution is:
Open https://pay.google.com/gp/w/u/0/home/settings
Tap on edit icon on Country/Region row.
Add fake profile with US as country, it OK to use any random address and phone
It's impossible to add test stripe card from here, so
Open chrome://settings/payments and add card like 4242 4242 4242 4242 from here.
Now open https://stripe-payments-demo.appspot.com/ again and check if you can see Pay Now button.
Your code works for me as well: https://jsfiddle.net/ufn9w5La/
var stripe = Stripe('pk_test_IVLw1g5rpDe7MwEu6PpxKxFL00SQlZd4eB');
var paymentRequest = stripe.paymentRequest({
country: 'US',
currency: 'usd',
total: {
label: 'Demo total',
amount: 1000,
},
requestPayerName: true,
requestPayerEmail: true,
});
var elements = stripe.elements();
var prButton = elements.create('paymentRequestButton', {
paymentRequest: paymentRequest,
});
// Check the availability of the Payment Request API first.
paymentRequest.canMakePayment().then(function(result) {
if (result) {
prButton.mount('#payment-request-button');
} else {
document.getElementById('payment-request-button').style.display = 'none';
}
});
A couple of things to clarify:
The Stripe Payment Request Button will not render a Google Pay button, it has it's own Stripe "Pay now" button
The payment sheet does include Google Pay as a payment method (see image)
Browser needs to support the Payment Request API (see caniuse) - which browser are you testing on?
It may help somebody having the same problem.
In my case I had to disable 3rd party cookie blocking (which was enabled by default) and had to check the option "Allow sites to check if you have payment methods saved" on the Payment Methods settings page in Chrome.
This might also be applicable account wide, since it started working on the Desktop and Smartphone.

Nodemailer - Unable to send clickable link

I am using nodemailer for sending emails from my nodejs app. I am successfully able to send an email. But, if I want to send a link, the href or anchor tag is not working. That is the link does not go as part of the mail. The rest of the text is sent. Any ideas?
Here is the relevant code :
var messagebody = "Hello ".concat(req.body.name).concat(", One of your team mates have submitted an application form for intern next summer. Please approve or reject the same on the internship portal. Best Regards.");
var mailOptions = {
from: from, // sender address
to: to, // list of receiver
// cc: cc,
subject: subject, // Subject line
text: messagebody, // plaintext body
html: ' Hello '.concat(req.body.name).concat(' , <br /></br > One of your team mates have submitted an application for intern(s) for next summer. Please approve or reject the proposal on the internship portal. <br /> Here is the link of the internship portal : <br /><br /> Best Regards.') // html body
};
Your code is Correct but you havn't wrote anything in between <a></a> tags.
Just put some text between them and it will work.
Click here
You can also render a jade (or pug) file and get it as a string
const render = jade.compileFile('./views/my_email.jade');
const html = render(content);
const mailOptions = {
from: from, // sender address
to: to, // list of receivers
subject: subject, // Subject line
html: html
};
where content is the array with the data you want to pass to the jade file

passing objects parameter to facebook open graph custom actions in C#

I am posting custom action with facebook open graph api and I am successfully posted that on my timeline with facebook c# sdk.
Here is my action code
curl -F 'access_token=AccessToken' \
-F 'job=http://samples.ogp.me/476622222351784' \
'https://graph.facebook.com/me/sajidap:apply'
Here is my object code
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# sajidap: http://ogp.me/ns/fb/sajidap#">
<meta property="fb:app_id" content="APPID" />
<meta property="og:type" content="sajidap:job" />
<meta property="og:url" content="Put your own URL to the object here" />
<meta property="og:title" content="Sample Job" />
<meta property="og:image" content="https://s-static.ak.fbcdn.net/images/devsite/attachment_blank.png" />
I am posting in this way.
var fb = new FacebookClient(AccessToken);
var parameters = new Dictionary<string, object>
{
{ "og:type", "sajidap:job"},
{ "og:url" , "http://www.google.com"},
{ "og:image", "http://www.theappdynamics.com/images/babafooka.jpg" },
{ "og:title" , "Arslan Job"},
{ "job" , "http://samples.ogp.me/476622222351784"}
};
var Response = fb.post(me/NameSpace:ActionName,Parameters);
Its posting an activity on my timeline but its showing Sample activity of an object that is like this url http://samples.ogp.me/476622222351784
How I can give my own url, image and title of that object by passing with parameter dynamically from C#.
Please guide me on this thing
Its Simple i have done this. You have one page like that which have your Open graphs tags in it like this. Mean It should be some content page on your web.
Let me clear more.. Like I have one resturant and I am selling some chicken burgers and I want to make one action "Buy" Mean In facebook it should be like this Arslan buy chicken lawa on link.
In This Arslan is user who performed the action
And Action is buy
And Object was chicken lawa
And URL is my below page who have all open graph tags in it to show in feeds.
Here is ASPX Page
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server" prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# myapp: http://ogp.me/ns/fb/myapp#"> // Your app name will be replaced with this "myapp"
<title>Buy Falafeel</title>
<meta property="fb:app_id" content="4735" /> // Your APP ID
<meta property="og:type" content="myapp:falafeel" /> // YourAppName:Action Type
<meta property="og:url" content="http://demo.anything.net/buy.aspx" />
<meta property="og:title" content="Chicken Lawa Falafeel" />
<meta property="og:image" content="http://www.theappdynamics.com/images/babafooka.jpg" />
</head>
<body>
<form id="form1" runat="server">
<div>
This is Falafeel Page. Demo Demo......
</div>
</form>
</body>
</html>
Here I am Performing The action on button click from my code behind.
void PostAction(string URL, string Token, string Action, string objects)
{
var fb = new FacebookClient(Token);
var parameters = new Dictionary<string, object>
{
{ objects , URL}
};
try
{
dynamic result = fb.Post("me/myapp:" + Action, parameters); // again here should be your app name instead of "myapp"
}
catch { }
}
PostAction("URL", "AccessToken", "Action", "Object"); // Here is The Above Method Call
// Here is URL That URL Who Have Open Graph Tags Like we have created one page with tags named buy.aspx and it should be full link like "http://xyz.com/buy.aspx"
//Access Token Of User On Behalf we are going to create This Action
//Action The One Created On facebook App Setting Of OpenGraph Tag Like "Buy"
//Object That We Also Created On Facebook App Setting For OpenGraph Like "ChickeLawa"
Just publish an action with your object set to the OG URL of your object, as described here: https://developers.facebook.com/docs/opengraph/actions/#create
Anything else (picture, title etc.) will be fetched from the og:tags of the URL.

Resources