[Twilio Connect] ユーザーの Twilio アカウントで API にアクセスする

Twilio Connect とは

Twilio の機能に Twilio Connect というものがあります。これは簡単に言うと「ユーザーの Twilio アカウントで Twilio の API を使う」といったものです。ユーザーのアカウントを使うので、料金が発生する操作 (電話番号購入や通話料など) はすべてユーザーそれぞれの課金になります。つまり Twilio Connect を使ったサービスは運営側に費用が発生しないということです。これはかなり魅力的ですね！
ということで Twilio Connect を使った簡単な Web アプリ (Connect App と呼ぶらしい) を Ruby on Rails で作ってみました。

基本的な流れ

以下のような流れで使います。

1. Web アプリの「Twilio Connect」ボタンを押す
2. Twilio 認証画面が表示され、ユーザーにアカウントアクセス許可をリクエストする
3. 許可されると Web アプリの Authorize URL にリダイレクトされる
4. リクエストパラメータからアカウントの SID を受け取って API にアクセスする

こんな感じです。ということで Web アプリに最低限必要な Web ページは

• 「Twilio Connect」ボタンを置くページ (Homepage URL)
• リダイレクト先のページ (Authorize URL)

になります。

Connect App を作成する

まずはじめに Twilio ユーザーアカウント画面から「ツール」>「CONNECT APP」を選択し、Connect App 管理画面を開きます。すると「Connect Appを作成する」ボタンが表示されるのでクリックします。

Connect App 設定画面では Friendly Name と Company Name と Homepage URL と Authorize URL を入力します。Homepage URL と Authorize URL はまだありませんが、とりあえず設定はできます。ということでこれから作るであろうアプリの Web ページの URL を入れておきましょう。
また「アクセス必須」という項目がありますが、これは Connect App がユーザーの Twilio アカウントを使ってどのような API を使うことができるか設定する項目です。今回は通話ログだけ取りたかったので「データ読み取り権限」だけ有効にしました。

最後に一番下の「変更を保存する」ボタンを押して保存します。すると「Twilio Connect」ボタンのソースコードが表示されます。メモっておきましょう。

以上で Connect App の作成は完了です！

Connect App の API を実装する

ということで早速実装していきましょう。今回はユーザーの通話履歴を表示する Web アプリを作り、Heroku にデプロイしてみたいと思います。まずは Ruby on Rails のアプリを作ります。

mkdir twilio-connect && cd twilio-connect
bundle init
vim Gemfile # gem 'rails' のコメントアウトを外す
bundle install --path vendor/bundle --without production
bundle exec rails new .
vim Gemfile # 下記の内容に修正
bundle install

Gemfile は以下のようにします。

Gemfile

source 'https://rubygems.org'

gem 'rails', '4.0.0'

gem 'twilio-ruby'
gem 'twitter-bootstrap-rails'
gem 'bootstrap-sass'

gem 'sass-rails', '~> 4.0.0'

gem 'uglifier', '>= 1.3.0'

gem 'coffee-rails', '~> 4.0.0'

gem 'therubyracer', platforms: :ruby

gem 'jquery-rails'

gem 'turbolinks'

gem 'jbuilder', '~> 1.2'

group :development, :test do
  gem 'sqlite3'
end
  
group :production do
  gem 'pg'
  gem 'therubyracer-heroku'
  gem 'thin'
end

あと bootstrap を使いたいので app/assets/stylesheets/application.css を以下のように修正します。

app/assets/stylesheets/application.cs

/*
 *= require_self
 *= require bootstrap
 *= require_tree .
 */

あと production 環境でアセットをライブコンパイルするため config/environments/production.rb の config.assets.compile = true を設定しておきます。

config/environments/production.rb

TwilioConnect::Application.configure do

…

config.assets.compile = true

…

end

これでベースは OK です。

「Twilio Connect」ボタンを置くページを作成する

次に、先ほど生成した「Twilio Connect」ボタンを置いてみましょう。app/views/twilio/index.html を作成し、先ほどコピーしてきたソースを貼り付けます。

app/views/twilio/index.html

<style type="text/css">
    #twilio-connect-button {
        background: url(https://www.twilio.com/packages/connect-apps/images/connect-button.png);
        width: 130px; height: 34px; display: block; margin: 0 auto;
    }
    #twilio-connect-button:hover { background-position: 0 34px; }
</style>
<a href="https://jp.twilio.com/authorize/XXXXXXXXXXXXXXXXXXXXXX" id="twilio-connect-button"></a>

Controller は次項で作成するので、ここでは割愛します。

リダイレクト先のページを作成する

次に、リダイレクト先のページを作成しましょう。 Controller ではリクエストパラメータからアカウントの SID を取得し、Twilio::REST::Client インスタンスを生成します。認証トークンは自分のアカウントのトークンをセットします。

app/controller/twilio_controller.rb

class TwilioController < ApplicationController

  def index
  end

  def auth
    account_sid = params[:AccountSid]
    auth_token = "YOUR_AUTH_TOKEN"
    client = Twilio::REST::Client.new account_sid, auth_token
    @name = client.account.friendly_name
    @calls = client.account.calls.list
  end

end
[/ruby]
</p>

<p>
あとは View をサクッと作成します。<tt>app/views/twilio/auth.html.erb</tt> を作成し、以下のように実装します。<tt>table</tt> に表示しているだけのシンプルな構成です。
</p>

<p>
<strong>app/views/twilio/auth.html.erb</strong><br>

</p>

<h3>ルーティングを設定する</h3>
<p>
最後に <tt>config/routes.rb</tt> を編集し、ルーティングを設定します。今回は Twilio Connect ボタンを置くページが <tt>twilio/</tt> 、リダイレクト先のページが <tt>twilio/auth</tt> になるようにしておきました。
</p>

<p>
<strong>config/routes.rb</strong><br>

TwilioConnect::Application.routes.draw do
  
get 'twilio' => 'twilio#index'
get 'twilio/auth' => 'twilio#auth'

end

デプロイする

あとは Heroku にデプロイして終わりです！

git init
git add .
git commit -m 'first commit.'
heroku create twilio-connect
git push heroku master

使ってみよう

では使ってみましょう。今回実装したアプリは Heroku に公開しています。

http://twilio-connect.herokuapp.com/twilio

しょぼい画面ですみませんｗ
Twilio Connect ボタンを押すと、以下のようなアカウントアクセス許可画面が表示されます。ここは英語なのですね。。 今回は「データアクセス権限」だけ使うように設定したので「Read all my account data」という権限が表示されています。

「Allow」ボタンをクリックするとリダイレクトされ、通話ログが表示されるはずです。

ちなみにリダイレクト先の URL のリクエストパラメータに SID が見えてしまうので、本来であれば SID を DB に格納し、更にリダイレクトさせ、ユーザーにアカウント SID が見えないようにしたほうが良いとベストプラクティスに書いてありました。今回は簡易的に試したかったのでそこまで実装しませんでした。

まとめ

ということで Twilio Connect をサクッと試してみました。上手く作り上げればコストなしで Twilio を使ったサービスを運用することができるので、かなり魅力的ですね！

参考

• Twilio Docs - Connect
• Twilio Docs - Quickstart Ruby Connect