Изпращайте имейли от Front-end с EmailJS

Преди известно време пишех приложение за JavaScript и исках да внедря функция за изпращане на имейли, така че опитах Google; от търсенето и проучванията си разбрах, че не мога точно да изпращам имейл директно с JavaScript, но намерих някои полезни решения.

Първото решение беше използването на атрибута „HTML5 emailto:““, но това решение имаше три недостатъка, единият е, че оставя имейла ми отворен за обществеността, което го прави потенциална банка за спам (игра на думи), вторият проблем с това решение е, че трябва да премине през имейл клиента в системата на потребителя, което означава, че няма да работи на системи, които нямат инсталирано приложение за изпращане на имейли и третото е, че темата на имейла и съобщението не могат да се персонализират и не можете да избирате динамично получателят на пощата, защото може да бъде само твърдо кодиран като „emaito:[email protected]“.

Второто решение беше да използвам nodemailer, но това означаваше, че ще трябва да напиша бекенд, което не исках, защото приложението е наистина малко. Мисля, че SendGrid също предостави подобна функция, но така и не разбрах документацията, така че се спрях и на SendGrid.

Най-накрая попаднах на EmailJS и имаше точните функции, които исках, и най-добрата част беше, че може да се внедри в предния край с много малко редове JavaScript, Eureka!!!. Ще споделя моята конфигурация и внедряване по-долу, защото документацията на EmailJS може да бъде доста объркваща и за други ноуби като мен.

Конфигуриране на EmailJS

СТЪПКА 1: създайте акаунт в EmailJS и след това отворете страницата Имейл услуги на таблото за управление, щракнете върху добавяне на услуги, трябва да видите списък с поддържани пощенски услуги, аз избрах Gmail но можете да изберете това, което работи за вас. Ако решите да използвате Gmail, трябва да „разрешите по-малко сигурни приложения“ в настройките на Gmail, за да работи по желание. Попълнете подробностите за услугата за електронна поща и след това изпратете тестов имейл, за да потвърдите дали акаунтът ви в EmailJS е успешно свързан с услугата за електронна поща. Получавате 200 имейла дневно с безплатния план, но можете да изберете надстроен платен план по всяко време.

СТЪПКА 2: преминаваме към създаване на имейл шаблони, които са необходими за всеки тип имейл, който трябва да бъде изпратен с EmailJS. Отидете на страницата с имейл шаблони на вашето табло за управление на EmailJS и след това щракнете върху „създаване на нов шаблон“, можете да изберете предварително създаден шаблон или да проектирате свой. Всеки шаблон съдържа полета като тема на имейл, тяло, до имейл, отговор до и т.н.

СТЪПКА 3: добавяме динамични променливи, които да се използват в нашия код, към имейл шаблоните; те се добавят чрез обвиване на променливата с двойни или тройни фигурни скоби. Например: {{до}}, {{тема}}; но ако искате променливата да бъде попълнена от html, който не е екраниран, ние използваме тройни фигурни скоби като такива {{{html}}}. Това ни води до края на конфигурацията на EmailJS, сега преминаваме към изпълнението на функцията.

Внедряване на функцията EmailJS

Трябва да се свържем с EmailJS CDN сървъра, като поставим следните кодови фрагменти в тага ‹head›, точно преди затварящия таг ‹/head›.

<head>
  <script type="text/javascript" src=" https://cdn.emailjs.com/sdk/2.3.2/email.min.js"></script>
  <script type="text/javascript"> 
    (function (){
     emailjs.init("user_User+IDgibberish");
     })();
  </script>
</head>

Този фрагмент може да бъде получен от раздела за инсталиране на таблото за управление, просто щракнете върху инсталиране, копирайте показания фрагмент и го поставете във вашия таг ‹head›; трябва да е под вашия таг ‹link›, ако имате такъв в ‹head›. За да потвърдите дали вашият потребителски идентификатор е правилен, щракнете върху вашето име в горната част на таблото за управление или върху Акаунт в страничния панел и след това отидете до API ключове, ще видите вашия потребителски идентификатор и токен за достъп.

Следващото нещо е да дефинираме параметрите на шаблона и функцията emailJS в нашия файл index.js или whatEverYouNamedIt.js. Да приемем, че имаме бутон, който сме добавили слушател на събития, за да го харесаме

button.addEventListener ('submit', () => {
  let templateParams = {
  to: user.email,
  subject: 'Welcome to The Universe',
  html: `
  <h2>Welcome ${user.name} ${user.surname},</h2>
  <p>There's no other Universe you'll rather inhabit</p>`
}
emailjs.send('default_service', 'emailjs_article', templateParams)
  .then(function (response) {
  console.log('SUCCESS!', response.status, response.text);
  }, function (error) {
  console.log('FAILED...', error);
  });
});

„let templateParams“ е декларацията на параметрите на шаблона.

to, subject и html са параметричните променливи, които ще бъдат попълнени във вашия шаблон. Вижте червените стрелки на изображението по-долу.

„до“ представлява имейла на получателя, който ще бъде динамично попълнен с javascript.

„Тема“ просто означава темата на имейла, който искате да изпратите.

“html” е тялото на писмото, което искате да изпратите; той има 3 фигурни скоби около себе си „{{{html}}}“, за разлика от други, които имат само 2 в шаблона, това е така, защото не искаме html таговете да бъдат екранирани. Ако изпращаме обикновен текст или искаме html таговете да бъдат екранирани, вместо това използваме {{message}}.

emailjs.send() е методът, който изпраща пощата до emailJS CDN. Както можете да видите в кода по-горе, той има три аргумента; (‘default_service’, ‘emailjs_article’, templateParams).

„default_service“ представлява услугата за електронна поща, която сте избрали, когато сте регистрирали своя акаунт в EmailJS.

„emailjs_article“ е идентификаторът на шаблона на шаблона, в който ще бъдат попълнени зададените от вас параметри на шаблона.

„templateParams“ са параметрите на шаблона, които дефинирахте по-рано.

Методът emailjs.send() връща обещание, което се регистрира в конзолата, ако имейлът е изпратен успешно или ако изпращането на имейл е неуспешно.

Това ни води до края на тази статия/урок, можете да зададете въпросите си по-долу и аз ще се опитам да отговоря на тях, доколкото е възможно.

P.S. Трябва да добавя, че не съм много сигурен, че този подход на EmailJS е много безопасен, тъй като вашето потребителско име е изложено на Вселената във вашето маркиране.

P.S. Това е първата ми статия с JavaScript, така че може да изглежда малко грозна, но моля, ръкопляскайте много, за да ме насърчите 😄.