Обработка транзакционных писем в приложениях React Redux

Транзакционные электронные письма - это электронные письма, отправляемые приложениями, когда пользователь что-то делает в приложении, или отправляемые, когда приложение хочет сообщить пользователю о чем-то важном. Например: электронные письма, такие как «Подтвердите зарегистрированный адрес электронной почты», «Товар отправлен», «Срок действия пароля истек» и т. Д.

Обработка транзакционных писем может быть сложной задачей, поскольку для этого требуется стороннее приложение (электронная почта) и у нас есть вторая страница (например, страница «validateEmail»), которая является отправной точкой (в дополнение к обычной странице «Индекс»). .

Посмотрим, как это реализовать.

Обратите внимание: я буду использовать то же приложение blog-post, которое использовал в своих предыдущих сообщениях, но с добавлением новых функций.

Исходный код: https://github.com/rajaraodv/react-redux-blog

Приложение Live: https://protected-escarpment-79486.herokuapp.com/

Twitter: https://twitter.com/rajaraodv (@rajaraodv)

Сценарий: Пользователь зарегистрировался в нашем приложении с помощью электронной почты, и нам необходимо подтвердить ее.

Сценарий 1 - Пользователь регистрируется, а затем получает электронное письмо:

Вы можете нажать на картинку, чтобы увеличить и прочитать

Регистры пользователей
Сервер отправляет «приветственное» электронное письмо с сервера с URL-адресом, в котором есть некоторый токен (например: http://myapp.com/verifyToken/?token=abcd)
Пользователь нажимает ссылку в электронном письме.
Эта ссылка ведет пользователя к определенному маршруту / verifyEmail /: token (интерфейс Redux).
Приложение (клиент), в свою очередь, передает токен (abcd) по определенному маршруту на сервере (/ api / verifyEmail /: token).
Если токен действителен, сервер возвращает пользователя и JWTToken (см. Предыдущий пост), что эквивалентно «входу в систему».
Если токен недействителен, сервер возвращает ошибку, а приложение Redux показывает ошибку.
Если токен действителен, приложению Redux необходимо перенаправить на страницу «index», как если бы пользователь вошел в систему.

Примечание. Некоторые люди спрашивают: «Почему бы не проверить токен напрямую на сервере, а не просматривать страницу React посередине?» т.е. перейдите от шага 3 (пользователь нажимает ссылку) для проверки на сервере к шагу 6/7 (вход в систему или отображение ошибки).

Причина в том, что мы хотим, чтобы сервер оставался только сервером «API». Это становится важным, когда мы хотим создать собственное приложение для iOS или Android на том же сервере, где мы не можем перенаправлять или повторно отображать на сервере.

Сценарий 2 - Повторная отправка электронной почты

Регистры пользователей
Пользователь по какой-то причине не получает электронное письмо, есть ссылка на «Отправить повторно» приветственное письмо.
Сервер снова отправляет электронное письмо
Приложение Redux показывает: «Электронная почта была повторно отправлена, пожалуйста, подтвердите»
Продолжение: сценарий № 1, шаг 3

Сценарий 3 - Обновить электронную почту

Регистры пользователей (но ввели неправильный адрес электронной почты)
Пользователь нажимает ссылку «Обновить адрес электронной почты»
Пользователь попадает на маршрут (в нашем случае «Профиль»), где пользователь может обновить электронную почту.
Обновления пользователей Электронная почта
Продолжение: сценарий №1, этап 2

Так с чего же начать?

Обработка электронных писем о транзакциях требует, чтобы мы реализовали две вещи:

Компонент оповещения, который появляется, когда пользователь не подтвердил электронную почту, и отображает сообщения об ошибках. В нашем случае это компонент ValidateEmailAlert.
Нам нужна новая целевая страница (новый маршрут), которая обрабатывает URL-адреса с токеном из приветственных писем. В нашем случае это страница ValidateEmail.

1. Компонент оповещения - компонент ValidateEmailAlert

Эта работа компонентов:

Показывать предупреждение и сообщение об ошибке, если адрес электронной почты не подтвержден
Скрыть, когда адрес электронной почты подтвержден
Передайте токен на сервер, чтобы проверить, действителен ли токен
Имейте две ссылки: 1. Повторно отправить электронное письмо и 2. Обновить электронное письмо.

Компонент выглядит так:

<ValidateEmailAlertContainer token={someToken} autoValidateToken={true}/>

Из предыдущего блога Пошаговое руководство по созданию приложений React Redux мы можем перечислить следующие Состояние и Действия для компонента.

ValidateEmailAlert - Список состояний:

Состояние - пользователь:

validationError - строка. это часть состояния пользователя в случае сбоя проверки. например «Срок действия токена из электронного письма истек или он недействителен»
initialMessage - строка. Часть состояния пользователя, когда электронная почта не подтверждена. Например. «Подтвердите адрес электронной почты»

//validate email, if success, then load user and login
export const VALIDATE_EMAIL = ‘VALIDATE_EMAIL’;
export const VALIDATE_EMAIL_SUCCESS = ‘VALIDATE_EMAIL_SUCCESS’;
export const VALIDATE_EMAIL_FAILURE = ‘VALIDATE_EMAIL_FAILURE’;

Состояние - ResendEmail:

resentEmailError - строка. «Не удалось повторно отправить электронное письмо, потому что оно недействительно»
resentEmailSuccess - строка. «Отправить письмо повторно. Пожалуйста, подтвердите"

Состояние - autoValidateToken

autoValidatetoken: логическое значение. Компонент ValidateEmailAlert повторно используется на различных страницах, таких как PostList, PostNew и т. Д., Где он просто показывает предупреждающее сообщение. Но также выполняет дополнительную обязанность запрашивать у сервера проверку токена, когда он находится на странице «ValidateEmail». Чтобы отличить это, мы передаем autoValidatetoken = true, когда этот компонент используется в страницу ValidateEmail и false везде.

Состояние - токен

токен - Строка. Это токен, который следует передать на сервер для проверки.

ValidateEmailAlert - список действий:

validateEmail - вызывается, когда «autoValidatetoken» истинно. Это действие просит сервер проверить токен.
повторная отправка - вызывается, когда пользователь нажимает на ссылку «Отправить повторно». это действие просит сервер повторно отправить «приветственное» письмо
updateEmail - вызывается, когда пользователь нажимает ссылку «Обновить электронную почту». Это просто открывает страницу «Профиль».
resetMe - вызывается компонентом для очистки всех состояний, чтобы компонент можно было повторно использовать.

Примечание. Все асинхронные действия, которые взаимодействуют с сервером, имеют более одного «действия» для представления различных состояний Ajax. Например: «validateEmail» на самом деле имеет 3: validateEmail, validateEmailSuccess и validateFailure.

//validate email, if success, then load user and login
export const VALIDATE_EMAIL = ‘VALIDATE_EMAIL’;
export const VALIDATE_EMAIL_SUCCESS = ‘VALIDATE_EMAIL_SUCCESS’;
export const VALIDATE_EMAIL_FAILURE = ‘VALIDATE_EMAIL_FAILURE’;

Компонент ValidateEmailAlertContainer:

Это компонент-оболочка, в котором реализована вся логика. Он также подключает и передает состояние глобального состояния Redux в «презентационный» компонент ValidateEmailAlert.

См. Полный исходный код ValidateEmailAlertContainer

//ValidateEmailAlertContainer component
const mapDispatchToProps = (dispatch, ownProps) => {
 return {
 validateEmail: () => {
   dispatch(validateEmail(ownProps.token)).then((response) => {
    if(!response.error) {
     sessionStorage.setItem(‘jwtToken’, response.payload.token);
     dispatch(validateEmailSuccess(response.payload))
    } else {
     sessionStorage.removeItem(‘jwtToken’);
     dispatch(validateEmailFailure(response.payload));
   }
  });
 },

 resend: () => {
  let jwtToken = sessionStorage.getItem(‘jwtToken’);
  if (!jwtToken || jwtToken === ‘’) { 
    alert(‘Please Log In’);
    return;
   }
  dispatch(resendValidationEmail(jwtToken))
  .then((response) => {
   !response.error ?      
     dispatch(resendValidationEmailSuccess(response.payload)) :    
     dispatch(resendValidationEmailFailure(response.payload));
  });
 },

  resetMe: () => {
   dispatch(resetResendEmailState());
  }
 }

ValidateEmailAlert - автоматическая проверка токена

Как упоминалось ранее, компонент ValidateEmailAlert повторно используется на различных страницах, таких как PostList, PostNew и т. Д., Где просто отображается предупреждающее сообщение. Но когда мы находимся на странице «ValidateEmail», мы знаем, что пользователь перешел на эту страницу из приветственного письма, и у нас также есть «токен». Поэтому мы устанавливаем autoValidateToken = true на этой странице, чтобы попросить сервер проверить страницу.

componentDidMount() {
  //automatically verify for token if autoValidateToken 
  //is set to true (e.g. in ValidateEmail *page*)
  if(this.props.autoValidateToken) {
   this.props.validateEmail(this.props.token);
  }
 }

См. Источник компонента ValidateEmailAlert здесь.

Реализовать целевую страницу ValidateEmail

Это простая страница, которая просто загружает компонент ValidateEmailAlert и действует как отправная точка для URL-адресов из приветственных писем.

class ValidateEmail extends Component {
 render() {
  return (
   <div>
     <HeaderContainer type=”posts_new”/>
     <ValidateEmailAlertContainer 
          token={this.props.params.token} <-- pass token from router  
          autoValidateToken={true} <-- pass this "true"
     />
   </div>
  );
 }
}
export default ValidateEmail;

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

Реализация этого аналогична реализации страницы Войти или Зарегистрироваться, как описано в предыдущих сообщениях. Я рекомендую вам пройти 1. Руководство по созданию приложения CRUD на React Redux, чтобы узнать, как его реализовать, и 2. Надежная проверка формы для реагирования на приложения Redux, чтобы узнать, как добавлять проверки формы.

Это оно!