Twilio Night Vol.11 - 音声、SMS、二要素認証プロダクトの利用方法

3.2K Views

November 17, 22

スライド概要

2022/11/17に開催されたTwilio Nightのセッションで使用した資料です。
Twilio Programmable Voice
Twilio Studio
Twilio Programmable Messaging (SMS)
Twilio Verify

を50分、超特急で紹介しました。

profile-image

Developer Advocate for Auth0 by Okta

シェア

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

2022/11/17 19:30 - 21:00 2022 TWILIO INC. ALL RIGHTS RESERVED

2.

Twilioについて ハッカソンについて 2022 TWILIO INC. ALL RIGHTS RESERVED

3.

Twilio Night Vol.11 - ハッカソン準備回、Twilio製品総ざらい 2022 TWILIO INC. ALL RIGHTS RESERVED

4.

2022 TWILIO INC. ALL RIGHTS RESERVED

5.

Twilioが提供する顧客エンゲージメントプラットフォーム ソリューション プラットフォーム 管理 & ガバナンス Flex Marketing Campaigns Frontline コンタクトセンター Eメール キャンペーン フィールドサービス 開発者向け ツール SDK サービス (ビルディング・ブロック) 洞察・知見 データ チャネル API CLI アイデンティ ローコード & ティ ノーコード サービス AI/ML 復元力 Debugger アクセス コア・インフラストラクチャ 制御 各種リソースや Super Network CDP 通信 インフラ 顧客データ インフラ プログラム © 2021 TWILIO INC. ALL RIGHTS RESERVED.

6.

Twilio = 様々なコミュニケーションチャネルをクラウドを介し、 プログラム可能な状態で利用できるサービス © 2022 TWILIO INC. ALL RIGHTS RESERVED.

7.

たとえば: サーバーの死活監視の一部として サーバーの死活監視(午前2時の電話システム) © 2022 TWILIO INC. ALL RIGHTS RESERVED.

8.

たとえば: サインイン時の認証インフラとして 電話・SMSで 認証コードを送信 © 2022 TWILIO INC. ALL RIGHTS RESERVED.

9.

たとえば: 自動音声応答(IVR)として 「再配達の受付は 1を、担当者と話す 場合は2を押して ください。」 © 2022 TWILIO INC. ALL RIGHTS RESERVED.

10.

https://hackathon.we-are-ma.jp/twilio2022/ 2022 TWILIO INC. ALL RIGHTS RESERVED

11.

2022 TWILIO INC. ALL RIGHTS RESERVED

12.

2022 TWILIO INC. ALL RIGHTS RESERVED

13.

2022 TWILIO INC. ALL RIGHTS RESERVED

14.

2022 TWILIO INC. ALL RIGHTS RESERVED

15.

よくありそうな質問と答え Q. 個人利用はNGなのでは? A. ハッカソン期間、利用できるアカウントを KWCさんにご準備いただきました! Q. チームでも参加できますか? A. 可能です!ただしチームメンバー全員がそれぞれで イベントに登録してください 2022 TWILIO INC. ALL RIGHTS RESERVED

16.

よくありそうな質問と答え Q. アイディアが... A. 先人の知恵に学ぼう! 2022 TWILIO INC. ALL RIGHTS RESERVED

17.

2022 TWILIO INC. ALL RIGHTS RESERVED

18.

2022 TWILIO INC. ALL RIGHTS RESERVED

19.

セッション1 - 電話をかけたり、受けたりしてみよう 2022 TWILIO INC. ALL RIGHTS RESERVED

20.

自己紹介 池原 大然 Twilio デベロッパーエバンジェリスト dikehara@twilio.com @neri78 > npx neri78 2022 TWILIO INC. ALL RIGHTS RESERVED

21.

アジェンダ 1 Twilioのしくみ 2 TwiML入門 3 発信と着信 4 コード or ノーコード 2022 TWILIO INC. ALL RIGHTS RESERVED

22.

© 2022 TWILIO INC. ALL RIGHTS RESERVED.

23.

Twilioを使った音声着信応答 Twilioが提供する電話番号 例: 050-xxxx-xxx 音声着信 応答をもとに 自動音声を再生 Twilioから リクエストを送信 アプリケーションの 応答 © 2022 TWILIO INC. ALL RIGHTS RESERVED.

24.

Twilioを使った音声発信 Twilioが提供する電話番号 例: 050-xxxx-xxx アプリから リクエストを送信 音声発信 通話ステータス (Optional) © 2022 TWILIO INC. ALL RIGHTS RESERVED.

25.

Twilioから電話番号を購入 2022 TWILIO INC. ALL RIGHTS RESERVED

26.

2022 TWILIO INC. ALL RIGHTS RESERVED

27.

2022 TWILIO INC. ALL RIGHTS RESERVED

28.

日本を含む一部の国ではRegulatory Bundleを指定 2022 TWILIO INC. ALL RIGHTS RESERVED

29.

Twilioを使った音声着信応答 Twilioが提供する電話番号 例: 050-xxxx-xxx 音声着信 応答をもとに 自動音声を再生 “お電話ありがとうございます” Twilioから リクエストを送信 アプリケーションの 応答 TwiML © 2022 TWILIO INC. ALL RIGHTS RESERVED.

30.

TwiML Twilio Markup Language XML構文 Twilio独自のタグを定義 「動詞」と「名詞」 Twilioの動作を指定 音声またはメッセージの応答 TwiMLを使って構築できる © 2022 TWILIO INC. ALL RIGHTS RESERVED.

31.

TwiML 応答を定義 <?xml version="1.0" encoding="UTF-8"?> <Response> <Say language="ja-jp">お電話ありがとうございます </Say> </Response> https://jp.twilio.com/docs/voice/twiml © 2022 TWILIO INC. ALL RIGHTS RESERVED.

32.

TwiML Bins https://twilio.com/console/twiml-bins • TwiML専用ホスティングサービス © 2022 TWILIO INC. ALL RIGHTS RESERVED.

33.

TwiMLを着信応答に設定 © 2022 TWILIO INC. ALL RIGHTS RESERVED.

34.

dev-phone Twilioを使ったアプリケーション開発向けの Webブラウザーフォン 電話番号購入に関わる問題を一時的に解決 日本を含む特定の国では電話番号の購入や機能に 制限があるため米国番号などを利用し、 アプリケーションの動作を確認 音声通話だけでなく、SMSの送受信にも対応 高額な国際SMSを利用しなくてもよい https://github.com/twilio-labs/dev-phone 2022 TWILIO INC. ALL RIGHTS RESERVED

35.

コード or ノーコード 2022 TWILIO INC. ALL RIGHTS RESERVED

36.

Twilioアプリケーションを 作成する方法 SDK </> SDK Twilio Studio コードでTwilioの サービスを呼び出し ローコード ノーコードで フローを作成 © 2022 TWILIO INC. ALL RIGHTS RESERVED.

37.

Twilioアプリケーションを 作成する方法 SDK SDK コードでTwilioの サービスを呼び出し © 2022 TWILIO INC. ALL RIGHTS RESERVED.

38.

2022 TWILIO INC. ALL RIGHTS RESERVED

39.
[beta]
Node.js - webhookの実装(コードでTwiMLを構築)

const twilio = require('twilio');

// ...省略

app.all('/voice-dynamic', (req, res, next) => {

res.contentType("application/xml");
const twiml = new twilio.twiml.VoiceResponse();
twiml.say(
{ language: 'ja-JP'}, "お電話ありがとうございます。アプリケーションから応答しています。");
res.send(twiml.toString());
})

2022 TWILIO INC. ALL RIGHTS RESERVED

40.
[beta]
Node.js - アプリケーションから音声通話を発信

const twilio = require('twilio')(

クライアントの初期化

process.env.ACCOUNT_SID,
process.env.AUTH_TOKEN
);

音声発信処理
twilio.calls.create({
from : process.env.TWILIO_NUMBER,
to: process.env.MY_NUMBER,
twiml: '<Response><Say language="ja-JP">こちらはTwilio。アプリから通話しています。
</Say></Response>'
}).then (call => console.log(call.sid));

2022 TWILIO INC. ALL RIGHTS RESERVED

41.

(超重要)AccountSid / AuthTokenの取り扱いは慎重に const twilio = require('twilio')( process.env.ACCOUNT_SID, process.env.AUTH_TOKEN ); ● コードに直接埋め込まない ● GitHubなどのリポジトリにアップロードしない ● 環境変数を利用する ● API Key/API Key Secretを利用する 2022 TWILIO INC. ALL RIGHTS RESERVED

42.

Twilioアプリケーションを 作成する方法 </> Twilio Studio ローコード ノーコードで フローを作成 © 2022 TWILIO INC. ALL RIGHTS RESERVED.

43.

Twilioの動作フロー Twilioが提供する電話番号 050-XXXX-YYYY 音声着信 応答をもとに 自動音声を再生 Twilioから リクエストを送信 Studioで置き換え アプリケーションの 応答 2022 TWILIO INC. ALL RIGHTS RESERVED

44.

Twilio Studio ローコード・ノーコードでコミュニケーションフローを デザイン、デプロイできるビジュアルインターフェース ビジュアルプログラミング ウィジェットのドラッグドロップ、接続、設定で コミュニケーションフローをデザイン、デプロイ 外部連携 REST APIエンドポイントの提供、Twilio Functions、 HTTPリクエストの送信など Studio REST API 既存フロー定義の取得や更新を実現 2022 TWILIO INC. ALL RIGHTS RESERVED

45.

代表的なWidget トリガー 通話の転送 サーバーレス 実行環境呼出 フロー分岐 外部発信 外部サービス接続 変数への格納 テキスト・音楽 再生 TWIMLリダイレクト 2022 TWILIO INC. ALL RIGHTS RESERVED

46.
[beta]
REST APIで呼び出し可能

// 環境変数からTwilio認証情報およびTwilio番号を取得
const { TWILIO_ACCOUNT_SID, TWILIO_AUTH_TOKEN,
TWILIO_NUMBER } = process.env;

const client = new twilio(
TWILIO_ACCOUNT_SID, TWILIO_AUTH_TOKEN);

// Studio Flow SID
const flow_sid = 'FWxxxxx';

// 指定したStudioフローを実行
client.studio.flows(flow_sid)
.executions.create({
from: TWILIO_NUMBER, to: '+81xxxxxxxx', //発信先
}).then (flow => console.log(flow.sid))
.catch(err => console.log(err));
});

2022 TWILIO INC. ALL RIGHTS RESERVED

47.

Twilioを使った双方向通話 (例:ブラウザー電話、アプリフォン) 2022 TWILIO INC. ALL RIGHTS RESERVED

48.

音声通話 音声通話 TwiML App © 2022 TWILIO INC. ALL RIGHTS RESERVED.

49.

Twilio ClientとTwiML Appを用いた電話発信 Webアプリ 1. クライアントアプリケーション からTwilioに接続 発信先 https://jp.twilio.com/docs/voice/client/javascript

50.

Twilio ClientとTwiML Appを用いた電話発信 Webアプリ 2. Twilioから外部に発信できるTwiML App (ダイアラー)が指定された エンドポイントにリクエストを送信 発信先 https://jp.twilio.com/docs/voice/client/javascript

51.

Twilio ClientとTwiML Appを用いた電話発信 Webアプリ 3. エンドポイントではTwiML Appに動作 を指示するTwiMLを返信 この際に<Dial>句を用いて外部発信を指示 発信先 https://jp.twilio.com/docs/voice/client/javascript TwiML例 <Response> <Dial callerId=”Twilioの番号> <Number>発信先</Number> </Dial> </Response>

52.

Twilio ClientとTwiML Appを用いた電話発信 Webアプリ 4. Twilioから指定された発信先に通話が 開始され、クライアントアプリケーション と一般公衆回線が接続 発信先 https://jp.twilio.com/docs/voice/client/javascript TwiML例 <Response> <Dial callerId=”Twilioの番号> <Number>発信先</Number> </Dial> </Response>

53.

まとめ TwiMLを構築して発信、応答を定義 AccountSid / AuthTokenの 取り扱いには要注意 SDK or Twilio Studioを使った アプリケーション開発 2022 TWILIO INC. ALL RIGHTS RESERVED

54.

リソース 音声通話ハンズオン https://neri78.github.io/Twilio-HandsOn-Voice-JP/ Studioハンズオン https://neri78.github.io/Twilio-HandsOn-Studio-JP/ ブラウザーフォンハンズオン https://neri78.github.io/Twilio-HandsOn-Voice-TwiML-APP-JP/ Qiita - Twilio https://qiita.com/search?q=twilio 2022 TWILIO INC. ALL RIGHTS RESERVED

55.

セッション2 - SMSを送ったり、二要素認証の仕組みをつかってみよう 2022 TWILIO INC. ALL RIGHTS RESERVED

56.

アジェンダ 1 SMSの送信方法 2 メッセージングサービスと 追加機能 3 二要素認証プロダクトの利用 2022 TWILIO INC. ALL RIGHTS RESERVED

57.

Twilioを使ったメッセージ(SMS)送信 Twilioが提供する 電話番号 HTTPリクエスト 公衆交換電話網 (PSTN)を 通して配信 HTTPレスポンス (送信ステータスなど) © 2022 TWILIO INC. ALL RIGHTS RESERVED.

58.
[beta]
Node.js - コードでSMSを送信
// Twilio認証情報
const { TWILIO_ACCOUNT_SID, TWILIO_AUTH_TOKEN } = process.env;

// Twilio Nodeヘルパーライブラリを初期化
const client = new client(
TWILIO_ACCOUNT_SID,
TWILIO_AUTH_TOKEN
);

// 送信元・送信先の番号をE.164形式で記述
const from = '';
const to = ''

// メッセージの送信
client.messages.create({
from: from,
to: to,
body: '最近暑くなってきましたね。故障を防ぐため、夏前にはエアコンの掃除を忘れないようにしましょう!'
})
2022 TWILIO INC. ALL RIGHTS RESERVED

59.
[beta]
Node.js - リクエストの結果を取得(送信直後
// メッセージの送信
client.messages.create({
from: from,
to: to,
body: '最近暑くなってきましたね。故障を防ぐため、夏前にはエアコンの掃除を忘れ
ないようにしましょう!'
}).then(message =>
console.log(`SID: ${message.sid} ステータス: ${message.status}`));

このコードで確認できるのは
リクエストを送った直後のステータスのみ

2022 TWILIO INC. ALL RIGHTS RESERVED

60.
[beta]
Node.js - ステータスコールバック

// メッセージの送信

// ステータスコールバック用エンドポイント

client.messages.create({

app.post("/status-callback", (req, res) => {

from: from,
to: to,
body: '最近暑くなってきましたね。故障を防ぐため、夏前にはエアコンの
掃除を忘れないようにしましょう!',

const { MessageStatus, MessageSid } = req.body;
console.log(`${MessageSid}: ${MessageStatus}`);

statusCallback: 'https://daizen.ngrok.io/status-callback'
})

res.contentType("application/xml");

.then(message => console.log(`SID: ${message.sid} ステータス:

res.send("<Response/>");

${message.status}`));

});

ステータスの変更を
指定したエンドポイントに逐次送信
2022 TWILIO INC. ALL RIGHTS RESERVED

61.
[beta]
Node.js - 送信者情報を番号ではなく英数字で表現
// メッセージの送信

Alphanumeric Sender ID
送信専用(返信できない)

client.messages.create({
from: 'neri78',
to: to,
body: '最近暑くなってきましたね。故障を防ぐため、夏前にはエアコンの掃除を忘れないようにしま
しょう!',
statusCallback: 'https://daizen.ngrok.io/status-callback'
})
.then(message => console.log(`SID: ${message.sid} ステータス: ${message.status}`));

2022 TWILIO INC. ALL RIGHTS RESERVED

62.

メッセージングサービスの活用 2022 TWILIO INC. ALL RIGHTS RESERVED

63.

メッセージングサービスとは 複数の電話番号を束ねてメッセージを送信できる 仕組み ● ● ● ● ● ● ● 1つのサービスに400番号まで登録 オプトアウト機能 Alpha Sender ID 固定送信者番号 同一地域番号での送信(US/Canada) 同一国番号での送信 Etc. let messagingServiceSid = 'MGxxxxxxxxxxxxxxxxxxxxxxxxx' client.messages.create({ messagingServiceSid: messagingServiceSid, to: messageToNumber, body: 'メッセージの送信 by Messaging Service', statusCallback: 'https://daizen.ngrok.io/statuscallback' }) 2022年に追加された機能 ● メッセージのスケジューリング ● 短縮URL ● 短縮URLのクリック追跡 ttps://jp.twilio.com/docs/sms/services 2022 TWILIO INC. ALL RIGHTS RESERVED

64.
[beta]
Node.js - メッセージのスケジューリング
// 送信日時 - 現時点から15分 ~ 7日のレンジ
const SendAt = new Date(2022, 3, 12, 14, 0, 0);

console.log(`日本時間における送信設定日時: ${SendAt.toLocaleString("ja-JP")}`);
// 実際にはこちらの値が設定される(UTC)
console.log(`送信設定日時: ${SendAt.toISOString()}`);

client.messages.create({
messagingServiceSid: messaging_service_sid,
to: to,
body: 'スケジューリング',
scheduleType: 'fixed',
sendAt: SendAt.toISOString()
}).then((message) => console.log(message.sid))
.catch((err) => console.log(err));

2022 TWILIO INC. ALL RIGHTS RESERVED

65.

二要素認証と Twilio Verify 2022 TWILIO INC. ALL RIGHTS RESERVED

66.

一般的な二要素認証の流れ 1 2 3 第一の要素で 認証 別の要素で 認証 認証後 情報にアクセス 多くの場合、 暗証番号、パスワード、 合言葉など、 「知る要素」を用いて認証 「持つ要素」 「備える要素」 いずれかを使って 追加で認証 会員情報 支払い情報 口座情報 などなど ● 「持つ要素」 ● 「備える要素」 電話発信、SMS、TOTP(時間に基づいて発行されるワンタイムパスコード)など - 指紋、網膜、顔など © 2020 TWILIO INC. ALL RIGHTS RESERVED.

67.

Webアプリケーションの場合(例) ワンタイムパスコードの送信 ワンタイムパスコードの入力 ID/パスワードの認証 ワンタイムパスコードの認証 課題 ● どのようにワンタイムパスコードを送信するのか ● どのように管理、確認するのか 2022 TWILIO INC. ALL RIGHTS RESERVED

68.

Verify 二要素認証をアプリに組み込み 2022 TWILIO INC. ALL RIGHTS RESERVED

69.

カバー領域 ワンタイムパスコードの送信 ワンタイムパスコードの入力 ID/パスワードの認証 ワンタイムパスコードの認証 Verifyが提供する機能 ● 電話番号やメールアドレス単位でのワンタイムパスコード生成 ● 指定したチャネルを用いたワンタイムパスコードの送信 ● ワンタイムパスコードの確認と結果の送信 2022 TWILIO INC. ALL RIGHTS RESERVED

70.

提供するチャネル SMS Voice Email WhatsApp ユーザー登録 & ログイン Push 認証 TOTP ソフト トークン ログイン © 2020 TWILIO INC. ALL RIGHTS RESERVED.

71.

特長 1 2 3 世界対応の 認証 確認コード送信用の 電話番号管理が不要 豊富なチャネル 200以上の国や地域に 対応し、ロケールに よる認証メッセージの ローカライズ Twilio側で確認コードの 送信を管理、運用 電話番号の取得は不要 SMS、電話、Emailで確 認コードの 送信が可能 © 2020 TWILIO INC. ALL RIGHTS RESERVED.

72.

Verifyサービスの作成 Twilioコンソールでサービスの作成と設定が可能(APIも提供) 2022 TWILIO INC. ALL RIGHTS RESERVED

73.
[beta]
Node.js - ワンタイムコードの送信
// AccountSidとAuthTokenでクライアントを初期化

{ sid: 'VExxxxxxxxxxxxxxx',

const client = require('twilio')(

serviceSid: 'VAxxxxxxxxxxxxxxx',
accountSid: 'ACxxxxxxxxxxxx',

process.env.TWILIO_ACCOUNT_SID,

to: '+8190xxxxxxxx',

process.env.TWILIO_AUTH_TOKEN);

channel: 'sms',
status: 'pending',

let verify_service_sid = 'VAxxxxxxxxxxxxxxxxx';

valid: false,

let verify_to = '+8190xxxxxxxx';

lookup:

pending =
コードが発行され、確認を待ってい
る状態

{ carrier:
{ mobile_country_code: '440',

// 事前にID/PWなどの認証を行う

type: 'mobile',

// コードを送信

error_code: null,

client.verify.services(verify_service_sid)

mobile_network_code: '50',
name: 'KDDI' } },

.verifications

amount: null,

.create({ to: verify_to, channel: 'sms'}) //sms, call, email

payee: null,

.then(verification => console.log(verification));

sendCodeAttempts: [ { channel: 'sms', time: '2020-04-20T22:03:09.112Z' } ],
dateCreated: 2020-04-20T22:03:09.000Z,
dateUpdated: 2020-04-20T22:03:09.000Z,
url: …
}

2022 TWILIO INC. ALL RIGHTS RESERVED

74.
[beta]
Node.js - コードの認証
// AccountSidとAuthTokenでクライアントを初期化
const client = require('twilio')(
process.env.TWILIO_ACCOUNT_SID,
process.env.TWILIO_AUTH_TOKEN);

{ sid: 'VExxxxxxxxx',
serviceSid: 'VAxxxxxxxx',
accountSid: 'ACxxxxx',

let verify_service_sid = 'VAxxxxxxxxxxxxxxxxx';
let verify_to = '+8190xxxxxxxx';

to: '+8190xxxxxxxx',
channel: 'sms',
status: 'approved',

// コードを送信先(to)で確認
client.verify.services(verify_service_sid)
.verificationChecks
.create({ to: verify_to, code: '081170'})
.then (verification_check =>

認証に成功した場合は
approvedに変化する

valid: true,
amount: null,
payee: null,
dateCreated: 2020-04-20T22:29:20.000Z,
dateUpdated: 2020-04-20T22:30:00.000Z }

console.log(verification_check));

2022 TWILIO INC. ALL RIGHTS RESERVED

75.

Node.js - 検証の制限 コードの有効時間: 10分 同一コードの送信回数、確認回数: 5回まで 2022 TWILIO INC. ALL RIGHTS RESERVED

76.

VerifyをWebアプリケーションに組み込み二要素認証を実施 ワンタイムパスコードの送信 ワンタイムパスコードの入力 ID/パスワードの認証 ワンタイムパスコードの認証 2022 TWILIO INC. ALL RIGHTS RESERVED

77.

© 2022 TWILIO INC. ALL RIGHTS RESERVED.

78.

リソース SMSハンズオン https://neri78.github.io/Twilio-HandsOn-Messaging-JP/ Verifyハンズオン https://neri78.github.io/Twilio-HandsOn-AccSec-JP/ Qiita - Twilio https://qiita.com/search?q=twilio 2022 TWILIO INC. ALL RIGHTS RESERVED

79.

\\ お知らせその2 - Qiita Advent Calendarプレゼント企画 ハッカソンに参加する → Advent Calendar書く → 賞品をゲット(かもしれない) https://qiita.com/advent-calendar/2022/twilio 2022 TWILIO INC. ALL RIGHTS RESERVED

80.

ハッカソンへの参加、 お待ちしています! 2022 TWILIO INC. ALL RIGHTS RESERVED