[Amazon Connect 拡張] Amazon Connect Streams API（Streams）でエージェント用のログインページを作成する

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://dev.classmethod.jp/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の基本的なセットアップ要領については、下記のページで纏めていますので、そちらをご参照下さい。