DZone>Web Dev Zone>用Infobip建立一个短信应用程序
用Infobip建立一个短信应用程序
短信是一种与你的用户联系的强大方式。让我们使用云通信平台Infobip的SMS API建立一个 "每日趣闻 "的网络应用。
CORE -
1月27日，22 - Web Dev Zone -教程
喜欢 (2)
评论
保存
鸣叫
1.44K浏览次数
加入DZone社区，获得完整的会员体验。
短信是一种与用户联系的强大方式。世界各地的企业都使用SMS短信来发送约会提醒、发货通知、客户满意度调查等等。对于网速较慢的国家或客户，短信甚至可以作为应用内聊天功能等的一个可行的替代方案。
在这篇文章中，我们将展示SMS的力量，并展示它是多么容易上手。我们将一起建立一个 "每日趣事 "的网络应用，允许用户输入他们的电话号码来接收一个带有趣事的短信。我们将使用云通信平台Infobip的SMS API提供这一功能。
让我们开始吧!
演示应用程序概述
演示应用程序。输入你的电话号码来接收短信
我们的演示应用程序在后端使用Node.js和Express，在前端使用简单的HTML、CSS和JavaScript。
演示应用程序。短信成功发送
用户可以在这个最小的界面上输入他们的电话号码，然后点击提交按钮，就可以收到由Infobip API触发的短信。
带有企鹅趣事的短信
就这么简单!
让我们来看看我们是如何建立这个的。在本文的其余部分，我们将包括一些代码片段，但请随时查看GitHub repo的完整示例代码。
创建注册表格
让我们从注册表单的前端代码开始。这个表单是由典型的HTML表单元素构成的。<form>,<label>,<input>, 和<button> 。
HTML
<main>
<h1>Fun Facts SMS</h1>
<p>
Enter your phone number (including country code) to receive an SMS text.
</p>
<form id="phoneNumberForm">
<label for="phone" class="sr-only">
Phone Number (with country code)
</label>
<input
type="text"
name="phone"
id="phone"
placeholder="1 555 777 9999"
autocomplete="off"
/>
<button type="submit">Submit</button>
</form>
<div id="result" class="hidden"></div>
</main>
当用户输入他们的电话号码并提交表单时，JavaScript会向我们Node.js服务器上的一个端点发起一个API请求。
JavaScript
(function () {
const resultContainer = document.querySelector('#result');
const submitPhoneNumberForm = (e) => {
e.preventDefault();
const phoneNumber = e.target.phone.value.replace(/\D/g, '');
if (!phoneNumber) {
return;
}
fetch(`api/send-sms/${phoneNumber}`)
.then((response) => response.json())
.then(() => {
resultContainer.textContent = `Success! Sent text message to: ${phoneNumber}`;
resultContainer.classList.remove('hidden');
})
.catch(() => {
resultContainer.textContent = `Error. Unable to send text message to: ${phoneNumber}`;
resultContainer.classList.remove('hidden');
});
};
const phoneNumberForm = document.querySelector('#phoneNumberForm');
phoneNumberForm.addEventListener('submit', submitPhoneNumberForm);
})();
使用Infobip短信API
现在转到我们的后端代码，我们的Express路由器收到了来自前端的请求，并启动了自己的API请求，这次是向Infobip SMS API发出的请求。
JavaScript
const fetch = require('node-fetch');
const express = require('express');
const router = express.Router();
const funFacts = require('../fun-facts.json');
router.get('/send-sms/:phoneNumber', function (req, res) {
const phoneNumber = req.params.phoneNumber;
const funFact = funFacts[Math.floor(Math.random() * funFacts.length)];
const requestBody = {
messages: [
{
from: 'InfoSMS',
destinations: [
{
to: phoneNumber,
},
],
text: `Fun fact: ${funFact}`,
},
],
};
const fetchOptions = {
method: 'post',
body: JSON.stringify(requestBody),
headers: {
Authorization: `App ${process.env.API_KEY}`,
'Content-Type': 'application/json',
},
};
const URL = `${process.env.API_BASE_URL}/sms/2/text/advanced`;
fetch(URL, fetchOptions)
.then((response) => response.json())
.then((json) => {
res.json(json);
})
.catch((error) => {
res.json({ data: error });
});
});
module.exports = router;
你问为什么要做一个服务器端的API请求？主要是因为我们要对我们的API密钥进行保密。Infobip SMS API使用一个授权头，要求我们提供我们的API密钥，而我们不希望所有用户在浏览器的网络请求中完全看到这个密钥。因此，我们可以通过将其存储在一个.env 文件中，并且只从服务器而不是客户端访问它来保护这个API密钥。
就这样，Infobip SMS API向用户提供的电话号码发送了一条短信，而浏览器的用户界面则显示了一条确认信息。我们已经成功地给某人发送了一个有趣的事实!
结论和进一步探索
在我们短暂的相处中，我们已经建立了一个简单的应用程序，但是我们还有很多事情可以做。我们可以让用户选择每天接收一个有趣的事实，而不仅仅是发送一条短信。我们可以从每个注册的人中创建一个客户目录。我们甚至可以要求用户在订阅我们的每日趣事服务之前进行双因素认证，以验证他们的电话号码。短信发送的API所提供的选项非常广泛，你甚至可以设置webhooks来报告外发信息。
好消息是，Infobip让这一切变得简单。无论你是直接使用他们的API，还是使用他们的SDK，或者使用他们平台的GUI，与你的用户保持联系都是轻而易举的。
主题。
javascript, nodejs, api开发,短信,短信api, web开发, 编程, api, 教程
由Tyler Hawkins授权发表于DZone。点击这里查看原文。
DZone贡献者所表达的观点属于他们自己。
DZone上的热门文章
评论
