1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. js
  6. [教學] SMTPJS 利用JavaScript就可實現,線上寄送信件的功能
js 網頁開發 網頁設計

[教學] SMTPJS 利用JavaScript就可實現,線上寄送信件的功能

2020/03/09

梅問題-[教學] SMTPJS 利用JavaScript就可實現,線上寄送信件的機制
  現在大家應該很習慣使用,線上郵件平台,像Gmail、Yahoo、Hotmail…,直接開啟瀏覽器,立即就可收發信件,除此之外透過雲端的郵件平台,還有個好處,那就是信件永遠保留在雲端,因此走到那,都不用擔心信件存放在電腦中,而這也是雲端信件的好處。

  所以要讓使用者,透過線上就能與你聯絡,現在已很少使用mailto,而是採用線上表單的方式,當使用者填寫完畢按下送出時,立即就可信寄到你的信箱中,因此要能做到,線上即時寄送的機制,就會依賴PHPMailer這個套件,但要使用PHPMailer時,空間也需支援PHP才能運作,因此今天梅干要來分享個好東西,那就是SMTPJS,直接透過JS就能實現,信件寄送的機制,且完全無需PHP環境,一般的HTML空間就能實現,且在設定上也比PHPMailer還簡單喔!


SMTPJS
網站名稱: SMTPJS
網站連結:https://www.smtpjs.com/

Step1
首先,在進入SMTPJS的平台後,將畫面向上滾動,就會看到它的基本運作,沒錯就是將smtp.js引用到網頁中,再輸入Email的帳號與信件內容,相信看到這邊,各位心中一定會有疑慮,那不就等於信箱全部都被看光光了。
梅問題-[教學] SMTPJS 利用JavaScript就可實現,線上寄送信件的機制
Step2
因此在SMTPJS的平台中,有提供一個安全的機制,利用token的方式,來進行郵件主機與帳密的傳送,如此一來就不會將自己的Email帳密,顯示在網頁中啦!
梅問題-[教學] SMTPJS 利用JavaScript就可實現,線上寄送信件的機制
Step3
當點開來後,分別輸入郵件主機位置、帳號、密碼,以及Port,而在這地方,讓梅干卡了很久,因為當產生時,卻無法成功的將信件寄出,就在梅干與該平台,來回溝通多次後,才知道原來一開始梅干所用的密碼有,含了一些特殊文字,造成資料庫在讀取上的錯誤,以及在郵件主機的Port回傳時間太長,因此對方建議梅干改用25,由於是透過Javascript方式來進行傳送,所以多多少少有些風險,因此梅干建議使用較不重要的信箱,來當作發送的帳號。
梅問題-[教學] SMTPJS 利用JavaScript就可實現,線上寄送信件的機制
Step4
接著就會產生出一串編號,而這就是你的token溝通值。
梅問題-[教學] SMTPJS 利用JavaScript就可實現,線上寄送信件的機制
Step5
接著再把SMTPJS載入後,再把剛所產生的token值輸入,以及要收件者和主旨、內容,依續的輸入。
梅問題-[教學] SMTPJS 利用JavaScript就可實現,線上寄送信件的機制
Step6
完成後,開啟網頁,並點一下Send Email鈕,進行信件發送測試看看。
梅問題-[教學] SMTPJS 利用JavaScript就可實現,線上寄送信件的機制
Step7
當信件發送成功時,會看到OK的訊息,如果沒收到OK的話,也可將錯誤碼,傳給該平台進行詢問,而該平台的服務人員還蠻熱心的,會回覆相關的解決辦法。
梅問題-[教學] SMTPJS 利用JavaScript就可實現,線上寄送信件的機制
Step8
接著再到剛所設定的信箱中,就會看到剛所寄送過來的信件啦!同時SMTPJS也支援HTML的內容,因此也可使用HTML的內文,而SMTPJS還真是個好物,現在透過JS 也能實現線上寄送郵件的夢想啦!
梅問題-[教學] SMTPJS 利用JavaScript就可實現,線上寄送信件的機制