Amazon Q Business を Web サイトに組み込む（ユーザ認証編）

記事タイトルとURLをコピーする

こんにちは、やまぐちです。

概要
やってみる
- Web サイトの作成
- Web サイトに埋め込んでみる
まとめ

概要

今回は、以下ドキュメントを参考に Amazon Q Business を Web サイトに組み込んでみたいと思います。 docs.aws.amazon.com

よく Web サイト内にある、質問を回答してくれるチャットにイメージが近いです。

やってみる

Web サイトの作成

今回は、CloudFront + S3 の静的 Web サイト内に Amazon Q Business のチャットを埋め込んでみます。

サイトはこんな感じです。~~（素晴らしいサイトですね！）~~

Web サイトに埋め込んでみる

Amazon Q Business に移動し、Application 内の「Amazon Q embedded」を選択します。

今回使用する Applications は以下ブログで作成した Applications を利用します。 blog.serverworks.co.jp ※本来であれば、サイト内にチャットを埋め込む場合は不特定多数のユーザの利用が想定されます。
そのため、Amazon Q Business の Application はユーザ認証ではなく匿名アクセスで作成するのが一般的と考えます。
しかし、今回は匿名アクセスではなく IAM Identity Center のユーザ認証で検証を進めておりますのでご了承ください。

「Add Allowed websites」を選択して、Web サイトの URL (今回の場合は CloudFront の URL を指定しています) を入力します。

HTML ファイルは以下のような形で設定しています。
iframeに Q Business のリンクを記載してます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Hello</title>
</head>
<body>
    <h1>こんにちは</h1>
    <h1>さようなら</h1>
    <iframe src="https://xxxxxx.chat.qbusiness.us-east-1.on.aws/"
            style="min-width: 450px; width: 100%; height: 500px; max-width: 960px; border: none;">
    </iframe>
</body>
</html>