整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
者 | Mateusz Iwaniuk
譯者 | 明明如月，責編 | 夕顏
出品 | CSDN（ID：CSDNnews）
文章配套代碼: https://github.com/iwaniukooo11/email-sender
現(xiàn)在，即使是創(chuàng)建最基本的網(wǎng)站，程序員也必須使用現(xiàn)代的功能和技術(shù)。甚至像為你的朋友創(chuàng)建簡單的投資組合這樣的基本項目也可能涉及到一些問題，比如從聯(lián)系人表單接收數(shù)據(jù)。有很多方法可以讀取這些數(shù)據(jù)。你可以將表單與數(shù)據(jù)庫連接起來，然后從數(shù)據(jù)庫中讀取傳入的消息來實現(xiàn)功能，但這樣做會給不懂技術(shù)的客戶造成困難。
你為什么不通過發(fā)送電子郵件傳輸信息？
不使用數(shù)據(jù)庫就能接收到傳入的消息，絕對是最佳選擇，也是最方便用戶的選擇。但問題來了—如何實現(xiàn)呢？你可能認為需要使用某種后端語言。
實際上，你不必使用任何如 php 或 python 這種后端語言，你甚至不需要用到 node.js！你需要的就是一個簡單的EmailJS 庫。
本文將介紹下面兩個重要功能:
配置 emailjs 帳戶
使用 JS 發(fā)送電子郵件
請注意，在我的項目中，我使用了 gulp 和 webpack，我在 src 文件夾存放源碼，dist 存放最終發(fā)布版本的代碼。
我將分 5 個步驟向你展示如何從頭開始構(gòu)建電子郵件發(fā)送器。
步驟1-用 HTML 創(chuàng)建表單
首先需要創(chuàng)建一個 HTML 表單。你不必放置像 required 或 max 這種驗證屬性，因為稍后，preventDefault 函數(shù)將在你的提交事件上運行，它會讓這些屬性的處理失效。
表單中最重要的是為每個輸入放置 name 屬性，后面會用到。
我的非常簡單的表單是這樣的:
src/html/index.html
<form class="form"><input name='name' type="text" placeholder="Your name..." class="form__input" /><input name='topic' type="text" placeholder="Topic..." class="form__input" /><textarea name='message' type="text" placeholder="Your Message..." class="form__input" ></textarea><input type="submit" value="send" class="form__input form__input--button"></form>
步驟2-注冊成為 email 用戶
要配置你的電子郵件，你必須注冊電子郵件服務(wù)。別擔心—使用這個網(wǎng)站非常方便和省時。
登入后，系統(tǒng)會詢問你的電子郵件服務(wù)，它位于個人電子郵件服務(wù)區(qū)（personal email service）。在我的例子中，我選擇了 gmail。
然后，你需要連接你的 gmail 帳戶。這將用來發(fā)送電子郵件給你客戶。例如，如果你關(guān)聯(lián)了 xyz@gmail.com 賬戶，你后續(xù)發(fā)送的郵件都將從這個郵箱發(fā)出。所以不要擔心“ Send email on your behalf” 這個授權(quán)信息—這正是你需要的！
連接完 gmail 賬戶后，點擊添加服務(wù)（add service）按鈕。
步驟3-創(chuàng)建郵件模板
如果你已經(jīng)成功連接了你的 gmail 賬戶，你現(xiàn)在應(yīng)該在信息中心中。現(xiàn)在需要創(chuàng)建電子郵件模板了。
切換到電子郵件模板卡，并單擊創(chuàng)建一個新的模板（create a new template）。界面非常友好，所以創(chuàng)建模板不會有任何問題。
你可以選擇模板的名稱和 ID。我稱之為“我的神奇模板（my_amazing_template）”。
接下來，你必須指定郵件的內(nèi)容。
模板的變量值來自 input 中的 `name` 屬性。你已將變量插入`{{{}}}`符號中。
不要忘記在“收件人”部分 (右側(cè)) 添加電子郵件地址。你的電子郵件將被發(fā)送到該電子郵件地址上。截圖中的收件人郵箱是我自己的公司郵箱。
這是我的簡單模板，它使用來自 HTML 表單里的 3 個變量。我還指定了接收電子郵件的主題。
步驟4-保存 API 密鑰
這部分沒什么特別的。Emailjs 共享授權(quán) API 密鑰，將在發(fā)送電子郵件時使用。當然，放這些鑰匙最好的地方是`.env` 配置。但是因為我使用的是簡單的靜態(tài)文件，我不想使用服務(wù)器配置，所以我將它們保存在 apikeys 文件中，然后再將它們導(dǎo)入。
你的 USER_ID 位于 Account > API Keys 菜單下。
TEMPLATE_ID 位于模板的標題下面。
這是我基于不存在的 keyssrc / js / apikeys. js 的示例配置.
src/js/apikeys.js
export default {USER_ID :'user_DPUd-rest-of-my-id',TEMPLATE_ID:'my_amazing_template'}
如果需要將源碼發(fā)布到 GITHUB，不要忘記將 APIKEYS 文件添加到 .GITIGNORE文件中
現(xiàn)在是該項目最后也是最重要的部分的了?，F(xiàn)在我們必須使用 javascript 發(fā)送電子郵件。
首先，你必須下載 emailjs 包。
npm i emails-com然后，轉(zhuǎn)到 js 文件，導(dǎo)入庫和 apikeys。
src/js/main.js
import emailjs from 'emailjs-com'import apiKeys from './apikeys'
現(xiàn)在是編寫發(fā)送電子郵件功能的時候了
src/js/main.js
const sendEmail = e => {e.preventDefaultemailjs.sendForm('gmail', apiKeys.TEMPLATE_ID, e.target, apiKeys.USER_ID).then(result => {console.log(result.text)},error => {console.log(error.text)})}
sendForm 函數(shù)有4個參數(shù):
你的電子郵件的 ID，在這里:
TEMPLATE_ID 來自 apikey 文件,
事件對象來自你的表單提交
USER_ID 來自 apikey 文件,
最后，查找表單并添加提交事件監(jiān)聽器：
src/js/main.js
const form = document.querySelector('.form')form.addEventListener('submit',sendEmail)
正如我前面提到的，由于 `preventDefault` 函數(shù)，屬性驗證將無法工作。你必須使用 JS 自己進行驗證和清除輸入。
以上就是全部內(nèi)容，接下來讓我們測試一下。
填寫頁面上的表單并發(fā)送。
我收到電子郵件，內(nèi)容正是根據(jù)我們的模板和表單數(shù)據(jù)渲染出來的。
通過上圖可以看出，所有的變量的值都填充到了正確的位置上。
通過本文的介紹你會發(fā)現(xiàn)用 JS 發(fā)送郵件并非難事。
使用 emailjs，你可以簡單的方式發(fā)送電子郵件。
我相信你未來的用戶會很高興收到來自他們網(wǎng)頁上表單填寫數(shù)據(jù)的t郵件，相信本文對你有幫助。
這篇文章的配套代碼在這里: https://github.com/iwaniukooo11/email-sender
原文鏈接：
https://dev.to/iwaniukooo11/send-e-mails-directly-from-front-end-with-js-5d7d
本文為CSDN翻譯文章，轉(zhuǎn)載請注明出處。
?我們想研發(fā)一個機器學習框架，6 個月后失敗了
?生產(chǎn)型機器學習已經(jīng)沒那么困難了？
?視頻 | 你不知道的"開源"60年秘史
?GitHub標星10,000+，Apache項目ShardingSphere的開源之路
?阿里技術(shù)專家告訴你，如何畫出優(yōu)秀的架構(gòu)圖？
?加拿大API平臺如何做到30%為中國明星項目？創(chuàng)業(yè)老兵這樣說……
期以來，很多用戶可能會認為以郵件為載體的攻擊中，需要重點關(guān)注的應(yīng)該是可執(zhí)行文件以及.dll文件，但根據(jù)專注于郵件安全領(lǐng)域的美國Barracuda Networks調(diào)查發(fā)現(xiàn)，在網(wǎng)絡(luò)攻擊中，攻擊者使用的HTML附件是最多的，在其掃描到的威脅中占比達到了21%，其數(shù)量超過排名第二的TEXT（9%）兩倍以上。
對于這一結(jié)果，Barracuda Networks方面表示，由于HTML附件本身并不是惡意的，攻擊者并不會在附件中包含惡意軟件，而是使用托管在其他地方的Java腳本庫進行多重重定向，因此這類攻擊很難檢測到。
在同類網(wǎng)絡(luò)攻擊中，HTML附件的使用越來越多，因為用戶和系統(tǒng)都很難識別攻擊。在Barracuda提供的示例中，HTML附件本身并不是惡意的，但最終會將用戶誘導(dǎo)到一個惡意站點。
如前文所述，HTML附件以21%的比例在BarracudaNetworks掃描到的威脅中排名第一，除了排名第二的TEXT（9%）之外，其他類型的排序大體如下供參考:
XHTML (4%)
二進制文件(0.3%)
腳本(0.08%)
Rtf (0.04%)
MS Office (0.03%)
PDF (0.009%)
Barracuda發(fā)現(xiàn)，攻擊者一直在用戶定期收到的電子郵件中嵌入惡意HTML文件，比如報告鏈接，而實際上這是一封帶有有害URL的網(wǎng)絡(luò)釣魚郵件。通過這種方法，攻擊者不再需要在電子郵件正文中添加鏈接，從而更容易被發(fā)現(xiàn)，相比之下，HTML附件的方式則可以更快地繞過反垃圾郵件和反病毒策略。
當這些文件被打開時，HTML使用Java腳本將用戶發(fā)送到第三方機器，要求用戶輸入他們的個人憑證來登錄或下載一個惡意軟件文件。這種方法也不需要攻擊者創(chuàng)建一個虛假網(wǎng)站來進行此類攻擊，而是可以直接創(chuàng)建一個嵌入在附件中的釣魚表單，將釣魚網(wǎng)站作為附件而不是鏈接發(fā)送出去。
Barracuda強調(diào)了三個主要的技巧來幫助用戶避免成為這類攻擊的受害者:
1、確保自己正在使用的電子郵件保護解決方案可以掃描和阻止惡意HTML附件。
2、對用戶進行一定的安全教育，告訴他們?nèi)绾巫R別和報告潛在的惡意HTML附件。
3、如果這類惡意郵件攻擊確實發(fā)生了，那么務(wù)必提前準備好事后的補救措施及相關(guān)工具。
在企業(yè)方面，投資于更強的電子郵件檢測和響應(yīng)能力的解決方案可以防止這種惡意軟件進入企業(yè)內(nèi)用戶的收件箱。在個人方面，如果其中一封電子郵件進入了收件箱，那么通過零信任模型，在組織的IT部門驗證它是安全的之前不要點擊任何東西，這樣可以為用戶和企業(yè)節(jié)省大量的麻煩。
結(jié)不易： 請轉(zhuǎn)發(fā)一下，收藏一下，謝謝
直接看發(fā)送效果
是不是圖片 html 附件都實現(xiàn)了啊
記下你的授權(quán)碼，別給別人看到哦
然后咱們上代碼：
填寫配置項目，郵箱，授權(quán)碼 ，發(fā)送人郵箱等等
在郵件正文中使用圖片：
是不是很方便啊？ 很簡單吧？
感覺代碼太多了，那么可以直接存成模板，想什么時候用直接拿來用就可以了
辛苦碼字不易，請大家收藏轉(zhuǎn)發(fā)一下
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
