Amazon Connect 및 Amazon Connect Participant Service API와 기본적으로 상호 작용하는 애플리케이션의 채팅 위젯을 설정하려면 어떻게 해야 하나요?

해결 방법

Amazon Connect 및 Amazon Connect Participant Service API를 사용하여 애플리케이션에서 직접 고객 채팅 문의를 시작하려면 다음 작업을 수행하세요.

고객이 채팅 문의를 시작할 때 StartChatContact Amazon Connect API를 호출

고객이 채팅 문의를 시작할 때 StartChatContact Amazon Connect API를 호출하도록 애플리케이션을 구성합니다. API 응답은 ParticipantToken 값을 반환합니다. 이 값은 CreateParticipantConnection API를 호출하는 데 필요합니다.

중요: API를 호출하는 클라이언트가 connect:StartChatContact 작업을 수행하려면 AWS Identity and Access Management(AWS IAM) 권한이 있어야 합니다.

GitHub 웹사이트에서 amazon-connect-chat-ui-examples AWS CloudFormation 템플릿을 사용하여 StartChatContact API를 호출하는 데 필요한 리소스를 배포합니다. 템플릿은 필수 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" // A display name of your customer during a chat contact
    }
  }
);

자세한 내용은 GitHub 웹사이트에서 axios 명령어를 참조하세요.

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는 Signature Version 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))
});

WebSocket 연결을 통해 채팅 이벤트 및 메시지 수신

WebSocket 연결을 열고 "aws/chat" 주제를 구독하면 WebSocket을 통해 채팅 이벤트와 메시지를 수신할 수 있습니다. 이렇게 하려면 "message" 이벤트에 대한 이벤트 리스너를 추가하세요.

"message" 이벤트에 대한 이벤트 리스너를 만드는 JavaScript 코드 예시:

ws.addEventListener("message", (event) => {
  // process event here
  const response = JSON.parse(event.data);
  if (response.topic === "aws/chat") {
  const responseMessage = JSON.parse(response.content);
    if (responseMessage.Type === "MESSAGE") {
      // display message in interface here
    }
  }
}

responseMessage 객체의 구조에 대한 자세한 내용은 Amazon Connect 설명서의 항목을 참조하세요.

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
});