整合營(yíng)銷(xiāo)服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢(xún)熱線(xiàn):

          僅需 5 步,用 JavaScript 直接通過(guò)前端發(fā)送電子郵件

          者 | Mateusz Iwaniuk

          譯者 | 明明如月,責(zé)編 | 夕顏

          出品 | CSDN(ID:CSDNnews)

          文章配套代碼: https://github.com/iwaniukooo11/email-sender

          現(xiàn)在,即使是創(chuàng)建最基本的網(wǎng)站,程序員也必須使用現(xiàn)代的功能和技術(shù)。甚至像為你的朋友創(chuàng)建簡(jiǎn)單的投資組合這樣的基本項(xiàng)目也可能涉及到一些問(wèn)題,比如從聯(lián)系人表單接收數(shù)據(jù)。有很多方法可以讀取這些數(shù)據(jù)。你可以將表單與數(shù)據(jù)庫(kù)連接起來(lái),然后從數(shù)據(jù)庫(kù)中讀取傳入的消息來(lái)實(shí)現(xiàn)功能,但這樣做會(huì)給不懂技術(shù)的客戶(hù)造成困難。

          你為什么不通過(guò)發(fā)送電子郵件傳輸信息?

          不使用數(shù)據(jù)庫(kù)就能接收到傳入的消息,絕對(duì)是最佳選擇,也是最方便用戶(hù)的選擇。但問(wèn)題來(lái)了—如何實(shí)現(xiàn)呢?你可能認(rèn)為需要使用某種后端語(yǔ)言。

          實(shí)際上,你不必使用任何如 php 或 python 這種后端語(yǔ)言,你甚至不需要用到 node.js!你需要的就是一個(gè)簡(jiǎn)單的EmailJS 庫(kù)。

          本文將介紹下面兩個(gè)重要功能:

          • 配置 emailjs 帳戶(hù)

          • 使用 JS 發(fā)送電子郵件

          請(qǐng)注意,在我的項(xiàng)目中,我使用了 gulp 和 webpack,我在 src 文件夾存放源碼,dist 存放最終發(fā)布版本的代碼。

          我將分 5 個(gè)步驟向你展示如何從頭開(kāi)始構(gòu)建電子郵件發(fā)送器。

          步驟1-用 HTML 創(chuàng)建表單

          首先需要?jiǎng)?chuàng)建一個(gè) HTML 表單。你不必放置像 required 或 max 這種驗(yàn)證屬性,因?yàn)樯院螅琾reventDefault 函數(shù)將在你的提交事件上運(yùn)行,它會(huì)讓這些屬性的處理失效。

          表單中最重要的是為每個(gè)輸入放置 name 屬性,后面會(huì)用到。

          我的非常簡(jiǎn)單的表單是這樣的:

          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-注冊(cè)成為 email 用戶(hù)

          要配置你的電子郵件,你必須注冊(cè)電子郵件服務(wù)。別擔(dān)心—使用這個(gè)網(wǎng)站非常方便和省時(shí)。

          登入后,系統(tǒng)會(huì)詢(xún)問(wèn)你的電子郵件服務(wù),它位于個(gè)人電子郵件服務(wù)區(qū)(personal email service)。在我的例子中,我選擇了 gmail。

          然后,你需要連接你的 gmail 帳戶(hù)。這將用來(lái)發(fā)送電子郵件給你客戶(hù)。例如,如果你關(guān)聯(lián)了 xyz@gmail.com 賬戶(hù),你后續(xù)發(fā)送的郵件都將從這個(gè)郵箱發(fā)出。所以不要擔(dān)心“ Send email on your behalf” 這個(gè)授權(quán)信息—這正是你需要的!

          連接完 gmail 賬戶(hù)后,點(diǎn)擊添加服務(wù)(add service)按鈕。

          步驟3-創(chuàng)建郵件模板

          如果你已經(jīng)成功連接了你的 gmail 賬戶(hù),你現(xiàn)在應(yīng)該在信息中心中。現(xiàn)在需要?jiǎng)?chuàng)建電子郵件模板了。

          切換到電子郵件模板卡,并單擊創(chuàng)建一個(gè)新的模板(create a new template)。界面非常友好,所以創(chuàng)建模板不會(huì)有任何問(wèn)題。

          你可以選擇模板的名稱(chēng)和 ID。我稱(chēng)之為“我的神奇模板(my_amazing_template)”。

          接下來(lái),你必須指定郵件的內(nèi)容。

          模板的變量值來(lái)自 input 中的 `name` 屬性。你已將變量插入`{{{}}}`符號(hào)中。

          不要忘記在“收件人”部分 (右側(cè)) 添加電子郵件地址。你的電子郵件將被發(fā)送到該電子郵件地址上。截圖中的收件人郵箱是我自己的公司郵箱。

          這是我的簡(jiǎn)單模板,它使用來(lái)自 HTML 表單里的 3 個(gè)變量。我還指定了接收電子郵件的主題。

          步驟4-保存 API 密鑰

          這部分沒(méi)什么特別的。Emailjs 共享授權(quán) API 密鑰,將在發(fā)送電子郵件時(shí)使用。當(dāng)然,放這些鑰匙最好的地方是`.env` 配置。但是因?yàn)槲沂褂玫氖呛?jiǎn)單的靜態(tài)文件,我不想使用服務(wù)器配置,所以我將它們保存在 apikeys 文件中,然后再將它們導(dǎo)入。

          你的 USER_ID 位于 Account > API Keys 菜單下。

          TEMPLATE_ID 位于模板的標(biāo)題下面。

          這是我基于不存在的 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文件中

          步驟5-發(fā)送電子郵件

          現(xiàn)在是該項(xiàng)目最后也是最重要的部分的了。現(xiàn)在我們必須使用 javascript 發(fā)送電子郵件。

          首先,你必須下載 emailjs 包。

          npm i emails-com

          然后,轉(zhuǎn)到 js 文件,導(dǎo)入庫(kù)和 apikeys。

          src/js/main.js

          import emailjs from 'emailjs-com'import apiKeys from './apikeys'

          現(xiàn)在是編寫(xiě)發(fā)送電子郵件功能的時(shí)候了

          src/js/main.js

          const sendEmail = e => { e.preventDefault

          emailjs .sendForm('gmail', apiKeys.TEMPLATE_ID, e.target, apiKeys.USER_ID) .then( result => { console.log(result.text) }, error => { console.log(error.text) } )}

          sendForm 函數(shù)有4個(gè)參數(shù):

          你的電子郵件的 ID,在這里:

          TEMPLATE_ID 來(lái)自 apikey 文件,

          事件對(duì)象來(lái)自你的表單提交

          USER_ID 來(lái)自 apikey 文件,

          最后,查找表單并添加提交事件監(jiān)聽(tīng)器:

          src/js/main.js

          const form = document.querySelector('.form')form.addEventListener('submit',sendEmail)

          正如我前面提到的,由于 `preventDefault` 函數(shù),屬性驗(yàn)證將無(wú)法工作。你必須使用 JS 自己進(jìn)行驗(yàn)證和清除輸入。

          以上就是全部?jī)?nèi)容,接下來(lái)讓我們測(cè)試一下。

          填寫(xiě)頁(yè)面上的表單并發(fā)送。

          我收到電子郵件,內(nèi)容正是根據(jù)我們的模板和表單數(shù)據(jù)渲染出來(lái)的。

          通過(guò)上圖可以看出,所有的變量的值都填充到了正確的位置上。

          總結(jié)

          通過(guò)本文的介紹你會(huì)發(fā)現(xiàn)用 JS 發(fā)送郵件并非難事。

          使用 emailjs,你可以簡(jiǎn)單的方式發(fā)送電子郵件。

          我相信你未來(lái)的用戶(hù)會(huì)很高興收到來(lái)自他們網(wǎng)頁(yè)上表單填寫(xiě)數(shù)據(jù)的t郵件,相信本文對(duì)你有幫助。

          這篇文章的配套代碼在這里: https://github.com/iwaniukooo11/email-sender

          原文鏈接:

          https://dev.to/iwaniukooo11/send-e-mails-directly-from-front-end-with-js-5d7d

          本文為CSDN翻譯文章,轉(zhuǎn)載請(qǐng)注明出處。

          ?我們想研發(fā)一個(gè)機(jī)器學(xué)習(xí)框架,6 個(gè)月后失敗了

          ?生產(chǎn)型機(jī)器學(xué)習(xí)已經(jīng)沒(méi)那么困難了?

          ?視頻 | 你不知道的"開(kāi)源"60年秘史

          ?GitHub標(biāo)星10,000+,Apache項(xiàng)目ShardingSphere的開(kāi)源之路

          ?阿里技術(shù)專(zhuān)家告訴你,如何畫(huà)出優(yōu)秀的架構(gòu)圖?

          ?加拿大API平臺(tái)如何做到30%為中國(guó)明星項(xiàng)目?創(chuàng)業(yè)老兵這樣說(shuō)……

          期以來(lái),很多用戶(hù)可能會(huì)認(rèn)為以郵件為載體的攻擊中,需要重點(diǎn)關(guān)注的應(yīng)該是可執(zhí)行文件以及.dll文件,但根據(jù)專(zhuān)注于郵件安全領(lǐng)域的美國(guó)Barracuda Networks調(diào)查發(fā)現(xiàn),在網(wǎng)絡(luò)攻擊中,攻擊者使用的HTML附件是最多的,在其掃描到的威脅中占比達(dá)到了21%,其數(shù)量超過(guò)排名第二的TEXT(9%)兩倍以上。

          風(fēng)險(xiǎn)難以被識(shí)別是HTML附件在攻擊者眼中的最大優(yōu)勢(shì)

          對(duì)于這一結(jié)果,Barracuda Networks方面表示,由于HTML附件本身并不是惡意的,攻擊者并不會(huì)在附件中包含惡意軟件,而是使用托管在其他地方的Java腳本庫(kù)進(jìn)行多重重定向,因此這類(lèi)攻擊很難檢測(cè)到。

          在同類(lèi)網(wǎng)絡(luò)攻擊中,HTML附件的使用越來(lái)越多,因?yàn)橛脩?hù)和系統(tǒng)都很難識(shí)別攻擊。在Barracuda提供的示例中,HTML附件本身并不是惡意的,但最終會(huì)將用戶(hù)誘導(dǎo)到一個(gè)惡意站點(diǎn)。

          如前文所述,HTML附件以21%的比例在BarracudaNetworks掃描到的威脅中排名第一,除了排名第二的TEXT(9%)之外,其他類(lèi)型的排序大體如下供參考:

          XHTML (4%)

          二進(jìn)制文件(0.3%)

          腳本(0.08%)

          Rtf (0.04%)

          MS Office (0.03%)

          PDF (0.009%)

          Barracuda發(fā)現(xiàn),攻擊者一直在用戶(hù)定期收到的電子郵件中嵌入惡意HTML文件,比如報(bào)告鏈接,而實(shí)際上這是一封帶有有害URL的網(wǎng)絡(luò)釣魚(yú)郵件。通過(guò)這種方法,攻擊者不再需要在電子郵件正文中添加鏈接,從而更容易被發(fā)現(xiàn),相比之下,HTML附件的方式則可以更快地繞過(guò)反垃圾郵件和反病毒策略。

          當(dāng)這些文件被打開(kāi)時(shí),HTML使用Java腳本將用戶(hù)發(fā)送到第三方機(jī)器,要求用戶(hù)輸入他們的個(gè)人憑證來(lái)登錄或下載一個(gè)惡意軟件文件。這種方法也不需要攻擊者創(chuàng)建一個(gè)虛假網(wǎng)站來(lái)進(jìn)行此類(lèi)攻擊,而是可以直接創(chuàng)建一個(gè)嵌入在附件中的釣魚(yú)表單,將釣魚(yú)網(wǎng)站作為附件而不是鏈接發(fā)送出去。

          如何保護(hù)系統(tǒng)免受惡意HTML附件侵?jǐn)_

          Barracuda強(qiáng)調(diào)了三個(gè)主要的技巧來(lái)幫助用戶(hù)避免成為這類(lèi)攻擊的受害者:

          1、確保自己正在使用的電子郵件保護(hù)解決方案可以?huà)呙韬妥柚箰阂釮TML附件。

          2、對(duì)用戶(hù)進(jìn)行一定的安全教育,告訴他們?nèi)绾巫R(shí)別和報(bào)告潛在的惡意HTML附件。

          3、如果這類(lèi)惡意郵件攻擊確實(shí)發(fā)生了,那么務(wù)必提前準(zhǔn)備好事后的補(bǔ)救措施及相關(guān)工具。

          在企業(yè)方面,投資于更強(qiáng)的電子郵件檢測(cè)和響應(yīng)能力的解決方案可以防止這種惡意軟件進(jìn)入企業(yè)內(nèi)用戶(hù)的收件箱。在個(gè)人方面,如果其中一封電子郵件進(jìn)入了收件箱,那么通過(guò)零信任模型,在組織的IT部門(mén)驗(yàn)證它是安全的之前不要點(diǎn)擊任何東西,這樣可以為用戶(hù)和企業(yè)節(jié)省大量的麻煩。

          結(jié)不易: 請(qǐng)轉(zhuǎn)發(fā)一下,收藏一下,謝謝

          直接看發(fā)送效果

          是不是圖片 html 附件都實(shí)現(xiàn)了啊

          首先你要開(kāi)啟 POP3/IMAP/SMTP 服務(wù),以騰訊郵箱為例

          記下你的授權(quán)碼,別給別人看到哦

          然后咱們上代碼:

          導(dǎo)入發(fā)送郵件用到庫(kù):

          填寫(xiě)配置項(xiàng)目,郵箱,授權(quán)碼 ,發(fā)送人郵箱等等

          郵件正文

          在郵件正文中使用圖片:

          向郵件中添加附件:

          開(kāi)始發(fā)送服務(wù),噠噠噠

          發(fā)送效果:

          是不是很方便啊? 很簡(jiǎn)單吧?

          感覺(jué)代碼太多了,那么可以直接存成模板,想什么時(shí)候用直接拿來(lái)用就可以了

          辛苦碼字不易,請(qǐng)大家收藏轉(zhuǎn)發(fā)一下

          源碼 請(qǐng)私信小編 回復(fù) 010 即可獲取源碼


          主站蜘蛛池模板: 色婷婷一区二区三区四区成人网 | 精品一区二区三区在线观看l| 亚洲av无码片vr一区二区三区 | 国产精品女同一区二区久久| 一区精品麻豆入口| 亚洲国产av一区二区三区| 一区二区三区免费在线视频| 亚洲国产欧美一区二区三区| 国产午夜精品一区二区三区极品 | 中文字幕av人妻少妇一区二区 | 亚洲一区二区女搞男| 国产vr一区二区在线观看| 毛片一区二区三区| 老湿机一区午夜精品免费福利| 国产精品99无码一区二区| 鲁丝丝国产一区二区| 国产在线精品一区免费香蕉| 久久久久人妻一区二区三区vr | 日韩一区二区在线免费观看| 精品成人av一区二区三区| 日韩国产一区二区| 高清一区二区三区| 国产高清在线精品一区小说 | 国产一区二区三区免费观在线 | 无码国产精品一区二区免费16| 日韩精品一区二区三区中文精品| 国精产品一区一区三区MBA下载| 麻豆果冻传媒2021精品传媒一区下载| 亚洲午夜在线一区| 国产免费一区二区三区免费视频| 欲色影视天天一区二区三区色香欲| 精品国产免费观看一区| 动漫精品专区一区二区三区不卡| 亚洲一区日韩高清中文字幕亚洲| 天堂Aⅴ无码一区二区三区| 蜜桃传媒一区二区亚洲AV| 国产品无码一区二区三区在线| 国产伦精品一区二区| 亚洲香蕉久久一区二区| 国产精品无码一区二区三区毛片| 国产在线观看精品一区二区三区91|