Amazon Connect および Amazon Connect Participant Service API とネイティブにやり取りするアプリケーションのチャットウィジェットをセットアップするにはどうすればよいですか?

解決方法

Amazon Connect と Amazon Connect Participant Service API を使用してアプリケーションから直接カスタマーチャットコンタクトを開始するには、以下が実行されるようにアプリケーションを設定します。

お客様がチャットコンタクトを開始したときに StartChatContact Amazon Connect API を呼び出す

お客様がチャットコンタクトを開始したときに StartChatContact Amazon Connect API が呼び出されるようにアプリケーションを設定します。API レスポンスにより、次のステップで CreateParticipantConnection API を呼び出すために必要な ParticipantToken 値が返されます。

重要: API 呼び出しを行うクライアントが connect:StartChatContact アクションを実行するには、AWS Identity and Access Management (IAM) アクセス許可が必要です。

アプリケーションから StartChatContact API を呼び出すために必要なリソースをデプロイするために、GitHub の AWS CloudFormation テンプレート amazon-connect-chat-ui-examples を使用できます。このテンプレートにより、必要な IAM アクセス許可が含まれている AWS Lambda 関数を呼び出す Amazon API Gateway エンドポイントが作成されます。AWS Lambda 関数は Amazon Connect StartChatContact API を呼び出し、その呼び出しから結果を返します。

StartChatContact API リクエストの例 (JavaScript)

アプリケーションで axios を使用している場合、次の JavaScript コードを使用して StartChatContact API を呼び出すことができます。

const startChatApi = "https://xxxxxxxxxx.execute-api.<region>.amazonaws.com/Prod"; // API endpoint you deployed with the CloudFormation template. 

...

axios.post(
  startChatApi,
  {
    ParticipantDetails: {
      DisplayName: "CUSTOMER" // This is going to be a display name of your customer during a chat contact
    }
  }
);

CreateParticipantConnection Amazon Connect Participant Service API を呼び出し、ParticipantToken 値を渡す

チャットコンタクトが開始された後に CreateParticipantConnection Amazon Connect Participant Service API が呼び出されるようにアプリケーションを設定します。

CreateParticipantConnection API を呼び出すと、WebSocket URL と ConnectionToken が返されます。クライアントは WebSocket URL に手動で接続し、目的のトピック ("aws/chat") にサブスクライブして、チャット参加者の接続を作成する必要があります。

注: Amazon Connect Participant Service API では、署名バージョン 4 認証は使用されません。X-Amz-Bearer リクエストヘッダー値には、代わりに、ParticipantToken または ConnectionToken 値を使用する必要があります。ParticipantToken 値は、CreateParticipantConnection API のみを呼び出すときに使用されます。他の Amazon Connect Participant Service API では、ConnectionToken 値を渡す必要があります。

CreateParticipantConnection API リクエストの例 (JavaScript)

アプリケーションで axios を使用している場合、次の JavaScript コードを使用して CreateParticipantConnection API を呼び出すことができます。

const participantServiceEndpoint = "https://participant.connect.<region>.amazonaws.com";
// Replace <region> with the one that you are using. i.e. us-west-2. Endpoint list is available in https://docs.aws.amazon.com/general/latest/gr/connect_region.html

...

const requestHeaders = {
  "X-Amz-Bearer": "ParticipantToken", // Replace "ParticipantToken" with the one you obtained from the response of StartChatContact API
  "Content-type": "application/json"
};
const requestBody = {
  "Type": ["WEBSOCKET", "CONNECTION_CREDENTIALS"]
};

axios.post(participantServiceEndpoint + "/participant/connection", requestBody, {
  headers: requestHeaders
});

返された WebSocket URL を使用して WebSocket 接続を作成し、「aws/chat」トピックにアプリケーションをサブスクライブする

CreateParticipantConnection API を呼び出した後、クライアントは返された WebSocket URL に手動で接続し、「aws/chat」 トピックにサブスクライブする必要があります。

詳細については、Amazon Connect Participant Service API リファレンスの「CreateParticipantConnection」を参照してください。

WebSocket 接続を作成し、「aws/chat」トピックにクライアントをサブスクライブする JavaScript コードの例

const ws = new WebSocket(websocketUrl); // Here, you use the websocket URL that you obtained from the response of CreateParticipantConnection API

const initialMessage = {
  topic: "aws/subscribe",
  content: {
    topics: ["aws/chat"]
  }
};
ws.addEventListener("open", () => {
  ws.send(JSON.stringify(initialMessage))
});

Amazon Connect Participant Service API を呼び出して、チャットメッセージやイベントを送信する

注: WebSocket 接続を介してメッセージやイベントを直接送信することはできません。代わりに、Amazon Connect Participant Service API のいずれかを使用する必要があります。

チャットメッセージを送信するには、SendMessage Amazon Connect Participant Service API を呼び出します。

• または -

イベントを送信するには、SendEvent Amazon Connect Participant Service API を呼び出します。

重要: X-Amz-Bearer リクエストヘッダーについては、CreateParticipantConnection API によって返される ConnectionToken 値を使用してください。

SendMessage API リクエストの例 (JavaScript)

アプリケーションで axios を使用している場合、次の JavaScript コードを使用して SendMessage API を呼び出すことができます。

const requestHeaders = {
  "X-Amz-Bearer": "ConnectionToken", // Replace "ConnectionToken" with the one you obtained from the response of CreateParticipantConnection API
  "Content-type": "application/json"
};
const requestBody = {
  "ClientToken": "unique string", // [Optional] A unique, case-sensitive identifier that you provide to ensure the idempotency of the request 
  "Content": message, // The actual chat message
  "ContentType": "text/plain", // Currently, supported type is text/plain
};

axios.post(participantServiceEndpoint + "/participant/message", requestBody, {
  headers: requestHeaders
});

SendEvent API リクエストの例 (JavaScript)

アプリケーションで axios を使用している場合、次の JavaScript コードを使用して SendEvent API を呼び出すことができます。

const requestHeaders = {
  "X-Amz-Bearer": "ConnectionToken", //Replace "ConnectionToken" with the one you obtained from the response of CreateParticipantConnection API
  "Content-type": "application/json"
};
const requestBody = {
  "ClientToken": "unique string", //[Optional] A unique, case-sensitive identifier that you provide to ensure the idempotency of the request 
  "ContentType": "application/vnd.amazonaws.connect.event.typing", //Typing event. You can specify "application/vnd.amazonaws.connect.event.connection.acknowledged" for acknowledged event
};

axios.post(participantServiceEndpoint + "/participant/event", requestBody, {
  headers: requestHeaders
});

---