离子角中的 Twilio答案

【问题标题】：Twilio in Ionic Angular离子角中的 Twilio
【发布时间】：2021-08-10 08:20:50
【问题描述】：

新手开发者...

我有一个带有表单组的 Ionic/Angular 应用程序，供人们输入他们的详细信息，当他们登录时，我正在尝试使用 POST 通过 Twilio 的 API 发送 SMS。

如果我将登录详细信息添加到 API url，我会收到以下错误：无法在“窗口”上执行“获取”：无法从包含凭据的 URL 构造请求：https://XXX:XXX@api.twilio.com/2010-04-01/Accounts/XXX/Messages.json

如果我在标题中添加凭据，我会收到以下信息： POST https://api.twilio.com/2010-04-01/Accounts/XXX/Messages.json 401（未授权）

我不担心密钥被硬编码，因为这是一个内部应用程序，但不确定如何成功实现 SMS 功能。

下面是我的 .ts 函数代码。

有什么建议吗？

  signIn(form){
  fetch('https://api.twilio.com/2010-04-01/Accounts/xxx/Messages.json',{
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
      'Authorization': 'Basic ' + btoa('xxx:xxx'),
    },
    body: JSON.stringify({
      "from": ["+xxxxx"],
      "to": ["+xxxxx"],
      "body": this.contractor.firstName + " " + this.contractor.lastName,

    })
  }).then(function(response) {
  return response.json();
  });

【问题讨论】：

我建议您首先在测试工具中设置不记名令牌。您尝试执行此操作的方式会引发错误，因为出于安全考虑它受到限制。 nicolaswidart.com/blog/…

标签： angular ionic-framework twilio

【解决方案1】：

Try this solution
 async fetchData(token) {
//token can be hardcoded or passed
    console.log("inside asycn "+token);
  
      let headers = new HttpHeaders()
      .set('content-type','application/json')
      .set('Access-Control-Allow-Origin', '*')
      .set( "Authorization" , "Bearer "+token)
      const httpOptions = {
         headers: headers
       };

     this.message = "Fetching..";
      this.response = "";
      this.response = await this.http
     
      .get<void>('https://urlofyourendpoint',httpOptions)
        .pipe(delay(1000))
        .subscribe (x=>{console.log(x);})
      this.message = "Fetched";
    }

【讨论】：