Рубрики
Без рубрики

Отправка электронных писем с функцией sendgrid

В этом коротком руководстве я собираюсь показать вам, как встать и работать с функцией электронной почты SendGrid, чтобы отправить электронные письма через SendGrid.

Автор оригинала: Tony Spiro.

Мы недавно выпустили Космические функции (Общественная бета). Мы рады помочь командам строить удивительные современные продукты вместе с новыми решениями без сервеса.

В этом коротком руководстве я собираюсь показать вам, как встать и работать с функцией электронной почты Sendgrid, чтобы отправить электронные письма через SendGrid (для получения дополнительных примеров Функции Войти и перейдите в свои ведро> Настройки> Функции).

Развертывание функции

  1. Установите функцию Чтобы установить функцию SENDGRID, перейдите в функции вашего ведра> Настройки> Найдите функцию SendGrid и нажмите «Установить функцию».

  2. Добавить ключи и развернуть После установки функции вы будете перенаправлены на страницу, чтобы добавить свои учетные данные AWS и переменные среды. Следуйте инструкциям, чтобы добавить свои AWS Creds (если у вас их не удобно).

Перейдите на свою учетную запись SENDGRID и найдите свой секретный ключ API, расположенный в настройках> API-ключей (вам может потребоваться создать новый) и добавить это в качестве значения для sendgrid_api_key.

После добавления ваших ключей нажмите «Развернуть функцию» и через минуту ваша функция будет развернута и готова к запросам.

Код веб-контакта

Далее давайте создадим контактную форму для доступа к вновь развернутой конечной точке. Следуйте этим шагам для установки React Starter :

npm i -g cosmic-cli
cosmic init react-starter
cosmic develop

Теперь перейдите в свой код приложения и перейдите на компонент страницы по умолчанию, расположенный на страницах/по умолчанию. Джей и редактировать его, чтобы выглядеть так:

// pages/default.js
import React from 'react'
import Router from 'next/router'
import bucket from '../config'
import Page from '../components/page'
import PageNotFound from '../components/404'
import Header from '../components/header'
import Footer from '../components/footer'
import Nav from '../components/nav'
class DefaultPage extends React.Component {
  static async getInitialProps({ req, query }) {
    let slug = query.slug
    if (!slug)
      slug = 'home'
    let page
    try {
      const res = await bucket.getObject({ slug })
      page = res.object
    } catch(e) {
      page = {
        title: 'Page not found',
        component: '404'
      }
    }
    return { page }
  }
  handleSubmit(e) {
    e.preventDefault()
    const email = e.target.email.value
    const first_name = e.target.first_name.value
    const last_name = e.target.last_name.value
    var url = 'https://your-cosmic-function-endpoint-here.lambda.aws.com' // ADD YOUR ENDPOINT HERE
    var data = {
      to: 'your_email@gmail.com', // EDIT THIS TO YOUR EMAIL
      from: email,
      subject: `Contact form submission: ${first_name} ${last_name}`,
      text_body: `Contact form submission: ${first_name} ${last_name}`,
      html_body: `Contact form submission: 
${first_name} ${last_name}
${email}`
    }
    fetch(url, {
      method: 'POST',
      body: JSON.stringify(data),
      headers:{
        'Content-Type': 'application/json'
      }
    }).then(res => res.json())
    .then(response => console.log('Success:', JSON.stringify(response)))
    .catch(error => console.error('Error:', error));
  }
  render() {
    return (
      

        

        

          {this.props.page.component && this.props.page.component==='404' ? (
            
          ) : (
            
          )}
          
          

            

              
            

            

              
            

            

              
            

            

              
            

          

        

        

      

    );
  }
}

export default DefaultPage

Обратите внимание на пару вещей здесь:

  1. Мы добавили элемент формы для получения ввода для электронной почты, имя и фамилия.
  2. Мы добавили метод Handlesubmit для обработки представления формы, который принимает значения формы и отправляет данные на нашу конечную точку космической функции.

Вот и все! У нас теперь есть конечная точка, которая принимает данные из нашей формы и отправляет его на API SendGrid для обработки.

Преимущества

Меньше кода

Нам не нужно было беспокоиться о создании конечной точки API в нашем приложении, чтобы отправить данные для Sensprid.

Менее конфигурация

Нам не нужно беспокоиться о том, что Config Tausses, как, возможно, утечка секретных клавиш. Нам не нужно делиться ключами API с кем-либо еще, только конечной точкой. Config обрабатывается в космической функции в качестве переменной среды.

Многоразовый

Мы можем использовать эту конечную точку в любом другом приложении, которое необходимо отправить электронную почту.

Я надеюсь, что вам понравился этот быстрый тур по функции SENDGRID, теперь готов к установке и развертыванию (перейдите в ваши ведро> Настройки> Функции). Дайте мне знать, если у вас есть какие-либо вопросы или комментарии. Обратитесь к нам в Twitter и Присоединяйтесь к нашему сообществу Slack Отказ

Читайте ещё по теме: