AIoT & Cloud & Edge & Machine Learning

【 Cloud 】使用 Azure Communication Service 寄送 Email ( JavaScript )

Archer

Jun 12, 2023 • 4 min read

Photo by Victoria Bragg / Unsplash

內容

學習目標
前置準備作業
建立服務所使用的名稱
建立與設定 Azure Communication Service
修改程式
測試與驗證

學習目標

如何透過 Azure Communication Service 與 JavaScript 寄送信件。

前置準備作業

已建立 Azure 帳號並能正常登入
- https://portal.azure.com/
已於電腦端安裝 Node.js
已於電腦端安裝 IDE，本範例使用 Visual Studio Code

建立服務所使用的名稱

屬性	名稱
Resource group	communication-rg
Communication Service	communication-svc-168
Email Communication Service	mail-communication-svc-168

建立與設定 Azure Communication Service

Step 1. 建立 Azure Communication Service

於搜尋框輸入 Communication Service > 點選 Communication Services 的搜尋結果

---2023-06-12---8.39.15

Step 2. 點選左上角 + Create 按鈕

---2023-06-12---8.42.32

Step 3. 輸入相關資訊

Resource group 欄位請選擇唯一且可識別的名稱。
Data location 欄位本範例選擇 United States。
Resource Name 欄位請選擇唯一且可識別的名稱。
以上資訊輸入完成後點選左下角的 Review + Create

---2023-06-12---8.44.21

---2023-06-12---8.47.48

Step 4. 確認相關資訊

確認完成後點選 Create

---2023-06-12---8.50.22

Step 5. 建立過程中

---2023-06-12---8.51.46

Step 6. 建立完成，點選 Go to resource

---2023-06-12---8.52.59

Step 7. 建立 Domain

點選左側的 Email 中的 Domains > 再點選 Connect domain

---2023-06-12---8.55.37

點選 Add an email service

---2023-06-12---8.57.27

輸入相關資訊後，再點選 Review + create

---2023-06-12---8.59.03

---2023-06-12---8.59.44

確認相關資訊後，再點選 Create

---2023-06-12---9.01.40

建立過程中

---2023-06-12---9.02.46

建立完成，點選 Go to resource

---2023-06-12---9.04.24

設定 Domain
- 請依需求選擇使用 Azure subdomain 或 custom domain，本範例使用 Azure subdomain

---2023-06-12---9.07.53

domain 設定完成，請點選所建立完成的 domain

---2023-06-12---9.10.48

取得 MailFrom

---2023-06-12---9.12.42

回到所建立的 Azure Communication Service > 點選左側的 Email 中的 Domains > 再點選 Connect domain

---2023-06-12---8.55.37

選擇所建立的 Email Service

---2023-06-12---9.16.14

點選 Connect

---2023-06-12---9.17.39

連結完成

---2023-06-12---9.19.49

Step 8. 取得 Connection string

點選左側的 Keys

---2023-06-12---9.20.52

修改程式

Step 1. 下載程式

https://github.com/ArcherHuang/Azure_Communication_Service_Sample

Step 2. 建立環境變數

於專案的根目錄中新增 .env 並輸入下方內容
- 第 1 行的 AZURE_COMMUNICATION_SERVICE_CONNECTION_STRING 的等號後方請輸入 建立與設定 Azure Communication Service 段落的 Step 8 所取得的 Connection string
- 第 2 行的 AZURE_COMMUNICATION_SERVICE_SENDER_ADDRESS 的等號後方請輸入 建立與設定 Azure Communication Service 段落的 Step 7 所取得的 MailFrom

	AZURE_COMMUNICATION_SERVICE_CONNECTION_STRING="請填入 Azure Communication Service 的 Connection String"
	AZURE_COMMUNICATION_SERVICE_SENDER_ADDRESS="請填入 Azure Communication Service 的 MailFrom addresses"

view raw .env hosted with ❤ by GitHub

Step 3. 安裝相關套件

請使用終端機切換工作路徑到專案目錄中並輸入下方指令

npm i

測試與驗證

Step 1. 修改收件者相關資訊

請修改第 61 與 62 行成所要接收信件的人

	require('dotenv').config();
	const { EmailClient } = require("@azure/communication-email");

	const connectionString = process.env.AZURE_COMMUNICATION_SERVICE_CONNECTION_STRING;
	const emailClient = new EmailClient(connectionString);

	async function sendEmail(subject, plainText, receiver) {
	const message = {
	senderAddress: process.env.AZURE_COMMUNICATION_SERVICE_SENDER_ADDRESS,
	content: {
	subject,
	html: plainText,
	},
	recipients: {
	to: receiver,
	},
	};

	const poller = await emailClient.beginSend(message);
	const response = await poller.pollUntilDone();
	console.log(`response: ${JSON.stringify(response)}`);
	}

	const context = `<html>
	<body>
	<h2>What is Azure Communication Services?</h2>
	<table style="width:100%; border:1px solid black; font-size: 18px;">
	<tr style="background-color:#191970; color:white;">
	<th>服務</th>
	<th>說明</th>
	<th>支援格式</th>
	</tr>
	<tr>
	<td style="border:1px solid black;">Azure Communication Services</td>
	<td style="border:1px solid black;">
	Azure 通訊服務提供多頻道通訊 API，可新增語音、視訊、聊天、文字簡訊/手機簡訊、電子郵件等內容至您的所有應用程式
	[
	<a href="https://azure.microsoft.com/zh-tw/products/communication-services">
	Link
	</a>
	]。
	</td>
	<td style="border:1px solid black;">
	<ul>
	<li>Voice and Video Calling</li>
	<li>Rich Text Chat</li>
	<li>SMS</li>
	<li>Email</li>
	</ul>
	</td>
	</tr>
	</table>

	<p>Azure / 通訊服務 </p>

	</body>
	</html>`

	const receiver = [
	{
	address: "mmosconii@gmail.com",
	displayName: "Archer",
	},
	]
	sendEmail("我是主旨", context, receiver);