Question

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

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

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

我使用的是邮递员，它工作正常，但是对我的react代码却不起作用。下面的代码是从邮递员导出的：

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凭证放入前端（或放入堆栈溢出问题/答案）会使任何人都可以读取它们并窃取它们。恶意攻击者可以获取这些凭据并滥用您的帐户。

我建议您现在在Twilio console中刷新您的身份验证令牌。您应该认为它们已被破坏。

应该要做的是在自己的服务器端构建一个SMS发送服务，然后从React前端调用该服务。 sending SMS with Twilio on React上有一篇博客文章值得阅读，我也会尝试将它们放在一起进行展示。

更新：

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

如何使用Twilio通过前端与React来发送SMS？

2 个答案: