この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
1 はじめに
CX事業本部の平内（SIN）です。
Amazon Connect Streams API（Streams） を使用すると、既存のWebアプリケーションをAmazon Connectと統合することができます。
先日アナウンスのあった、Chat機能への対応もあり、こちらもバージョンは、1.4となっておりました。
今回は、エージェント専用のページ（LOGINボタンや、ログイン中のユーザー名表示）で、この最新のStreamsを配置する手順を纏めてみました。
2 構成
構成は、以下のとおりです。
Amazon Connect Streams API（Streams） にアクセスするJavaScriptを含むhtmlは、S3バケットに配置されます。エージェントは、S3バケットにhttpsでアクセスし、表示されたCCPを使用します。
Connectへのログイン画面は、イベントをラップしたJsvaScritpで作成されています。
3 設置方法
設置の要領は以下のとおりです。
(1) GitHub
必要なファイルは、GitHubに起きました。
$ git clone https://github.com/furuya02/AmazonConnectExtension003.gitファイル構成は、概ね以下のとおりになっています。
.
├── cdk
│ ├── cdk.json
│ ├── bin
│ │ └── cdk.ts <= CDKコード
│ ├── lib
│ │ └── cdk-stack.ts <= CDKコード
│ ├── cdk.json
│ └── tsconfig.json
└── sample
├── index.html
├── connect-streams.js <= Amazon Connect Streams API（Streams）Ver1.4
└── style.css(2) CDKのデプロイ
注: CDKで作成しているリソースは、S3バケットのみです。他のConnect拡張シリーズとの共通化のため、CDKを使用しています。
CDKでビルド・デプロイします。
$ cd AmazonConnectExtension003
$ cd cdk
$ npm install
$ npm run build
$ cdk synth
$ cdk bootstrap --profile MyProfile <= 当該アカウント（リージョン）で初めて利用する場合
$ cdk deploy --profile MyProfile
$ cd ..デプロイが成功すると、最後にコンソールにS3のバケット名が表示されますのでコピーしておきます。
Outputs:
AmazonConnectExtension003Stack.CcpBucket = connect-ex-login-ccp-login-ccp-bucket-xxxxxxxxxxx(3) index.htmlの編集
sample/index.htmlで以下の箇所にConnectのインスタンス名とリージョンを設定して下さい。
const connect_instance_name = 'Sample';
const region = 'ap-northeast-1';(4) htmlファイル等のアップロード
sampleの中にある index.html、style.css 及び、connect-streams.jsをS3にアップロードします。
$ aws s3 cp sample/index.html s3://connect-ex-login-ccp-login-ccp-bucket-xxxxxxxxxxx/ --acl public-read --profile=MyProfile
$ aws s3 cp sample/style.css s3://connect-ex-login-ccp-login-ccp-bucket-xxxxxxxxxxx/ --acl public-read --profile=MyProfile
$ aws s3 cp sample/connect-streams.js s3://connect-ex-login-ccp-login-ccp-bucket-xxxxxxxxxxx --acl public-read --profile=MyProfile
(5) アプリケーション統合
Connectのインスタンス設定からアプリケーション統合を開き、オリジンの追加で設置したバケットのURL（http:s//{バケット名}.s3-ap-northeast-1.amazonaws.com）を設定します。
https://connect-ex-login-ccp-login-ccp-bucket-xxxxxxxxxxxx.s3-ap-northeast-1.amazonaws.com
(6) IPアドレス制限
ここまでの設定で、S3に設置した、index.html等は、公開され何処からでもアクセス可能になります。特定のIPアドレスからのみアクセスを許可する場合は、下記のようにホワイトリストを設定して下さい。
{
"Version": "2012-10-17",
"Id": "XXXXXXXXXXXXXXXXX",
"Statement": [
{
"Sid": "XXXXXXXXXXXXXXXXX",
"Effect": "Deny",
"Principal": "*",
"Action": "s3:*",
"Resource": "arn:aws:s3:::connect-ex-login-ccp-login-ccp-bucket-xxxxxxxxxxxx/*",
"Condition": {
"NotIpAddress": {
"aws:SourceIp": [
"10.10.10.1",
"10.10.20.200/22"
]
}
}
}
]
}以上で、設置は完了です。
4 ログイン
- 下記のURLを開くと一番上にログインのボタンを確認できます。
https://devio2023-media.developers.io/wp-content/uploads/2019/01/httpstls.oguri_.classmethod.infoindex.html-2019-01-25-06-37-20.png
- ログインを押すと、タブが１つ追加され、そこでConnectへのログインID及びパスワードを入力します。
- ログインが完了すると、ログインで表示されたタブは閉じられます。
6 最後に
今回は、Amazon Connnectの拡張の１つとして、エージェント用のログインページを作成してみました。
amazon-connect-streamsの基本的なセットアップ要領については、下記のページで纏めていますので、そちらをご参照下さい。