Amazon Connectチャットは指定したドメインでしか起動できません。ただし、通信の傍受などで通信改竄される余地があります。この対策として、JWTトークンを用いて、通信改竄を防ぐ方法が提供されています。この記事では具体的な手順について解説していきます。
Amazon Connect チャット
Amazon Connect チャットはリアルタイムコミュニケーションをするためのチャットサービスです。基本的な設定方法については以下の記事を参考にしてください。
https://www.alleeks.com/acblog/chat-setting
Amazon Connectチャットは指定したドメインでしか起動できませんが、通信の傍受などで通信改竄される余地があります。この対策として、JWTトークンを用いて、通信改竄を防ぐ方法が提供されています。この記事では具体的な手順について解説していきます。
チャットのセキュリティを有効にする
サイドバーの「チャネル」から「チャットウィジェット」をクリックし、設定画面に移動します。
ウィジェットの設定画面を開き、右上のチャットを埋め込むサイトを指定するための項目で「編集」をクリックしてください。
「新しいチャットリクエストにセキュリティを追加」で「はい」を選択します。最後に、「保存」をクリックして完了です。
JWTを渡すサーバーを立ち上げる
まず、サーバーを立ち上げます。ここではNode.jsでサーバーを動かします。/tokenというエンドポイントで、JWTトークンを渡します。server.jsというファイルに以下のコードを書いてください。
// server.js
const express = require('express');
const cors = require('cors');
const jwt = require('jsonwebtoken');
const app = express();
app.use(cors());
// ウィジェットID
const WIDGET_ID = 'xxxxxx';
// セキュリティキー
const CONNECT_SECRET = 'xxxxxx';
const JWT_EXP_DELTA_SECONDS = 600;
const JWT_ALGORITHM = 'HS256';
app.get('/token', (req, res) => {
const payload = {
sub: WIDGET_ID,
iat: Math.floor(Date.now() / 1000),
exp: Math.floor(Date.now() / 1000) + JWT_EXP_DELTA_SECONDS
};
const options = {
algorithm: JWT_ALGORITHM,
header: {
typ: "JWT",
alg: 'HS256'
}
};
const encodedToken = jwt.sign(payload, CONNECT_SECRET, options);
res.json({ data: encodedToken });
});
app.listen(5000, () => {
console.log('Server running on port 5000');
});
ウィジェットIDは、以下の画像で赤で囲んでいるIDを入れてください。セキュリティキーは、オレンジで囲んでいる「キーをコピー」からコピーできます。
server.jsが存在するディレクトリで、ライブラリをインストールし、サーバーを立ち上げてください。
npm install express cors jsonwebtoken
node server.js
チャットウィジェットを埋め込み、JWTを受け取る
次に、チャットウィジェットの埋め込んだHTMLファイルを以下のように用意してください。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>チャット画面</title>
</head>
<body>
<!-- scriptタグの中をペースト -->
<script>
(function(w, d, x, id){
s=d.createElement('script');
s.src='https://xxxxxxxxx/amazon-connect-chat-interface-client.js';
s.async=1;
s.id=id;
d.getElementsByTagName('head')[0].appendChild(s);
w[x] = w[x] || function() { (w[x].ac = w[x].ac || []).push(arguments) };
})(window, document, 'amazon_connect', 'xxxxxxxxxxx');
amazon_connect('styles', { openChat: { color: '#ffffff', backgroundColor: '#f471b0'}, closeChat: { color: '#ffffff', backgroundColor: '#de673f'} });
amazon_connect('snippetId', 'xxxxxxxxx');
amazon_connect('supportedMessagingContentTypes', [ 'text/plain', 'text/markdown' ]);
// これを追加
amazon_connect("authenticate", function (callback) {
window.fetch("サーバーへのパス/token").then((res) => {
res.json().then((data) => {
callback(data.data);
});
});
});
</script>
</body>
</html>
HTMLファイルをlocalhostで立ち上げ、実際にブラウザで開くと、チャットウィジェットが右下に表示されます。チャットを利用することができれば成功です。
まとめ
Amazon Connectのチャットを利用する際に、JWTトークンを利用して、セキュリティ安全性を高めることができます。サーバーの用意が必要ですが、通信の傍受や改ざんを防ぐのに役立ちます。