Feathers Mailer 모듈을 사용하여 멋진 트랜잭션 이메일 생성

19393 단어 feathersjswebdevbeginnersjavascript
FeathersJS는 실시간 응용 프로그램과 RESTAPI에 사용되는 강력한 웹 응용 프로그램 프레임워크입니다.VP 단계를 넘어서 클라이언트 영역을 확장할 준비가 되어 있을 때 가장 낮은 실행 가능한 제품(MVP) 백엔드로 확장할 수 있습니다.
Feathers는 프로젝트 구축을 신속하게 하기 위해 command-line tool 를 제공하고 프로젝트 수요를 충족시키기 위해 생성기를 제공합니다.
Feather로 개발한 첫 번째 기능 중 하나는 트랜잭션 이메일입니다.
이 글은 디자인 기술이 없어도 예쁜 템플릿 이메일을 만드는 것을 포함한다.다양한 도구의 조합을 통해 플랫폼을 위한 전문 전자메일을 쉽게 개발할 수 있습니다.
이 강좌의 코드 라이브러리는 내가 전에 쓴 문장을 바탕으로 할 것이다.이 시리즈의 끝에 전자 메일 기능은 계정 관리 및 등록의 일부로 존재하지만, 전자 메일은 무료한 텍스트 전자메일입니다. 예를 들어 Click link here.본고에서 저는 다음과 같은 조합을 이용하여 문자 전자메일을 아름다운 브랜드 전자메일로 전환할 것입니다.
  • feathers-mailer
  • Really Good Emails
  • html-to-pug
  • Pug

    • 거푸집


    User Roles & Management Repo부터 나는 그것을 모델로 삼아 새로운 환매 협의를 만들었다.만약 당신이 상술한 환매 협의creating a copy 전에 따라가고 싶다면, 환영합니다.최종 환매는 here에 있다.
    이 리셋에는 사용자 로그인, 비밀번호 재설정, 계정 등록 기능이 포함되어 있으며, 이 모든 기능은 터치할 때 전자메일을 보냅니다.이 문장에서 나는 상세하게 소개하지 않겠지만, 만약 당신이 더 많은 것을 알고 싶다면, 나의 문장을 읽어 주십시오. 그것은 이 문장을 더욱 상세하게 소개할 것입니다.

    프로젝트 특징


    이 프로젝트는 feathers-authentication-management를 이용하여 계좌 관리 기능을 제공한다.전자 우편을 보내기 위한 전자 우편 서비스도 만들었다.

    e-메일 서비스


    전자 우편 서비스는 상당히 간단하다.나는 docs의 설명에 따라 설정한다.feathers generate service, 이름은 "email"입니다.
    이것은 이메일이라는 서비스를 구축했다.그리고 서비스 파일에mailer 설정을 정의했습니다.
    module.exports = function (app) {
  // Initialize our service with any options it requires
  app.use(
    '/email',
    Mailer(
      smtpTransport({
        host: app.get('smtp_host'),
        secure: true,
        auth: {
          user: app.get('smtp_user'),
          pass: app.get('smtp_pw'),
        },
      })
    )
  );
};
    app.get('variable') 함수는 구성 파일에서 값을 추출합니다.자세한 내용은 FeathersJS configuration docs 을 참조하십시오.
    전자 우편 서비스는feathersmailer 모듈을 사용합니다. 이 모듈은 nodemailer 라이브러리의 포장기이기 때문에 같은 전송 옵션을 지원합니다.이 프로젝트에 대해 저는 AWS SES transport 를 사용했지만 지원되는 transport options 또는 SMTP options 을 사용하여 귀하의 서비스를 설정할 수 있습니다.
    AWS를 구성하려면 AWS 계정에 다음 구성 키가 필요합니다.
    {
  "smtp_user": "aws_smtp_user",
  "smtp_pw": "aws_smtp_pw",
  "smtp_host": "aws_smtp_host"
}
    ${env}.json 프로필 또는 default.json 프로필에 추가할 수 있습니다.

    이메일 보내기


    Feathers 인증 관리를 사용하면 요청한 작업에 따라 어떤 전자 메일을 보낼 것인지 정의할 수 있습니다.총 6개의 조작이 있습니다:resendVerifysignup,verifysignup,sendResetPwd,resetPwd,passwordChange와identityChange.
    이것들은 모두 notifier function에서 정의되고 authManagement 서비스에 전달됩니다.다음은 암호 재설정 작업을 보내는 알림 프로그램 함수의 발췌문입니다.
    module.exports = function (app) {
  // generates the token link
  function getLink(type, hash) {
    const url = app.get('client_url') + '/' + type + '?token=' + hash;
    return url;
  }
  // sends the email using an email service
  function sendEmail(email) {
    return app
      .service('email')
      .create(email)
      .then(function (result) {
        console.log('Sent email', result);
      })
      .catch((err) => {
        console.log('Error sending email', err);
      });
  }
  const FROM_EMAIL = app.get('from_email');

  return {
    notifier: function (type, user) {
      let tokenLink;
      let email;
      switch (type) {
        // user clicks link from email to verify their email
        case 'sendResetPwd':
          tokenLink = getLink('reset-password', user.resetToken);
          email = {
            from: FROM_EMAIL,
            to: user.email,
            subject: 'Reset Password',
            html: `<html><b>Reset Password</b>: ${tokenLink}</html>`,
          };
          return sendEmail(email);
      }
    },
  };
};
    알림 기능은 우리가 곧 만들 브랜드 이메일을 보내기를 원하는 곳이다.

    전자 메일 변환


    지금까지 코드는 일부 내용을 포함하는 간단한 HTML 문자열만 보냈다.우리는 그것이 더 많이 하기를 바란다.사용자를 위한 맞춤형 HTML 이메일을 보내길 바랍니다.이 HTML을 생성하기 위해서, 우리는 변수를 삽입하고 사용자별로 맞춤형으로 설정할 수 있도록 템플릿 언어를 사용할 것입니다.
    나는 Pug 를 사용했지만, 당신이 원한다면, 다른 템플릿 언어를 사용하는 것을 환영합니다.이 템플릿은 HTML로 컴파일되고 전자 메일로 보낼 수 있습니다. 현재 텍스트 HTML 문자열을 제공합니다.
    서버 디렉토리에 Pug 설치:npm i pug --savePug는 HTML보다 더 간결하고 코드 블록이 필요 없습니다.그것은 내용을 제공하기 전에 요소 유형을 설명하는 데 의존한다.
    살펴보기:
    p Welcome #{name}! You're now registered for #{event}.
    템플릿을 컴파일하면 다음과 같은 결과가 나타납니다.
    <p>Welcome Sarah! You're now registered for Fullstack Javascript.</p>
    코드 블록을 사용하여 HTML 태그를 생성할 수도 있습니다.
    -
  var list = ["Apples", "Bananas", "Oranges",
          "Kiwis", "Jackfruit", "Kumquats"]
each item in list
  li= item
    결과:
    <li>Apples</li>
<li>Bananas</li>
<li>Oranges</li>
<li>Kiwis</li>
<li>Jack</li>
<li>Kumquats</li>
    docs를 보고 그것의 모든 기능을 보세요.

    전자 메일 템플릿


    필요한 것은 아니지만 디자인 시간을 줄이기 위해 Really Good Emails 의 전자 우편 템플릿을 사용했습니다.나는 내가 좋아하는 디자인을 쉽게 조정하고 내가 사용하고 싶은 색깔/브랜드와 일치시킬 수 있다.e-메일 템플릿을 분류하여 원하는 템플릿과 일치하는 e-메일을 giveaways부터 account setup까지 쉽게 검색할 수 있습니다.
    일단 당신이 좋아하는 전자메일을 찾으면, 다른 곳으로 내보내서 사용하기 전에 그들의 사이트에서 실시간으로 그것을 수정할 수도 있다.
    이 프로젝트에 대해 나는 간단한 Password Reset Template을 사용할 것이다.

    HTML에서 파그까지


    일단 내가 자신의 브랜드에 따라 템플릿을 만들면 다른 도구를 사용하여 HTML을 파그로 컴파일할 수 있다HTML-to-Pug.HTML을 복사/붙여넣고, 삽살개를 출력합니다.빠르고 간단합니다!그것은 완벽하지는 않지만, 생성에 필요한 파그 코드의 대부분을 완성했다.

    나는 삽살개 코드를 새로운 템플릿 파일에 저장했는데, 이 파일은 auth 관리 폴더에 직접 끼워 넣었다.파그 코드는 /server/src/services/auth-management/templates/password-reset.pug 에서 찾을 수 있습니다.
    이제 나는 파그 템플릿 코드가 생기면 사용자 정의를 추가할 수 있다.
    이 항목에 대해 나는 간단함을 유지한다.제목을 변경하여 사용자 이름을 포함하고 리셋 링크를 추가하고 싶습니다.그래서 만약에 내가 자신의 계좌 비밀번호를 초기화하면 Reset your password Rachel를 볼 수 있다.
    pug 템플릿을 업데이트하여firstname 변수와 단추의 URL 링크를 포함합니다.
    Reset your password #{firstname}
...
...
a.Button-primary(href=url  ...)
    그런 다음 변수를 HTML 컴파일 함수에 제공하므로 새 알림 코드는 다음과 같습니다.
    case 'sendResetPwd': {
    tokenLink = getLink('reset-password', user.resetToken);
    // create the function to compile the pug template to HTML
    const pwReset = pug.compileFile(
      path.join(__dirname, 'templates', 'password-reset.pug')
    );
    email = {
      from: FROM_EMAIL,
      to: user.email,
      subject: 'Reset Password',
      // use the function and add in the variables required by the template. This will output customized HTML.
      html: pwReset({
        firstname: user.firstname,
        url: tokenLink
      }),
    };
    return sendEmail(email);
}
    이제 암호 재설정 요청을 보낼 때 다음 이메일을 받았습니다.

    그리고 나서 나는 다른 사무적인 전자메일에 대해 이 과정을 반복할 수 있고, 심지어는 자동 전자메일 활동도 만들 수 있다.
    이제 니 차례야.당신은 무엇을 창조할 것입니까?

    리소스 목록

  • FeathersJS
  • feathers-mailer
  • Really Good Emails
  • html-to-pug
  • Pug

    • 내가 뭘 놓쳤나?


    이것이 당신에게 어떤 작용을 하는지 알 수 있도록 평론을 남겨 주세요.모르는 점이 있으면 물어보세요.
    게임 패드에 유니티 파티 대화 장면의 메시지를 보내는 방법
    위챗 애플릿에서 여러 장의 사진을 동시에 업로드합니다.

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage