Connecting Google Email Service to Website (troubles)

I am attempting to set up a email from my gmail account on a website for once an order is placed. However, I still havnt been able to send a test email to one of my other emails.
Below is my code for the two backend files and the page code.
I am basing my code on a post by @Quentin Plomteux at this forum: https://www.wix.com/corvid/forum/community-discussion/javascript-gmail-api

I saw a few TYPOS in his code as well (I believed them to be typos) so those are commented at changed from his in my code below. Any suggestions or pointers would be great. I’m pretty sure I have the google cloud service platform set up correctly based on the tutorial Quentin included in his post.

The things I have blackout in the code are my information, as I assumed was supposed to be changed for my mailing service. Sorry I did not use the code containers; They messed up the code format for some reason.

emailService.jsw (in backend)

import nodemailer from ‘nodemailer’;
import { google } from “googleapis”;
import _ from ‘lodash’;

import {emailService as CONFIG_SERVICE} from ‘backend/config.js’;
import {auth2 as CONFIG_AUTH2} from ‘backend/config.js’;

//init OAuth2
const OAuth2 = google.auth.OAuth2;
const oauth2Client = new OAuth2(
CONFIG_AUTH2.clientId,
CONFIG_AUTH2.clientSecret,
CONFIG_AUTH2.playground
//In Quentin Plomteux origional post, this was spelled as “playgroud”
);
oauth2Client.setCredentials({
refresh_token: CONFIG_AUTH2.refreshToken
});

// initialize the service by setting up the transport options (with fresh access token);
let initService = oauth2Client.refreshAccessToken().then(tokens => {
const transportOptions = _.cloneDeep(CONFIG_SERVICE.transportOptions);

transportOptions.auth.clientId = CONFIG_AUTH2.clientId; 
transportOptions.auth.clientSecret = CONFIG_AUTH2.clientSecret; 
transportOptions.auth.refreshToken = CONFIG_AUTH2.refreshToken; 
transportOptions.auth.accessToken = tokens.credentials.access_token; 

return nodemailer.createTransport(transportOptions);
}). catch (reason => {console.error(‘refresh token error’, reason)});

export function sendApprovedAddress(to, subject, text) {

const data = { from : CONFIG_SERVICE.sender, to, subject,text};

return initService.then(transporter => {
return transporter.sendMail(data);
}).then((responde) => {
console.info('email successfully sent to ', to, responde);
return responde;
}). catch (reason => {
console.error('could not send email to ’ + to, reason);
throw reason;
});
}

config.js (in backend)

export const auth2 = {
clientId: “███████My API ID█████████.apps.googleusercontent.com”,
clientSecret: “███████My Client Secret██████████”,
refreshToken: “███████████ My Token ███████████████████████”,
playground: “https://developers.google.com/oauthplayground”
//In Quentin Plomteux origional post, this has a weird duplication issue.
};
export const emailService = {
transportOptions:{
service: “gmail”,
auth: {
type: “OAuth2”,
user: “█████My Email Address @ My company Gsuite address████”,
clientId: null ,
clientSecret: null ,
refreshToken: null ,
accessToken: null
}
},
emailSender: {
name: ‘█████ My Name ████’,
address: ‘█████My Email Address @ My company Gsuite address████’
}
}

Page Code (only a button action to test)

import {sendApprovedAddress} from ‘backend/emailService.jsw’;

$w.onReady( function () {

});

export function mail_click(event) {
sendApprovedAddress(“██ My test recipient email address ██”,“hello”,“this is a test”);
console.log(“hello”);
}

Any suggestions of error fixes would help tremendously!
Thank you so much everyone for your time and help, and especially thank you to @Quentin Plomteux.

You are missing your onReady function on your page code for starters.

Hi! Thank you for the reply.
Unfortunately on my actual code, the onReady() function is there. I just didn’t include it in the code snippet above since it isn’t part of the mail api process I’m trying to get working. I have updated the original post to contain it.

I don’t see any big mistake in your code

Do you have any error of any kind in the console? or in your site monitor? We need to know where your code is crashing before investigate further. Put console log/error anywhere you can until you find where the code block

You could try to regenerate the refresh token as well. it didn’t work for me once, no idea why. But It basically never responded to the token refresh ( oauth2Client.refreshAccessToken() ) so the promise never resolve with an error nor a result. That was pretty difficult to detect.

Hi Quentin,
so I downloaded the CSV file from google cloud services that show errors and it looks like three events have triggered errors on the API dashboard


I created a new API credentials for my project on google cloud and did the whole Oath setup and playground setup as instructed in the original tutorial and put all the new tokens and credentials into the wix code and still does not seem to be working.

And here is the error showing up in the google chrome console.

Here is another error reporting in chrome ‘network’ tab. So it said i was missing the modules. so i installed the nodes now it just wait a while before showing just the previous server timing error for depreciated syntax

Ok, so i am actually getting the emails to go through. However, they are sending to spam!

@logan The stack trace is showing an error on line 6 of emailService.jsw. That line reads:

import {auth2 as CONFIG_AUTH2} from 'backend/config.js';

This is trying to load the object auth2 which is defined like this:

export const auth2 = {     clientId: "███████My API ID█████████.apps.googleusercontent.com",     clientSecret: "███████My Client Secret██████████",     refreshToken: "███████████ My Token ███████████████████████",     playground: "https://developers.google.com/oauthplayground"
//In Quentin Plomteux origional post, this has a weird duplication issue. };

My guess is you have a syntax error in this definition which of course we cannot help with since you have redacted the code :-).

1 Like

Hi Steve, Thank you for the response. I only blacked out the api codes and secret and such from google. the syntax is all visible. I went through to check for any syntax problems, but do not see any issues.

I see 2 errors here:

As Steven mention you have an error when you import one of your module in your backend service:

  1. Check the spelling of your modules name.

  2. Check the hierarchy of project.

  3. Have you install the npm package nodemailer and googleapis ?

Secondly you have an uncaught promise error

that means that somewhere there is a Promise with catch branch that fails. You need to find which one it’s so you can use console.error and display the details

One error might induce the other one.

1 Like

@logan

With SendGrid you can setup Server Authentication so that email clients known that SendGrid are sending email on your behalf and you also don’t get the sent by SendGrid tag on your emails either.

So look into making sure that your OAuth whitelisting / api whitelisting is all setup correctly too so that users who receive your emails don’t get them sent directly to their spam folders all the time.

However, if you get all your code sorted out first, then it might be corrected in your changes that you have made.

Plus, this might be irrelevant for your needs, however you can already connect gmail to Wix as shown here - https://support.wix.com/en/article/connecting-email-purchased-outside-of-wix
With a youtube video about it too - https://www.youtube.com/watch?v=-1yAAcIFxtc

Hi Quentin, in your original code you have the following import statement.

import _ from 'lodash';

What is this referring to?
I just installed the lodash npm module

After installing the lodash package, I don’t see any more errors. I have placed
console.error();
after just about every line of code I can, and I am not seeing any such errors result in the google chrome console.

Thank you to everyone for you great help!
I only have two last question to refine my wix code.

  1. How can I change the name such that when the user received the email it is Orange Park Acres Races
    instead of orangeparkacresraces as it currently is? it seems to just be using the email address not the name.

  2. How can I can I send more than just text in an email body. Is it possible to have an HTML format body, such that I can create my email in html & css to insert link images and have a better layout.

Thank you again, you guys have been extremely helpful!

ad 2 (html). Be very careful with that. There is a miriad of email clients outthere, on different devices and basically, it´s a mess what they support and don´t. There is info to be found on the Internet, but the above statement is more or less the conclusion. I have done it too and I stuck to html 3.2 specs, meaning:

  • doing layout with tables (forget about css)
  • doing fonts with the (depricated, but still working) FONT tag
  • doing Bold with , etc
  • you can use images, but that´s about it.

Just send an email to yourself with a table inside which has a cell background color and view it on gmail, yahoo mail, etc. You will see what I mean.

@logan It´s how it´s referenced, with a low dash, lodash.

@logan Lodash is a javascript utility library. check here

That the only one automatically installed on wix :stuck_out_tongue:

But you have to install nodemailer and googleapi . Did you do that as well?

@logan Does it works now? :smiley: How did you solve it?

check nodemailer doc to know how to setup your emails https://nodemailer.com/about/ especially https://nodemailer.com/message/

Good luck with that :slight_smile:

@plomteuxquentin Hi,
Yes I installed nodemailer, googleapi, and lodash. And I don’t see anymore errors showing up in the Google chrome console, and I’m receiving my test emails. This is actually really cool.
I’m trying to send each customer a we code that is unique to their order number or just their name. So I’m trying to figure out how I can make it send html so I can insert a unique we code email.
Thank you so much for you help. If you have any hints at how I can insert the QR code that’d be great. I’m currently looking into an API that creates a qrcode image just based on the info in the link provided to the image tag, but I’m weary of those emails getting marked as spam having an image linked via html that might look suspicious to email clients.