如何使用 sendgrid 使用 ReactJS 和 firebase 发送电子邮件？答案

【问题标题】：How to use sendgrid to send email using ReactJS and firebase?如何使用 sendgrid 使用 ReactJS 和 firebase 发送电子邮件？
【发布时间】：2018-02-26 06:30:23
【问题描述】：

我已经制作了联系表单组件，并且正在使用 sendgrid 和 firebase。我已经安装了 sendgrid 和 firebase，我正在将数据推送到 firebase，数据必须显示在 sendgrid 的电子邮件中。

import React, { Component } from 'react';
import firebase from 'firebase';
import sgMail from '@sendgrid/mail';

const config = {
    apiKey: process.env.REACT_APP_FIREBASE_KEY,
    authDomain: process.env.REACT_APP_FIREBASE_DOMAIN,
    databaseURL: process.env.REACT_APP_FIREBASE_DATABASE,
    projectId: process.env.REACT_APP_PROJECT_ID,
    storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
    messagingSenderId: process.env.REACT_APP_SENDER_ID
    };
    firebase.initializeApp(config);

    //Reference content from collection 
    let contentref = firebase.database().ref('content');

  //SendGrid Email
  //const sgMail = require('@sendgrid/mail');
  sgMail.setApiKey(process.env.REACT_APP_SENDGRID_API_KEY);

class ContactForm extends Component {

render() {

    return <div> (
 const msg = {
    to: 'myemail@gmail.com',
    from: 'test@example.com',
    subject: 'Sending with SendGrid is Fun',
    text: 'and easy to do anywhere, even with Node.js',
    html: '<strong>and easy to do anywhere, even with Node.js</strong>',
  };
  sgMail.send(msg);

 </div>);
  }
}

export default ContactForm;

我没有收到myemail@gmail.com 的电子邮件，为什么会这样？

【问题讨论】：

React 组件应该返回有效的 html 或 null。
@BoyWithSilverWings 如何将 sendgrid 与 reactjs 和 firebase 集成

标签： reactjs sendgrid

【解决方案1】：

您必须遵循 Sendgrid 的建议并使用 server-based application。

Making your API key publicly accessible could result in anyone authenticating API calls with your API key — this is a significant security concern both for you and SendGrid.

创建一个使用您构建的应用程序的 Express 服务器，为 email sender service 添加路由。

app.post('/email', (req, res) => sendEmail(req.body, res))

在您的 React 应用程序中，您可以使用 Axios 来调用您的路由。

import axios from 'axios';

export const sendEmail = async (data) => axios({
  method: 'post',
  url: '/email',
  data
})

根据他们的文档和您的需求构建 Sendgrid 电子邮件，例如：

  {
    personalizations: [
      {
        to: [
          {
            email: 'some@email.com',
            name: 'Someone',
          },
        ],
        subject: 'test',
      },
    ],
    from: {
      email: 'who@sent.com',
      name: 'who sent',
    },
    reply_to: {
      email: 'email@to.com',
      name: 'reply',
    },
    content: [
      {
        type: 'text/html',
        value: 'HELLO WORLD',
      },
    ],
  }

在组件中调用之前的 axios 函数：

const sendRequestDemoEmail = async (emailMessage) => {
  return await sendEmail(emailMessage)
}

【讨论】：