如何在角度 6 中将联系表单详细信息发送到电子邮件

Question

我在申请中使用联系表格。在此，我将发送有关特定电子邮件ID的联系表格详细信息。所有这些都必须在角度 6 中完成。我已经使用nodemailer尝试过这个，但没有获得正确的程序来实现它。提前致谢

这是支持。

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { client, response } from '../../interface'
import { ClientService } from '../../services/client.service'
import { EmailService } from '../../services/email.service'
import { Store } from '@ngrx/store'
import { AppState } from '../../app.state'

@Component({
  selector: 'app-support',
  templateUrl: './support.component.html',
  styleUrls: ['./support.component.css']
})
export class SupportComponent implements OnInit {
  angForm: FormGroup;
  osVersion: {};
  browserName: {};
  browserVersion: {};
  userAgent: {};
  appVersion: {};
  platform: {};
  vendor: {};
  osName : {};
  clientList: client[]
  clientListLoading: boolean = false;
  orgMail: any;
  user: any;

  constructor(public clientService: ClientService,private store: Store<AppState>,
     private fb: FormBuilder,
    private emailService: EmailService) {
    store.select('client').subscribe(clients => this.clientList = clients.filter(cli => cli.enabled == 0))
    this.user = JSON.parse(localStorage.getItem('user'))
    console.log(this.user);
    {
        this.createForm();
      }

   }
   createForm() {
    this.angForm = this.fb.group({
      name: ['', Validators.required],
      email: ['', Validators.required],
      message: ['', Validators.required],
    });
  }
  sendMail(name, email, message) {
    this.emailService.sendEmail(name, email, message).subscribe(success => {
      console.log(success);
    }, error => {
        console.log(error);
    });
  }
  ngOnInit() {
    // this.browser_details();
  }
}

网页文件：

<form [formGroup]="angForm" novalidate>
<div class="message">
  <h3> Write to us </h3>
</div>
<div class="form__top">
  <div class="form__left">
    <div class="form__group">
      <input class="form__input form__input--name" type="text"   formControlName="name" placeholder="name" #name>
    </div>
    <div *ngIf="angForm.controls['name'].invalid && (angForm.controls['name'].dirty || angForm.controls['name'].touched)" class="alert alert-danger">
      <div *ngIf="angForm.controls['name'].errors.required">
        Name is required.
      </div>
    </div>
    <div class="form__group">
      <input class="form__input form__input--email" type="email"  formControlName="email" placeholder="email" #email>
    </div>
    <div *ngIf="angForm.controls['email'].invalid && (angForm.controls['message'].dirty || angForm.controls['message'].touched)"
      class="alert alert-danger">
      <div *ngIf="angForm.controls['message'].errors.required">
        message is required.
      </div>
    </div>
  </div>
  <div class="form__right">
    <div class="form__group">
      <textarea class="form__input form__input--textarea" placeholder="Message" formControlName="message"  #message
        rows="3"></textarea>
    </div>
    <div *ngIf="angForm.controls['message'].invalid && (angForm.controls['message'].dirty || angForm.controls['message'].touched)"
      class="alert alert-danger">
      <div *ngIf="angForm.controls['message'].errors.required">
        message is required.
      </div>
    </div>
  </div>
</div>
<div class="form__down">
  <div class="form__group">
    <button (click)="sendMail(name.value, email.value, message.value)" [disabled]="angForm.pristine || angForm.invalid"  class="form__input form__input--submit" name="submit" type="submit" value="SEND MESSAGE">SEND MESSAGE
    </button>
  </div>
</div>

联系方式.js

const express = require('express');
const router = express.Router();
const request = require('request');
const nodemailer = require('nodemailer');
const cors = require('cors');
router.options('/send', cors()); 
router.get('/send', cors(), (req, res) => {
    const outputData = `
    <p>You have a new contact request</p>
    <h3>Contact Details</h3>
    <ul>  
      <li>Name: ${req.body.name}</li>
      <li>Email: ${req.body.email}</li>
    </ul>
    <h3>Message</h3>
    <p>${req.body.message}</p>
  `;
    let transporter = nodemailer.createTransport({
        host: 'smtp.gmail.com',
        port: 465,
        secure: false,
        port: 25,
        auth: {
            user: 'email',
            pass: 'pass'
        },
        tls: {
            rejectUnauthorized: false
        }
    });
    let HelperOptions = {
        from: '"kutomba" <email',
        to: 'email',
        subject: 'Majeni Contact Request',
        text: 'Hello',
        html: outputData
    };

    transporter.sendMail(HelperOptions, (error, info) => {
        if (error) {
            return console.log(error);
        }
        console.log("The message was sent!");
        console.log(info);
    });
});
module.exports = router;

服务器.js

// server.js
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const path = require('path');
const app = express();
// CORS Middleware
app.use(cors());
// Port Number
const port = process.env.PORT || 3000
// Run the app by serving the static files
// in the dist directory
app.use(express.static(path.join(__dirname, '/majeni/dist/majeni')));
// Body Parser Middleware
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
//routes
const contact = require('./app/components/support/contact');
app.use('/contact', contact);
// If an incoming request uses
// a protocol other than HTTPS,
// redirect that request to the
// same url but with HTTPS
const forceSSL = function () {
  return function (req, res, next) {
    if (req.headers['x-forwarded-proto'] !== 'https') {
      return res.redirect(
        ['https://', req.get('Host'), req.url].join('')
      );
    }
    next();
  }
}
// Instruct the app
// to use the forceSSL
// middleware
// app.use(forceSSL());
app.use(function (req, res, next) {
  // Website you wish to allow to connect
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');
  // Request methods you wish to allow
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
  // Request headers you wish to allow
  res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
  // Set to true if you need the website to include cookies in the requests sent
  // to the API (e.g. in case you use sessions)
  res.setHeader('Access-Control-Allow-Credentials', true);
  // Pass to next layer of middleware
  if ('OPTIONS' == req.method) {
    res.sendStatus(200);
    } else {
      next();
    }
});
// For all GET requests, send back index.html
// so that PathLocationStrategy can be used
app.get('/*', function (req, res) {
  res.sendFile(path.join(__dirname + '/majeni/dist/majeni/index.html'));
});
// Start Server
app.listen(port, () => {
    console.log('Server started on port '+port);
  });

这是我的电子邮件.服务.ts

import { Injectable } from '@angular/core';
import { Headers, Http, Response } from '@angular/http';
@Injectable({
  providedIn: 'root'
})
export class EmailService {
   constructor(private http: Http) { }
  sendEmail(name, email, message) {
    const uri = 'http://localhost:4200/support/contact';
    const obj = {
      name: name,
      email: email,
      message: message,
    };
    return this.http.post(uri, obj);
  }
}

Answer 1

您

不应该在联系时使用两个端口.js端口 465 是安全的端口，因此请替换：

       port: 465,
       secure: false,
       port: 25,
       auth: {
           user: 'email',
           pass: 'pass'
       },
       tls: {
           rejectUnauthorized: false
       }

为：

      port: 465,
      secure: true,
      auth: {
        user: email,
        pass: pass
      }

在变量电子邮件和传递上，您应该设置发送电子邮件的帐户的电子邮件和密码(我建议仅为表单联系人创建一个新的电子邮件帐户，因为默认情况下Gmail帐户不允许客户在没有设置DMARK e DKIM的情况下登录(，并始终确保将此信息排除在GitHub等公共代码存储库之外。

你可以看到我在github上做的类似代码：https://github.com/anajuliabit/my-website-backend/blob/master/src/Controllers/ContactController.js