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

3.4K Views

November 17, 22

#twilio #sms #voice #studio #verify #Twilio #ハッカソン #音声通話 #TwiML #ローコード開発

スライド概要

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

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

Daizen Ikehara

@Neri78

スライド一覧

Developer Advocate for Auth0 by Okta

またはPlayer版

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

ダウンロード

ダウンロード(pdf - 5.37MB)

関連スライド

Phaserで始めるゲーム開発入門

phaser ゲーム

Daizen Ikehara 158.4K

ReBAC入門「関係性」によるアクセス制御とは？

fga openfga authorization authz

Daizen Ikehara 22K

WebRTCのAPIでビデオアプリケーションをつくってみるレクチャー＆ハンズオン

twilio video webrtc api

Daizen Ikehara 11K

Twilio Programmable Messagingを用いたSMS送信入門

twilio messaging sms api

Daizen Ikehara 10.5K

ASP.NET Core に追加された Minimal API を使って webhook エンドポイントを構築

aspnet asp.net asp.net core minimal api twilio c

Daizen Ikehara 9K

9-B-7 結局どれが一番なの？あなたのユーザーに最適な二要素認証の方法を考える

twilio 2fa verify

Daizen Ikehara 6.6K

各ページのテキスト

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

10.

https://hackathon.we-are-ma.jp/twilio2022/

11.

12.

13.

14.

15.

16.

17.

18.

19.

20.

21.

22.

23.

24.

25.

26.

27.

28.

29.

30.

31.

https://jp.twilio.com/docs/voice/twiml

32.

https://twilio.com/console/twiml-bins

33.

34.

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

https://github.com/twilio-labs/dev-phone

35.

36.

37.

38.

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.

43.

44.

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

45.

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.

48.

49.

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

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

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>

https://jp.twilio.com/docs/voice/client/javascript

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>

https://jp.twilio.com/docs/voice/client/javascript

53.

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.

56.

57.

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.

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

https://jp.twilio.com/docs/sms/services

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.

66.

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

67.

68.

69.

70.

71.

72.

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.

76.

77.

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.

https://qiita.com/advent-calendar/2022/twilio

80.

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

Daizen Ikehara

関連スライド

Phaserで始めるゲーム開発入門

ReBAC入門 「関係性」によるアクセス制御とは？

WebRTCのAPIでビデオアプリケーションをつくってみるレクチャー＆ハンズオン

Twilio Programmable Messagingを用いたSMS送信入門

ASP.NET Core に追加された Minimal API を使って webhook エンドポイントを構築

9-B-7 結局どれが一番なの？ あなたのユーザーに最適な二要素認証の方法を考える

各ページのテキスト

ReBAC入門「関係性」によるアクセス制御とは？

9-B-7 結局どれが一番なの？あなたのユーザーに最適な二要素認証の方法を考える