1-o-k6DTbzqIYI-y0tJ3814Q-wolfactive-949x475
31/05/2020

Send Mail Javascript không qua backend

Chào các bạn, hẳn các bạn cũng đã biết. Việc nhận thông tin khách hàng là một trong những việc cần thiết đối với một website. Vậy làm thế nào để chúng ta có thể nhận được thông tin khách hàng? Để làm được nó bạn có nhiều cách khác nhau. Tuy nhiên ở bài này WolfActive sẽ hướng dẫn các bạn nhận thông tin khách hàng bằng cách phổ biến nhất. Đó là Send Mail Javascript không qua backend

Để send mail javascript được điều trước tiên bạn cần có một tài khoản email để nhận thông tin khách hàng. Tuy nhiên bạn cần phải thiết lập một số cài đặt sau để sử dụng Gmail SMTP:

 1/ Quyền truy cập của ứng dụng kém an toàn (Allowed access in Gmail for less secure apps) tại google account setting

Google Setting Account Send Mail Image

2/ Tắt bảo mật hai lớp ( Disabled 2-step factor authentication ). Bạn vào đây để tắt bảo mật hai lớp.

Disable 2 step password Send Mail Image

Tạo Send Mail

Sau khi đã thực hiện xong hai bước trên, bạn vào đường dẫn smtpjs.com và download về. Khi download xong, bạn sẽ nhận được một file smtpjs.js bạn mở file lên và copy đoạn code trong đó đưa lên đầu file js của bạn.

smtpjs Send Mail Image

Hoặc bạn có thể sử dụng đoạn script CDN mà người ta cung cấp cho các bạn:

<script src="https://smtpjs.com/v3/smtp.js"></script>

Sau đó bạn vào trang trên bạn sẽ thấy có 2 đoạn code như sau:

Email.send({
    Host : "smtp.yourisp.com",
    Username : "username",
    Password : "password",
    To : 'them@website.com',
    From : "you@isp.com",
    Subject : "This is the subject",
    Body : "And this is the body"
}).then(
  message => alert(message)
);
và một đoạn Send Mail Security
Email.send({
    SecureToken : "C973D7AD-F097-4B95-91F4-40ABC5567812",
    To : 'info.wolfactive@gmail.com',
    From : "you@isp.com",
    Subject : "This is the subject",
    Body : "And this is the body"
}).then(
  message => alert(message)
);

So sánh 2 đoạn code Send Mail

Bây giờ mình sẽ giải thích điểm giống giau và khác nhau giữa 2 đoạn code trên. Kèm với một số chú thích cho các bạn.

Giống nhau: Đều có phần email người nhận ( To ), email người người gửi ( From ), tiêu đề ( subject ) và nội dung ( Body ).

Khác nhau: Các bạn chỉ cần nhìn qua là thấy được sự khác biệt rõ rệt giữa 2 đoạn code

Đối với đoạn code đầu tiên: Bạn sẽ thấy chúng ta cần phải khai báo 3 việc: host của bạn, tài khoản và mật khẩu mail của bạn. Như vậy chúng ta có thể hiểu được rằng: việc lộ email của bạn là không hề tốt và nó không được bảo mật. Do đó nó sẽ ảnh hưởng đến việc người khác sẽ vào mail và đánh cắp thông tin,…

Đối với đoạn code thứ 2: Chúng ta không cần phải khai báo host, tài khoản và mật khẩu email. Mà thay vào đó là nó sẽ là là một đoạn SecureToken. Đoạn Secure này có tác dụng mã hóa thông tin đăng nhập của bạn vào một tên miền để bảo vệ thông tin của bạn.

Vậy làm sao để lấy được đoạn Token?

Get token Sendmail image

Tại phần Secure của website smtpjs bạn sẽ thấy có nút Encrypt Your SMTP Credentials. Click vào và bạn điền đầy đủ thông tin bảng sau và click Generate security token:

Script Token Send Mail Image

Sau khi điền đầy đủ thông tin và click General thì website sẽ cung cấp cho bạn một đoạn mã token:

Token Sendmail Image

Copy và đưa vào phần SecureToken trong đoạn code trên. Sau khi bạn thực hiện xong thì hãy thử xem nhé. Kiểm tra email của bạn xem có nhận được mail hay không. Như vậy mình đã hướng dẫn cho các bạn về cách Send Mail Javascript rồi. Mọi thắc mắc hãy liên hệ fanpage tụi mình hoặc để lại comment + bài dưới phần comment nhé. 

Lưu ý khi bạn send mail javascript

Tài khoản mail các bạn để generate ra secure token là mail trung gian. Email To sẽ được nhận email gửi đến thông qua email đó. Các bạn có thể tùy chỉnh Email Form thành 1 email khác thay thế cho email đó. Nhưng thực chất email to được gửi thông qua email trung gian.

Trên đây là những chia sẻ Wolfactive gửi đến bạn, hy vọng thông tin về Send mail javascript này sẽ phần nào giúp bạn trong việc gửi mail mà không cần thông qua gửi data lên hệ thống.

Vui lòng chọn size trước khi đặt hàng (*)