web-dev-qa-db-fra.com

Envoi d'e-mail depuis Angular 2

Comment envoyer des courriels à partir d'une application Angular 2?

J'héberge une application Angular 2 sur firebase. Je souhaite envoyer un formulaire de contact par courrier électronique. Idéalement, ma solution utiliserait Nodejs, mais je suis prêt à utiliser tout ce qui permettra de faire le travail correctement. Vous trouverez ci-dessous une ventilation de mon application.

Progrès côté client

Voici mon formulaire:

<!-- contact-form.component.html -->

<form [formGroup]="formService.contactForm" (ngSubmit)="formService.onSubmitForm()">

  <input type="text" formControlName="userFirstName">
  <label>First Name</label>
  
  <input type="text" formControlName="userLastName">
  <label>Last Name</label>

  <button type="submit">SUBMIT</button>
  
</form>

Voici mon composant de formulaire de contact:

// contact-form.component.ts
import { Component } from '@angular/core';

import { ContactFormService } from './contact-form.service';

@Component({
  selector: 'contact-form',
  templateUrl: './contact-form.component.html',
  styleUrls: ['./contact-content.component.css'],
  providers: [ContactFormService]
})
export class ContactFormComponent {

  constructor(private formService: ContactFormService) {
    formService.buildForm();
  }

}

Voici mon service de formulaire de contact:

// contact-form.service.ts

import { Injectable } from '@angular/core';

import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';


@Injectable()
export class ContactFormService {

  constructor(public formBuilder: FormBuilder) { }

  contactForm: FormGroup;
  formSubmitted: boolean = false;


  buildForm() {
    this.contactForm = this.formBuilder.group({
      userFirstName: this.formBuilder.control(null, Validators.required),
      userLastName: this.formBuilder.control(null, Validators.required)
    });
  }

  onSubmitForm() {
    console.log(this.contactForm.value);
    this.formSubmitted = true;
    this.contactForm.reset();
  }

}

Lorsque je clique sur le bouton d'envoi, les données du formulaire s'affichent correctement dans la console.

Progression des noeuds côté serveur

Je peux envoyer avec succès des courriels à partir de la commande Invite à l'aide de SendGrid et Nodejs:

Exemple: sendmail.js

var Sendgrid = require('sendgrid')(
  process.env.SENDGRID_API_KEY || '<my-api-key-placed-here>'
);

var request = Sendgrid.emptyRequest({
  method: 'POST',
  path: '/v3/mail/send',
  body: {
    personalizations: [{
      to: [{ email: '[email protected]' }],
      subject: 'Sendgrid test email from Node.js'
    }],
    from: { email: '[email protected]' },
    content: [{
      type: 'text/plain',
      value: 'Hello Joe! Can you hear me Joe?.'
    }]
  }
});

Sendgrid.API(request, function (error, response) {
  if (error) {
    console.log('Mail not sent; see error message below.');
  } else {
    console.log('Mail sent successfully!');
  }
  console.log(response);
});

Et puis un email sera envoyé avec succès si je tape ceci dans la commande Invite:

node sendmail

Cependant, je ne sais pas comment lier les données de formulaire soumises à sendmail.js ni comment activer le code dans sendmail.js en cliquant sur le bouton Envoyer.

Toute aide serait grandement appréciée. Merci pour votre temps!

node.jsangularemailfirebase
6
Ty Sabs

essayez de réécrire votre sendmail.js as service rest, par exemple:

const Sendgrid = require('sendgrid')(
  process.env.SENDGRID_API_KEY || '<my-api-key-placed-here>'
);

const express = require('express');
const bodyParser = require('body-parser');
const app = express();

// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

app.post('/send-mail', function (req, res) {
  // PUT your send mail logic here, req.body should have your fsubmitted form's values
  sendMail(req.body);
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  res.send('SEND MAIL');  
})

app.listen(3000, function () {
  console.log('LISTENING on port 3000');
})


function sendMail(formData) { 
  let request = Sendgrid.emptyRequest({
    method: 'POST',
    path: '/v3/mail/send',
    body: {
      personalizations: [{
        to: [{ email: '[email protected]' }],
        subject: 'Sendgrid test email from Node.js'
      }],
      from: { email: '[email protected]' },
      content: [{
        type: 'text/plain',
        value: `Hello ${formData.userFirstName} ${formData.userLastName}! Can you hear me ${formData.userFirstName}?.` 
      }]
    }
  });

  Sendgrid.API(request, function (error, response) {
    if (error) {
      console.log('Mail not sent; see error message below.');
    } else {
      console.log('Mail sent successfully!');
    }
    console.log(response);
  });
}

veuillez noter que j'ai utilisé des données de formulaire dans le corps de l'email

puis dans votre fonction submit en mode angulaire, exécutez simplement 

http.post('http://localhost:3000/send-mail', this.contactForm.value);
3
Andriy

Edit: Je viens de voir que vous travaillez sur Firebase, je vais voir comment cela change les choses.

Comment pourrais-je exécuter du code côté serveur dans Firebase?

Angular 2 est du côté client, si vous voulez faire un appel API avec votre secret, vous devriez probablement le faire côté serveur, aka node.js ou quel que soit votre serveur.

Étant donné que vous avez sendmail.js en tant que script, envisagez de servir votre application Angular 2 avec node.js et d’avoir un noeud final API avec express, comme /api/sendMail auquel vous pouvez envoyer une demande XHR/AJAX à partir de votre application Angular 2.

1
Jim Factor