使用自定义 Twilio 参数创建 XmlHttpsRequest

Question

我们正在通过 xmlhttprequest 将数据传递给 Studio 的 REST Api。当我只传递 To、From 和 Body 时，它运行良好。但是，我想将自定义参数传递给 api，例如“location”和“surveyentity”，并在工作室中将其作为 flow.data.location 和 flow.data.surveyentity

使用

我们使用 XMLHttpRequest 的原因是，这是我们以前的开发人员设置我们的应用程序的方式。我知道 Twilio 只有服务器端 SDK，他们不建议像 Vue 那样把它放在前面，但我认为我们很不幸。我们目前正在使用 Vue 和 XMLHttpRequest。

async sendSmsSurvey(to, location, surveyEntity, checkedID) {
            if (location == 7 && surveyEntity == 'Google'){ 
              var url = "https://studio.twilio.com/v2/Flows/xxx/Executions";
              var phone = "xxx"; 
            }
            if (location == 8 && surveyEntity == 'Google'){
              var url = "https://studio.twilio.com/v2/Flows/xxx/Executions";
              var phone = "xxx";
            }

            var xhr = new XMLHttpRequest();
            xhr.open("POST", url);

            xhr.setRequestHeader("Accept", "application/json");
            xhr.setRequestHeader("Authorization", "Basic QUxxYyYWZiZjZhZxxxx=="); 
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.onreadystatechange = function () {

            if (xhr.readyState === 4 && surveyEntity == "Google" || surveyEntity == "EmojisGoogleRedirect" || surveyEntity == "EmojisGoogleLink") { 
                  console.log(xhr.status);
                  console.log(xhr.responseText);
                  if (xhr.status == 200 || xhr.status == 201) {
                    //
                  } else {
                    //
                  }
              } //end xhr.readyState
            }; //end xhr.onreadystatechange

            var data = "To="+to+"&From="+phone; // I wanted to add the custom parameters here like "location" and "surveyentity".
            xhr.send(data);

          },

Answer 1

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

我知道您对以前的开发人员的设置方式感到遗憾，但我必须建议您努力将此 API 请求从前端移至后端，以便您停止在您的应用程序中公开您的帐户 SID 和授权令牌。有了这两个细节，恶意用户就可以接管并滥用您的 Twilio 帐户。

同时，我可以在这里指导您添加自定义参数，但我强烈建议使用后端。

要在从 API 触发 Studio Flow 时添加自定义参数，您需要传递 Parameters parameter which has a JSON object of the custom parameters. The best way to do this is to use the URLSearchParams object to serialize your data。

您目前拥有：

var data = "To="+to+"&From="+phone;

首先，您可以通过使用 URLSearchParams 序列化数据来改进这一点：

const urlSearchParams = new URLSearcParams();
urlSearchParams.append("To", to);
urlSearchParams.append("From", from);
const data = urlSearchParams.toString();

您需要将自定义参数添加到一个对象，然后您 JSON 将其字符串化并添加为 parameter called Parameters。

const urlSearchParams = new URLSearcParams();
urlSearchParams.append("To", to);
urlSearchParams.append("From", from);

const parameters = {
  surveyEntity: surveyEntity,
  location: location
};
urlSearchParams.append("Parameters", JSON.stringify(parameters));

const data = urlSearchParams.toString();

收官之际，再呼吁一次。请将此从您的客户端移至您的服务器端并停止公开您的凭据。

使用自定义 Twilio 参数创建 XmlHttpsRequest

Creating XmlHttpsRequest with custom Twilio Parameters

xmlhttprequest

twilio