如何通过带有反应的前端使用 Twilio 发送短信？

Question

我已阅读 Twilio 文档，但找不到使用 JavaScript/React 从前端发送简单 SMS 的方法。

Twilio 文档只是展示了如何使用 Node.js（服务器端）来做到这一点。

实际上，我发现文档有点尴尬，因为它们没有解释如何使用网络上最常见的程序语言来做到这一点。

我正在使用邮递员并且它工作正常，但在我的反应代码上没有。下面的代码是从 Postman 导出的：

var settings = {
    "async": true,
    "crossDomain": true,
    "url": "https://api.twilio.com/2010-04-01/Accounts/AC62761f2bae5c5659cc5eb65d42e5d57e/Messages.json",
    "method": "POST",
    "headers": {
            "Content-Type": "application/x-www-form-urlencoded",
            "Authorization": "Basic hashedAuthToken",
            "Cache-Control": "no-cache",
            "Postman-Token": "0s41f5ac-2630-40c4-8041-1e5ee513f20d"
    },
    "data": {
            "To": "+353838173123",
            "From": "+18634000432",
            "MessagingServiceSid": "MG3d622e63a343e11a2032b1414560f227",
            "Body": "Test, hi"
    }
}

$.ajax(settings).done(function (response) {
    console.log(response);
});

PS: 修改了上面的标记。如果您不使用自己的凭据，它将无法工作。

Answer 1

您可以使用下面的方法轻松做到这一点。

sendSMSTwilio(message) {
    const url = Config.sms.url;

    const accountSid = Config.sms.accoundId;
    const authToken = Config.sms.authToken;
    const auth = 'Basic ' + new Buffer(Config.sms.accountSid + ':' + Config.sms.authToken).toString('base64');

    const details = {
        To: message.to,
        From: message.from,
        MessagingServiceSid: Config.sms.serviceSid,
        Body: message.text
    };

    const formBody = [];
    for (var property in details) {
        const encodedKey = encodeURIComponent(property);
        const encodedValue = encodeURIComponent(details[property]);
        formBody.push(encodedKey + '=' + encodedValue);
    }
    const body = formBody.join('&');

    const options = {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
            Authorization: auth
        },
        body
    };

    return new Promise((resolve, reject) => {
        return fetch(url, options)
            .then((response) => {
              return resolve(response);
            })
            .then((responseJson) => {
              return resolve(responseJson);
            })
            .catch((error) => {
              return reject(error);
            });
        });
  }

您可以像这样调用并接收承诺响应：

this.sendSMSTwilio()
  .then((data) => {
    console.log(data);
  })
  .catch((err) => {
    console.log('Error SMS sender', err);
  });

Answer 2

这里是 Twilio 开发人员布道者。

您在这里尝试的操作存在大问题。

将您的 Twilio 凭据放入前端（或放入 Stack Overflow question/answer），让任何人都可以阅读您的源代码并窃取它们。恶意攻击者可以获取这些凭据并滥用您的帐户。

我建议您现在在 Twilio console 中刷新您的 Auth Token。你应该认为他们受到了损害。

您应该做的是在您自己的服务器端构建一个 SMS 发送服务，然后从您的 React 前端调用该服务。 sending SMS with Twilio on React 上有一个博客 post 值得一读，我也会尝试整理一些东西来展示它。

更新：

我写了一篇博客 post 解释 how to send an SMS with React and Twilio。重要的是你应该在你的服务器中执行 API 调用（在博客 post 中，它是一个 Node.js/Express 服务器，但你可以使用任何你想要的服务器端技术） .然后使用 fetch（如果需要，也可以使用 axios 或 XMLHttpRequest）将消息从 React 应用程序发送到服务器。

如何通过带有反应的前端使用 Twilio 发送短信？

How to send an SMS using Twilio through frontend with react?

sms

frontend

fetch

twilio

reactjs