どのようにTwitoと反応からSMSを送信する

私たちは送信についてたくさん話しますSMS messages from web applications , しかし、反応アプリケーションからSMSメッセージを送信するには?ほんの少しだけではないthe server-side version , しかし、それは我々を長くしません.

なぜ私はクライアント側からREST APIを使用してはいけませんか？

技術的には、JavaScriptクライアント側のアプリケーションから直接twilioの残りのAPIを使用してSMSを送信することができます.しかし、(そして、それは非常に大きい“しかし”)あなたがそれを行う場合は、あなたのサイトを使用して誰にもあなたのtwilio資格情報を公開します.悪意のあるユーザーは、それらの資格情報を取得し、アカウントを使用して巨大な法案を実行して、それらを虐待することができます.

アカウントの資格情報を持つハッカーのライブビュー
これを避けるために、我々はTwitoレストAPIを実装するバックエンドアプリケーションを作成し、あなたの資格情報をラップし、あなたのためにSMSメッセージを送信します.次に、あなたの反応アプリケーションからあなたのバックエンドを呼び出すことができますし、インターネットにあなたの資格情報を配布せずにSMSメッセージを送信します.

当社のツール

私たちのアプリケーションのためのテキストメッセージを送信するには、次の必要があります.

SMSメッセージを送信することができますtwilioアカウントと電話番号sign up for a Twilio account for free here )

Node.js 我々の反応アプリを構築して、我々のサーバーを走らせるために

React Dev Tools あなたのブラウザーのために(オプションであるが、本当にアプリケーションで何が起こっているかについて見るのに便利です)

開始するには、ダウンロードまたはクローンreact-express-starter application 私が建てた.

git clone https://github.com/philnash/react-express-starter.git

ディレクトリに移動し、依存関係をインストールします.

cd react-express-starternpm install

プロジェクトディレクトリで、.env :

touch .env

これでプロジェクトをテストすることができますnpm run dev . アプリケーションはlocalhostのブラウザでロードされます.
このスターターアプリケーションは、両方の反応アプリケーションとExpress 同じプロジェクトでアプリケーションを同時に実行することができます.あなたはどのように動作するかを確認したい場合は、チェックアウト.

サーバー側の構築

議論されるように、私たちはサーバからtwilio API呼び出しをする必要があります.我々は、我々の反応アプリケーションから呼び出すことができるExpressサーバーにエンドポイントを追加します.インストールするTwilio Node.js module . 注意:このアプリケーションの目的のために、サーバー依存関係を開発依存関係として保存し、クライアント側の依存関係から切り離します.

npm install twilio --save-dev

次に、私たちのtwilio資格情報を使用してアプリケーションを構成する必要があります.からあなたのtwilioアカウントシドとauthトークンを集めてくださいTwilio console に沿ってTwilio phone number SMSメッセージを送信することができます.全3を入力します.env 以前に作成したファイル

TWILIO_ACCOUNT_SID=YOUR_ACCOUNT_SID
TWILIO_AUTH_TOKEN=YOUR_AUTH_TOKEN
TWILIO_PHONE_NUMBER=YOUR_TWILIO_PHONE_NUMBER

これでset your credentials in the environment . さて、オープンserver/index.js メッセージを送信するために必要なコードから始めることができます.他のモジュールの下では、ファイルの先頭に必要な、環境から資格情報を使用してtwilioライブラリを初期化し、初期化します.

const express = require('express');
const bodyParser = require('body-parser');
const pino = require('express-pino-logger')();
const client = require('twilio')(
  process.env.TWILIO_ACCOUNT_SID,
  process.env.TWILIO_AUTH_TOKEN
);

JSON本体としてビルドしているエンドポイントにデータを送信するので、JSON本体を解析する必要があります.ボディパーサーのJSONパーサーでExpressアプリケーションを構成します

const app = express();
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());app.use(pino);

Aのルートを作るPOST リクエスト.次のルートを追加します/api/greeting :

app.post('/api/messages', (req, res) => {

});

私たちはJSONにも対応するつもりですContent-Type ヘッダーapplication/json .

app.post('/api/messages', (req, res) => {
  res.header('Content-Type', 'application/json');

});

ではuse the Twilio client we initialised earlier to create a message . 我々は、我々のtwilio番号を使いますfrom 番号とto ナンバーとbody 受信リクエスト本文からのメッセージの.これはPromise それが失敗するなら、API要求が成功するか、拒絶するとき、それは満たされます.いずれにせよ、リクエストが成功したかどうかをクライアント側に伝えるためにJSONレスポンスを返します.

app.post('/api/messages', (req, res) => {
  res.header('Content-Type', 'application/json');
  client.messages
    .create({
      from: process.env.TWILIO_PHONE_NUMBER,
      to: req.body.to,
      body: req.body.body
    })
    .then(() => {
      res.send(JSON.stringify({ success: true }));
    })
    .catch(err => {
      console.log(err);
      res.send(JSON.stringify({ success: false }));
    });
});

これはサーバ上で必要なことです.

クライアント側の構築

クライアント側では、サーバーを介してSMSを送信するフォームをカプセル化できます.だから、src ディレクトリと呼ばれる新しいコンポーネントを作成するSMSForm.js コンポーネントのボイラープレートから始めます.

import React, { Component } from 'react';

class SMSForm extends Component {

}

export default SMSForm;

我々は、ユーザーが電話番号とメッセージで記入できるフォームを作成するつもりです.フォームが送信されると、それは私たちのサーバーエンドポイントに詳細を送信し、番号にSMSとしてメッセージを送信します.
をつくりましょうrender このコンポーネントのためのメソッドは、最初に、フォーム、電話番号の入力、メッセージのためのtextareaと提出するボタンを含みます:

  render() {
    return (
      <form>
        <div>
          <label htmlFor="to">To:</label>
          <input
             type="tel"
             name="to"
             id="to"
          />
        </div>
        <div>
          <label htmlFor="body">Body:</label>
          <textarea name="body" id="body"/>
        </div>
        <button type="submit">
          Send message
        </button>
      </form>
    );
  }

いくつかのCSSをこの形式でスタイルを追加できます.ファイルを作るsrc/SMSForm.css 次の行を追加します.

.sms-form {
  text-align: left;
  padding: 1em;
}
.sms-form label {
  display: block;
}
.sms-form input,
.sms-form textarea {
  font-size: 1em;
  width: 100%;
  box-sizing: border-box;
}
.sms-form div {
  margin-bottom: 0.5em;
}
.sms-form button {
  font-size: 1em;
  width: 100%;
}
.sms-form.error {
  outline: 2px solid #f00;
}

SMSformコンポーネントの上部にあるCSSをインポートします.

import React, { Component } from 'react';
import './SMSForm.css';

コンポーネントをインポートするsrc/App.js を返します.

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import SMSForm from './SMSForm';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />

          <SMSForm />
        </header>
      </div>
    );
  }
}

export default App;

アプリケーションを起動しますnpm run dev そして、あなたはページの形を見ます.

フォームはまだ何もしないので、修正しましょう.

インタラクティブなフォームを作る

HTMLフォームをコンポーネントでフックするには、いくつかのことを行う必要があります.

コンポーネントおよび状態の状態を最新の状態に保つ

フォームを送信し、データをサーバーに送信するハンドル

サーバからの応答を処理し、メッセージが正常に送信された場合、フォームをクリアするか、エラーが発生した場合に表示します

コンストラクタで初期状態を設定します.フォームが現在提出されているか(送信ボタンを無効にするには)フォームが入力されているかどうか、エラーが発生したかどうかを入力する必要があります.次のコンポーネントのコンストラクタを作成します

class SMSForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      message: {
        to: '',
        body: ''
      },
      submitting: false,
      error: false
    };
  }

  // rest of the component
}

フォームフィールドの変更を処理し、状態を更新できるメソッドが必要です.私たちは2つのメソッドを作成することができました、そして、textareaのための1つ、しかし、状態のフォーム要素と項目の名前がマッチするので、我々は両方をカバーする1つの方法を構築することができます.

  onHandleChange(event) {
    const name = event.target.getAttribute('name');
    this.setState({
      message: { ...this.state.message, [name]: event.target.value }
    });
  }

ここで注意してくださいES2015's computed property names 状態と右のプロパティを設定するにはspread operator 残りの国を満たす.
このメソッドをオブジェクトにバインドする必要がありますthis イベントを受け取るために使うときは正しいです.コンストラクタの下部に以下を追加します.

  constructor(props) {
    super(props);
    this.state = {
      message: {
        to: '',
        body: ''
      },
      submitting: false,
      error: false
    };
    this.onHandleChange = this.onHandleChange.bind(this);
  }

我々は現在、現在の状態とハンドルの更新を使用してフォームのフィールドの値を設定するにはonHandleChange メソッド:

  render() {
    return (
      <form>
        <div>
          <label htmlFor="to">To:</label>
          <input
            type="tel"
            name="to"
            id="to"
            value={this.state.message.to}
            onChange={this.onHandleChange}
          />
        </div>
        <div>
          <label htmlFor="body">Body:</label>
          <textarea
            name="body"
            id="body"
            value={this.state.message.body}
            onChange={this.onHandleChange}
          />
        </div>
        <button type="submit">Send message</button>
      </form>
    );
  }

アプリケーションをリロードし、フォームのフィールドを更新することができます.あなたがいるならばReact dev tools お使いのブラウザの場合は、状態を更新するを見ることができるでしょう.

ここでフォームの提出を処理する必要があります.別の関数をビルドします.onSubmit , を更新します.submitting stateプロパティをtrueに設定します.その後、 fetch API サーバーへのリクエストを作成します.レスポンスが成功した場合、フォームと設定をクリアするsubmitting 嘘をつく.レスポンスが成功していない場合submitting 嘘をつくerror である.

  onSubmit(event) {
    event.preventDefault();
    this.setState({ submitting: true });
    fetch('/api/messages', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(this.state.message)
    })
      .then(res => res.json())
      .then(data => {
        if (data.success) {
          this.setState({
            error: false,
            submitting: false,
            message: {
              to: '',
              body: ''
            }
          });
        } else {
          this.setState({
            error: true,
            submitting: false
          });
        }
      });
  }

と同じようにonHandleChange メソッドをコンストラクタにバインドします.

  constructor(props) {
    super(props);
    this.state = {
      message: {
        to: '',
        body: ''
      },
      submitting: false,
      error: false
    };
    this.onHandleChange = this.onHandleChange.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
  }

さて、JSXではonSubmit フォームの送信ハンドラとしてメソッド.リクエストからエラーを受け取ると、フォームのクラスを“error”に設定します.フォームが送信されている間、ボタンのdisabled プロパティ.

  render() {
    return (
      <form
        onSubmit={this.onSubmit}
        className={this.state.error ? 'error sms-form' : 'sms-form'}
      >
        <div>
          <label htmlFor="to">To:</label>
          <input
            type="tel"
            name="to"
            id="to"
            value={this.state.message.to}
            onChange={this.onHandleChange}
          />
        </div>
        <div>
          <label htmlFor="body">Body:</label>
          <textarea
            name="body"
            id="body"
            value={this.state.message.body}
            onChange={this.onHandleChange}
          />
        </div>
        <button type="submit" disabled={this.state.submitting}>
          Send message
        </button>
       </form>
    );
  }

これは我々が必要なので、もう一度アプリをリフレッシュし、あなたの携帯電話番号とメッセージを送信する入力します.フォームを提出してください、そして、詳細が正しいならば、あなたのメッセージは送られます.

メッセージを送信し、資格情報を安全に保つ

WebアプリからSMSメッセージを送信するクールです.あなたの資格情報を公開することなく、あなたの反応アプリからのSMSメッセージを送信するも😎.
この例のアプリケーションからのすべてのコードをチェックアウトすることができますGitHub repo .
今、あなたはいくつかの改善を行う可能性がSMSメッセージを送信することができます反応アプリの基礎を持っている.最初に、より良い検証とエラーメッセージがあります.同様のデザインで、あなたはphone number lookups , generate phone calls or implement two factor authentication 右もあなたの反応アプリから.
私はあなたが反応で構築しているアプリについて聞いてみたい.下記のコメントをドロップして、Twitterで私を殴ったり、メールを送ってください[email protected] .