Twilio Flexの始め方（エージェント管理）

:::note alert
2023年5月1日を持ちまして、株式会社KDDIウェブコミュニケーションズのTwilioリセール事業が終了したため、本記事に記載されている内容は正確ではないことを予めご了承ください。
:::

# はじめに

みなさん、こんにちは。
KDDIウェブコミュニケーションズのTwilioエバンジェリストの高橋です。

[Twilio Flex Advent Calendar 2021](https://qiita.com/advent-calendar/2021/twilio-flex) 8日目の記事となります。また、以前書いた以下の記事を2021年版としてリライトしたものになります。
[Twilio Flexでのユーザ管理方法](https://qiita.com/mobilebiz/items/684e45a7ae25312fa236)

[前回の記事](https://qiita.com/mobilebiz/items/2af0d9fd09cff1040878)では、TaskRouterの概要についてご紹介しましたので、本記事はいよいよTaskRouterの各機能の詳細について説明をします。
まずは、ワーカー（エージェント）の管理方法について見ていきましょう。

# ワーカーの管理

前回の記事にも書いたように、ワーカーはタスクを処理するためのオブジェクトで、通常はコンタクトセンターのオペレーターに対して割り当てます。Twilio Flex上には、デフォルトで15,000のワーカーを作成することができます。
Flex をインストールした Twilioアカウント（オーナーと呼びます）は自動的にワーカーとしても登録され、Flex をカスタマイズしたり、スーパーバイザーとしてエージェントの管理をしたり、もちろん Flex を利用して自身でコールに応対することができます。
オーナーが別のTwilioアカウントをFlexプロジェクトに招待することで、招待された人がワーカーとしてFlexを利用できるようになります。

## ログイン

Flexは、Flex上でログイン管理が実装されています。
![スクリーンショット 2021-12-12 10.29.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86046/92e0617d-5ef5-20fc-faa5-e3fc968be248.png)
Flexの右上の自分自身のアイコンをクリックすると、**Log out**が選択できます。
ログアウトすると、以下のようなログイン画面が表示されます。

![スクリーンショット 2021-12-12 10.31.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86046/0eca588c-2649-a2e5-cbb2-2ca9aa42fc11.png)

先に説明したように、TwilioアカウントをFlexと連携している場合は、下の方にある**Login with Twilio**を選択します。

☝️<font color='red'>**注意**</font>
KDDIウェブコミュニケーションズ（KWC）経由でアカウントを作成した場合、**Login with Twilio**のリンクをクリックすると、USアカウントのログイン画面に遷移してしまいますので、表示されているURLの「？」の前に「kddi-web/」を挿入してください。
![スクリーンショット 2021-12-12 10.42.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86046/3754f96e-aefe-d5af-9f3c-46fc6189261c.png)

## 外部SSOサービスを利用する

エージェントが多い場合は、いちいちTwilioアカウントを作成するのは現実的ではありません。そのためFlexでは、外部のSSOサービスを利用することができるようになっています。Twilio Flexでは、SAML2.0に対応したidPを利用することができます。例えば、以下のサービスへの設定方法はドキュメントも用意されています。

- [Okta](https://www.twilio.com/docs/flex/admin-guide/setup/sso-configuration/okta)
- [Microsoft Azure](https://www.twilio.com/docs/flex/admin-guide/setup/sso-configuration/azure-ad)
- [Google](https://www.twilio.com/docs/flex/admin-guide/setup/sso-configuration/google)
- [Salesforce](https://www.twilio.com/docs/flex/admin-guide/setup/sso-configuration/salesforce)
- [Microsoft ADFS](https://www.twilio.com/docs/flex/admin-guide/setup/sso-configuration/adfs)

今回は Okta を利用してみたいと思います。


# Okta連携

## Okta とは

Okta は、主に企業のIDを管理するクラウドサービスです。 Okta に対応したサービスを利用する場合、ユーザは一度 Okta にログインしておけば、それぞれのサービスで再度ログインする必要がなくなります。もちろん、ユーザ情報も Okta にだけ登録しておけば良いので、アカウント管理も簡単になります。
![スクリーンショット 2021-12-13 8.32.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86046/981faffc-9928-c0b0-df2e-cad5b026abe0.png)

### 準備

- 作業に先立ち、[こちらのリンク](https://developer.okta.com)から OKTA のデベロッパーアカウントを作成してください。デベロッパーアカウントは、月間1,000アクティブユーザまでは無料で利用できます。
- Flex のセットアップを完了させておいてください。セットアップ方法については、以下の記事を御覧ください。
[Twilio Flexの始め方（セットアップ編）](https://qiita.com/mobilebiz/items/d06a29214b437339d226)

## 作業手順

では早速 Okta にユーザを登録していきましょう。大まかな手順は以下の通りです。

1. Flex をアプリケーションとして登録する。
2. アプリケーションの環境設定を行う。
3. Flex に引き渡すユーザ情報を定義する。
4. アプリケーション連携URLを取得する。
5. ユーザを作成して、アプリケーションに紐付ける。
6. Flex 側での設定を行う。

### Flex をアプリケーションとして登録する

- Okta [デベロッパーサイト](https://developer.okta.com)にログインします。
![スクリーンショット 2021-12-13 8.37.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86046/8ede3a23-5a07-6da6-7329-fffd85dd25ac.png)

- 左上のハンバーガーメニューを押すと、スライドメニューが表示されます。
- **Applications**の中の**Applications**を選択します。
![スクリーンショット 2021-12-13 8.39.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86046/dd493915-0707-390d-21d0-98eada5cf613.png)

- **Create App Integration**ボタンを押します。
![スクリーンショット 2021-12-13 8.41.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86046/7c8c3d27-6ef2-718f-8e25-70a1380217d8.png)

- **SAML 2.0**を選択し、**Next**ボタンを押します。
![スクリーンショット 2021-12-13 8.43.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86046/c5fc7fc9-14e3-f2bb-5b88-52ed51f0be8d.png)

- **App name**に「Flex」入力して、**Next**ボタンを押します。
- **SAML Setting**画面に遷移します。
![スクリーンショット 2021-12-13 13.41.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86046/f2dbbb9d-528c-71d0-4b5d-018cf2e0aff2.png)

- **Single sign on URL**に「`https://iam.twilio.com/v1/Accounts/ACxxxx/saml2`」と入力します（ACxxxxはご自分のFlexプロジェクトのAccountSidに置き換えてください）。
- **Audience URI(SP Entity ID)**に「`https://iam.twilio.com/v1/Accounts/ACxxxx/saml2/metadata`」と入力します（ACxxxxはご自分のFlexプロジェクトのAccountSidに置き換えてください）。
- **Application username**のプルダウンリストから「Email」を選択します。
- **Attribute Statements(optional)**に、以下の内容を追加します。

Name|Name format|Value
:--|:--|:--
full_name|Basic|`${user.lastName} ${user.firstName}`
roles|Basic|user.roles
email|Basic|user.email
image_url|Basic|user.profileUrl

この例では、 Okta 側で設定したユーザの姓名を full_name 、ユーザのプロファイル画像を image_url 、ユーザの役割を roles 、ユーザのメールアドレスを email をいうパラメータ名で Flex に渡しています。このように、 Flex 側に渡したいユーザ個別のパラメータはここで設定していきます。

- **Next**ボタンを押します。
- Feedbackページに遷移します。
![スクリーンショット 2021-12-13 9.03.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86046/27f6d3dd-8c30-d4e4-85ae-4331864ac54b.png)

- 上記の画面のように選択を行って、**Finish**ボタンを押します。

### アプリケーション連携URLを取得する

- 作成したアプリケーションの**Sign On**タブに移動します。
![スクリーンショット 2021-12-13 9.26.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86046/f706d650-ee51-cbc0-1ff2-3454eb4a84de.png)

- **View Setup Instructions**ボタンを押します。
- 各種設定情報が別ウィンドウに表示されます。
![スクリーンショット 2021-12-13 9.28.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86046/a3a52438-cf55-a2d1-a8cb-84e00840e14e.png)

このページは後ほどの設定で利用しますので、このまま閉じないようにしておきましょう。

### ユーザを作成して、アプリケーションに紐付ける

Okta のデフォルト設定では、 Flex 側に引き渡すパラメータ**roles**が定義されていないので、まずはそちらのパラメータを設定します。

![スクリーンショット 2021-12-13 9.33.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86046/354f99a4-6e25-dbf0-beb4-81ab4c09ee08.png)
- **Directory**メニューの中の**Profile Editor**を開きます。
- **Profile**の中にある**okta**の**User(default)**リンクを押します。
- **Attributes**セクションの**Add Attribute**ボタンを押します。
![スクリーンショット 2021-12-13 9.39.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86046/c1de7d35-099a-ec54-2c2c-75d53e461379.png)

- 以下の内容で新しい Attribute を登録します。

項目名|値
:--|:--
Data Type|String
Display name|Roles
Variable name|roles
Description|Set `agent` or `admin` or `supervisor`
Attribute required|チェック

- **Save**ボタンを押してしばらくするとダイアログが閉じます。

では、続いてユーザを追加しましょう。

- **Directory**メニューの中の**People**を選択します。
![スクリーンショット 2021-12-13 9.47.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86046/6b53f7c5-811a-23be-785a-c6e3594fdf3a.png)

- **Add Person**ボタンを押します。
- ユーザ登録画面が開くので、以下のように各項目を追加していきます。
![スクリーンショット 2021-12-13 9.51.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86046/99d68693-9fa1-07c9-3893-730953d81819.png)

First nameとLast nameには日本語も使えます。
Rolesは、「agent」、「admin」、「supervisor」のいずれかを入力しますが、今回は「agent」にしておきます。

**Send user activation email now**にチェックを入れて、**Save**ボタンを押すと、登録したいユーザにメールが届きますので、パスワードを設定してもらってください。

![スクリーンショット 2021-12-13 11.23.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86046/569c7900-4a3a-6166-59b3-8d079618ffac.png)
今回は、合計４名のエージェントを登録しておきました。

次に作成したユーザをアプリケーションにアサインしましょう。

- **Applications**メニューの中の**Applications**を選択します。
![スクリーンショット 2021-12-13 11.29.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86046/c3807081-61e6-e065-8603-1a11b4c6bfa4.png)

- **Assign Users toApp**ボタンを押します。
![スクリーンショット 2021-12-13 11.32.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86046/a426f17c-177e-32a9-7168-7362afadb366.png)

- 左側（Applications）のペインで、「Flex」にチェックを入れます。
- 右側（People）のペインで、今回作成したユーザーにチェックを入れます。
- **Next**ボタンを押します。
- **Confirm Assignments**ボタンを押します。

## Flex 側での設定を行う

- Twilio の管理コンソールにログインします。
- **Flex**メニューの中の**Single Sign-On**を選択します。
![スクリーンショット 2021-12-13 11.46.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86046/1754e7b2-d4ac-2992-4492-15d29cdfb552.png)

- **FRIENDRY NAME**には、「Okta」と入力します。
- **X.509 CERTIFICATE**、**IDENTITY PROVIDER ISSUER**、**SINGLE SIGN-ON URL**の各項目に、先程開いておいたページの内容をコピーします。
- **Save**ボタンを押します。

## テスト

ログインに先立ち、 Twilio Runtime ドメイン名が必要になりますので、以下の手順で調べておきます。

- <https://jp.twilio.com/console/runtime/overview>を開いて概要を確認します。
![Runtime_Domain (1).png](https://qiita-image-store.s3.amazonaws.com/0/86046/469d59ca-236e-d437-2d44-37d8af683140.png)

- ドメイン名の右側にあるコピーアイコンをクリックして、ドメイン名をコピーしておきます。

では、実際にログインしてみましょう。
Okta のサイトにログインしている場合は、このタイミングで一度ログアウトしてください。

- ブラウザを開き、 `https://flex.twilio.com/` を開きます。
- Runtime Domain を入力する画面が表示されます。

![スクリーンショット 2018-12-30 11.07.14.png](https://qiita-image-store.s3.amazonaws.com/0/86046/c512f0a2-5b99-0c5d-322e-81106831e06d.png)

- 先ほどコピーしたドメイン名（**.twil.ioは不要です**）を入力して、**LAUNCH**ボタンを押します。
- OKTA のログイン画面が表示されます。

![OKTA_Sign-in.png](https://qiita-image-store.s3.amazonaws.com/0/86046/f058a01e-4dfe-8e0b-6d85-c39dbb817b13.png)

- OKTA で作成したアカウント（メールアドレスとパスワード）でサインインをしてみます。
- 無事にログインができれば成功です。 
- ![スクリーンショット 2021-12-13 13.51.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86046/3609dd8a-bf69-087e-f12a-47cac83b4320.png)

# まとめ

今回は、エージェントの管理を外部のSSOと連携させる方法を解説しました。
次回はIVRを使って要件ごとにエージェントを切り替える仕組みを実装していきたいと思います。

★次の記事
[Twilio Flexの始め方（ACD編）](https://qiita.com/mobilebiz/items/d64f6414a1acda4085eb)

---
### Twilio（トゥイリオ）とは

https://cloudapi.kddi-web.com
Twilio は音声通話、メッセージング（SMS /チャット）、ビデオなどの 様々なコミュニケーション手段をアプリケーションやビジネスへ容易に組み込むことのできるクラウド API サービスです。初期費用不要な従量課金制で、各種開発言語に対応しているため、多くのハッカソンイベントやスタートアップなどにも、ご利用いただいております。

自己紹介|　
:--|:--
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86046/b51a8b88-abd5-ce5e-195a-de3564ba2ae6.png" height='200' width='150'/>|高橋克己（Katsumi Takahashi） 自称「<font color='red'>赤い芸人</font>」<br />グローバル・インターネット・ジャパン株式会社　代表取締役<br />株式会社KDDIウェブコミュニケーションズ　Twilio事業部エバンジェリスト<br /><br />2001年より大手通信事業者の法人サービスの教育に携わり、企業における電話のしくみや重要性を研究。2016年よりTwilio事業部にジョインし、Twilioを使ったスマートコミュニケーションの普及活動を精力的に行っている。<br />2015 Hall of Doers<br />2019 Twilio Champions