Как реализовать амазонку SNS по электронной почте подписка на веб-сайте GATSBY

Автор оригинала: Koffi KOMLAN.

Мне было трудно реализовать Amazon Simple Уведомление об обслуживании Почта по электронной почте на одном из моих веб-сайтов GATSBY. Да, вы прочитали это хорошо 😊, GATSBY , Реагистрационная каркас, которая помогает вам быстро построить и развернуть супер быстрые легкие легкие веб-сайты. В этом посте я поделюсь через демонстрационный проект, как вы можете легко реализовать эту функцию на вашем веб-сайте GATSBY.

Предпосылки

Вам нужен AWS аккаунт

Настроить Amazon SNS.

Открыть AWS Console и войдите в систему
В Услуги Меню, выберите Простое уведомление службы
На странице SNS выберите Создать тему
Дать Имя (Вот это: gatsbynewslettertopic )
Дать Имя отображения (Здесь: GATSBY Newsletter Тема )
Оставьте дополнительные конфигурации и нажмите Создать тему
Обратите внимание на ARN (здесь, ARN: AWS: SNS: US-EAST-1: …: GATSBYNEWSLETTERTOPIC )

Создать программное обеспечение AWS для AWS-SDK

В той же консоли AWS с то же самое подписано пользователем для вышеуказанной темы SNS, выберите Я В меню услуг
Выберите Пользователи в панели инструментов IAM и нажмите Добавить пользователя
Дайте имя пользователя (здесь: SnSuser )
Выберите: Программный доступ и клич следующее разрешение
В Установить разрешения Вкладка, выберите Прикрепите существующую политику напрямую
В таблице политики поищите AmazonsnsfullAccess и проверьте его
Затем нажмите Далее – Далее – создайте.
Скопируйте или загрузите созданные учетные данные пользователя (доступа к ключу ключа и ключ секретного доступа) для следующих шагов.

Настройка проекта сайта GATSBY

Теперь, когда мы создали конечную точку подписки SNS-SNS, а также сообщают пользователя на AWS, мы собираемся настроить наш проект.

Создать новый проект: GATSBY новый My-GATSBY-Project https://github.com/gatsbys/gatsby-starter-default
В корне проекта введите GATSBY Развивается бежать
Откройте браузер и введите: http://localhost: 8000

Создать компонент подписки

В папке компонента Создайте: Подписаться form.js
Установите AWS-SDK в проекте GATSBY NPM установить -Save AWS-SDK
Установить Formik и YUP Схема строитель NPM установить Formik YUP
Скопируйте и вставьте ниже фрагмент кода ниже

import React from "react"
import { useFormik } from "formik"
import * as Yup from "yup"
export default function SubscribeForm() {
    const formik = useFormik({
    initialValues: {
      email: "",
    },
    validationSchema: Yup.object({
      email: Yup.string().email().required(),
    }),
    onSubmit(values, { resetForm }) {
      const { email } = values    
    },
  })
  return (
    
      
      {formik.errors.email ? (
        {formik.errors.email}
      ) : null}
      
    
  )
}

Добавить Подписка form.js Компонент на странице индекса index.js Должен выглядеть так:

import React from "react"
import { Link } from "gatsby"

import Layout from "../components/layout"
import Image from "../components/image"
import SEO from "../components/seo"
import SubscribeForm from "../components/subscribeform"

const IndexPage = () => (
  
    
    Hi people
    Welcome to your new Gatsby site.
    Now go build something great.
    
      
    
    
      
    
    Go to page 2 

    Go to "Using TypeScript"
  
)

export default IndexPage

Наша веб-страница должна иметь этот вид: обратите внимание на ввод электронной почты и кнопку подписки

До сих пор все работает хорошо, как и ожидалось, но если вы кличны на кнопке подписки, ничего не происходит 🤣, да, потому что мы ничего не сделали так велико, все, кто прошел через учебники GATSBY, могли бы сделать то, что мы сделали! Давайте добавим некоторые коды к нашему Подписка form.js Отказ

Добавить config.json Файл в корне для CAWS Cridentials, он должен выглядеть так:

{ 
    "accessKeyId": "secret", 
    "secretAccessKey": "secret", 
    "region": "secret" 
}

Nota Bene : Вы должны заменить « Secret » с соответствующим AccesskeyID , Secretaccesskey и регион Значения, которые вы попали в Создать программное обеспечение AWS для AWS-SDK раздел. Предупреждение : Это не лучшая практика, чтобы поставить приложения к криксуалам в проекте, у меня будет сообщение о том, как это сделать, но для этой подписки мы не будем следовать этой лучшей практике 🤦♂️. Давайте двигаться дальше!

В Подписка form.js Под последней инструкцией импорта добавьте следующие строки:

import AWS from "aws-sdk"

const AWSConf = require('../../config.json');
AWS.config.update(AWSConf);

В методе ONSUBMIT () добавьте следующие инструкции после строки Const:

var params = {
        Protocol: "EMAIL" /* required */,
        TopicArn: "yourArn" /* required */,
        Endpoint: email,
      }

      var subscribePromise = new AWS.SNS({ apiVersion: "2010-03-31" })
        .subscribe(params)
        .promise()

      subscribePromise
        .then(function (data) {
          resetForm() //reset the form
        })
        .catch(function (err) {
          console.error(err, err.stack)
        })

Nota Bene : В топы: « Herarn » Инструкция, заменить Herarn ARN, созданный через Настроить Amazon SNS раздел. Воила! Вы сделали великую вещь 👍.

Код подписки. JS должен выглядеть так:

import React from "react"
import { useFormik } from "formik"
import * as Yup from "yup"
import AWS from "aws-sdk"

const AWSConf = require('../../config.json');
AWS.config.update(AWSConf);

export default function SubscribeForm() {
    const formik = useFormik({
    initialValues: {
      email: "",
    },
    validationSchema: Yup.object({
      email: Yup.string().email().required(),
    }),

    onSubmit(values, { resetForm }) {
      const { email } = values
      var params = {
        Protocol: "EMAIL" /* required */,
        TopicArn: "yourArn" /* required */,
        Endpoint: email,
      }

      var subscribePromise = new AWS.SNS({ apiVersion: "2010-03-31" })
        .subscribe(params)
        .promise()

      subscribePromise
        .then(function (data) {
          resetForm()  //reset the form
        })
        .catch(function (err) {
          console.error(err, err.stack)
        })
      
    },
  })

  return (
    
      
      {formik.errors.email ? (
        {formik.errors.email}
      ) : null}
      
    
  )
}

Обновите браузер и поставьте действительный адрес электронной почты, затем отправьте. Поле ввода будет автоматически сброшено на успехе, а электронная почта подтверждения подписки будет отправлена на предоставленный адрес электронной почты.

Заключение

Отличная работа! Вы реализовали Amazon SNS электронной информационной рассылки на веб-сайте GATSBY. Вы можете найти исходный код здесь Отказ

                                                    Wilson Koffi K.

Хотите больше Советов DEV, посетите мой блог здесь