Accessing gmail API on front-end angular app

Question

Trying to figure out how to get access to googles API so I can create a contact form on my website, I have found this example but am struggling to use / convert it for use in Angular.

https://github.com/googleapis/google-api-nodejs-client/blob/master/samples/gmail/send.js

I have just done npm install googleapis but am unsure about how to continue. I know this is strictly speaking not a programming question, but I am wondering if anyone can help set up a mailing (contact form) for my portfolio. This is also my first time working with an API and I am doing a fair amount of research to figure out how to correctly do everything.

I am trying to go throught the documentation on the google API but as it is auto generated, the interface is a bit questionable... https://googleapis.dev/nodejs/googleapis/latest/index.html and I can't really find any useful information on it...

What i want to make is a way for people to contact me, so I send an e-mail to my work mail adress with their mail address attached so I can reply, a subject and a body. This is all the information I would need but as the API is very unclear I am having a hard time figuring out hhow to do this in Angular (Node.js)

TL;DR: How to connect Angular 8 (Node.js) to gmail api (or use smtp)

UPDATE: I changed to using nodemailer for the smtp but it isnt working still

import * as mailer from 'nodemailer';

export class Mailing {
    constructor() {
        this.send();
    }

    async send() {
        const account = await mailer.createTestAccount();
        const transporter = mailer.createTransport({
            host: 'smtp.gmail.com',
            port: 587,
            secure: false,
            auth: {
                user: account.user,
                pass: account.pass
            }
        });

        const info = await transporter.sendMail({
            from: '"Portfolio" <Portfolio@gmail.com>',
            to: 'torbenvanassche.dev@gmail.com',
            subject: 'Hello',
            text: 'shut up',
        });
    }
}

ERROR in ./node_modules/nodemailer/lib/sendmail-transport/index.js
Module not found: Error: Can't resolve 'child_process' in 'C:\Users\tassc\Projects\Portfolio\node_modules\nodemailer\lib\sendmail-transport'
ERROR in ./node_modules/nodemailer/lib/mailer/index.js
Module not found: Error: Can't resolve 'dns' in 'C:\Users\tassc\Projects\Portfolio\node_modules\nodemailer\lib\mailer'
ERROR in ./node_modules/nodemailer/lib/shared/index.js
Module not found: Error: Can't resolve 'dns' in 'C:\Users\tassc\Projects\Portfolio\node_modules\nodemailer\lib\shared'
ERROR in ./node_modules/nodemailer/lib/dkim/index.js
Module not found: Error: Can't resolve 'fs' in 'C:\Users\tassc\Projects\Portfolio\node_modules\nodemailer\lib\dkim'
ERROR in ./node_modules/nodemailer/lib/mime-node/index.js
Module not found: Error: Can't resolve 'fs' in 'C:\Users\tassc\Projects\Portfolio\node_modules\nodemailer\lib\mime-node'
ERROR in ./node_modules/nodemailer/lib/shared/index.js
Module not found: Error: Can't resolve 'fs' in 'C:\Users\tassc\Projects\Portfolio\node_modules\nodemailer\lib\shared'
ERROR in ./node_modules/nodemailer/lib/mailer/index.js
Module not found: Error: Can't resolve 'net' in 'C:\Users\tassc\Projects\Portfolio\node_modules\nodemailer\lib\mailer'
ERROR in ./node_modules/nodemailer/lib/shared/index.js
Module not found: Error: Can't resolve 'net' in 'C:\Users\tassc\Projects\Portfolio\node_modules\nodemailer\lib\shared'
ERROR in ./node_modules/nodemailer/lib/smtp-connection/index.js
Module not found: Error: Can't resolve 'net' in 'C:\Users\tassc\Projects\Portfolio\node_modules\nodemailer\lib\smtp-connection'
ERROR in ./node_modules/nodemailer/lib/smtp-connection/http-proxy-client.js
Module not found: Error: Can't resolve 'net' in 'C:\Users\tassc\Projects\Portfolio\node_modules\nodemailer\lib\smtp-connection'
ERROR in ./node_modules/nodemailer/lib/smtp-connection/http-proxy-client.js
Module not found: Error: Can't resolve 'tls' in 'C:\Users\tassc\Projects\Portfolio\node_modules\nodemailer\lib\smtp-connection'
ERROR in ./node_modules/nodemailer/lib/smtp-connection/index.js
Module not found: Error: Can't resolve 'tls' in 'C:\Users\tassc\Projects\Portfolio\node_modules\nodemailer\lib\smtp-connection'

UPDATE: Interesting article about using the google API in Angular https://blog.angularindepth.com/google-apis-with-angular-214fadb8fbc5

you can't and shouldn't send emails from a front end. Any email API will require private keys that need to be kept secure on your own server. You need to build your own API that leverages the gmail API and call it from your front end. The same is true for send grid and any other email service you may attempt to use. — bryan60, Nov 21 '19 at 15:09
I was trying to avoid having to pay for server space, by also using GitHub pages to host my portfolio. As I have just graduated I would rather not pay for a domain as of right now. Doing this from the front-end is creating a security issue on itself? In that case I need a server for back-end hosting right? My dad has One.com as his hosting site, is this the way I should go about it instead? — Torben Van Assche, Nov 21 '19 at 15:15
front end is a security issue and it's impossible. Even if a browser had the required nodejs dependencies (it doesnt, those are the errors you're seeing), browsers won't allow a site to send over port 587, and even if they had, no firewall would allow it. Yes, you need a backend. no, you don't need a domain or server space, something this simple, AWS API gateway to a lambda function would be sufficient and extremely cost effective... I like SAM for this kind of thing... https://docs.aws.amazon.com/serverless-application-model/latest/developerguide/what-is-sam.html — bryan60, Nov 21 '19 at 15:17
some email service providers have actual apis that can be called from the front end, they generally cost money, but they are simpler than SAM... you're just paying for something though that you can build on your own for relatively free — bryan60, Nov 21 '19 at 15:34
I will have to look into SAM and see what I can do myself, though I do not have a VISA which does complicate the use... — Torben Van Assche, Nov 21 '19 at 15:37

Jacques-Guzel Heron · Answer 1 · 2019-11-22T08:42:01.577

1

You can follow the Node.js Gmail API quickstart for setting up a workable sample code. Then, you can use the sending mail tutorial to code a function for sending mails to your account.

In the links provided you can see many examples and detailed steps, but if you have any doubts please ask me for clarifications.

EDIT

On the previous quickstart link we all can see the current recommended npm pakpage to interact with the Gmail API: npm install googleapis@39 --save. You can read more information about Node.js dependencies for Google Libraries here.

edited Nov 22 '19 at 08:42

answered Nov 21 '19 at 14:40

Jacques-Guzel Heron

2,480
1
7
16

I have come across this page but couldn't get it working... I am tempted to use SendGrid (100 mails per day, but should suffice for my purpose) as an easy to use API since using the google API directly seems to cause me nothing but issues. I was hoping there was an npm package that I could use to interact with the google API, but so far I am coming up empty. I have also found a SO post https://stackoverflow.com/questions/45155660/cant-resolve-dns-and-child-process-when-using-nodemailer-and-webpack saying its impossible to use the API from the front-end, which leaves me with even more questions – Torben Van Assche Nov 21 '19 at 14:54
Hey @TorbenVanAssche, using the Gmail API from the frontend would be an unorthodox approach due to the Node.js dependencies (browser doesn't have them) and [SMTP ports](https://en.wikipedia.org/wiki/Simple_Mail_Transfer_Protocol#Ports) (mostly blocked from browsers and mainstream firewalls). You would need a backend to manage users request and make calls to the Gmail API. I’ve updated my answer to clarificate the needed npm dependencies. Do not hesitate to comment again if you need further help. – Jacques-Guzel Heron Nov 22 '19 at 08:42

Accessing gmail API on front-end angular app

1 Answers1