web-dev-qa-db-ja.com

Angular 2からのメールの送信

Angular 2アプリからメールを送信するにはどうすればよいですか？

私はAngular 2アプリをfirebaseでホストしています。お問い合わせフォームをメールで送信したいのですが、私のソリューションではNodejsを使用するのが理想的ですが、仕事を成し遂げるものなら何でも使用するつもりです。以下は私のアプリの内訳です。

クライアント側の進捗

これが私のフォームです：

<!-- 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>

これが私の連絡フォームコンポーネントです：

// 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();
  }

}

これが私のお問い合わせフォームサービスです。

// 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();
  }

}

送信ボタンをクリックすると、フォームデータがコンソールに正常に表示されます。

サーバー側Nodejsの進行状況

SendGridとNodejsを使用して、コマンドプロンプトからメールを正常に送信できます。

例：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);
});

コマンドプロンプトに次のように入力すると、電子メールが正常に送信されます。

node sendmail

ただし、送信したフォームデータをsendmail.jsにリンクする方法がわかりません。また、送信ボタンをクリックしてsendmail.jsのコードをアクティブにする方法もわかりません。

どんな助けでも大歓迎です。御時間ありがとうございます！

node.jsangularemailfirebase
8
Ty Sabs

sendmail.jsをRESTサービスとして書き換えようとします。次に例を示します。

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);
  });
}

メールの本文内のフォームデータを使用したことに注意してください

その後、あなたの送信関数で角度で、単に実行します

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

編集：Firebaseでサービスを提供していることがわかりました。それがどのように変化するかを調査します。

Firebaseでサーバー側のコードをどのように実行しますか？

Angular 2はクライアント側です。シークレットを使用してAPI呼び出しを行う場合は、おそらくサーバー側、つまりnode.jsなどのサーバーで行う必要があります。

sendmail.jsスクリプトとして、Angular 2アプリケーションでnode.jsを使用し、/api/sendMail Angular 2アプリケーションからXHR/AJAXリクエストを行うことができます。

1
Jim Factor