Genesys API를 사용하여 사용자 정보를 가져오는 방법을 자세히 설명드리겠습니다.
Genesys Cloud는 고객 경험을 관리하는 데 필요한 다양한 기능을 제공하는 강력한 플랫폼입니다.
이번 글에서는 Genesys Cloud의 JavaScript SDK를 사용하여 사용자 정보를 가져오는 간단한 HTML 및 JavaScript 예제를 만들어 보겠습니다.
Genesys Cloud란?
Genesys Cloud는 고객의 음성, 이메일, 채팅, 소셜 미디어 등을 통합 관리할 수 있는 클라우드 기반의 컨택 센터 플랫폼입니다. 다양한 API를 제공하여 사용자가 필요에 따라 기능을 확장하거나 맞춤형 애플리케이션을 개발할 수 있습니다. Genesys Cloud의 API는 RESTful 방식으로 설계되어 있어 다른 서비스와의 통합이 매우 용이합니다.
Genesys Cloud API와 JavaScript SDK 소개
Genesys Cloud API는 개발자가 Genesys 플랫폼의 기능을 프로그래밍적으로 활용할 수 있도록 하는 인터페이스입니다. 이 API를 통해 사용자는 실시간 데이터에 접근하고, 이벤트를 트리거하며, 다양한 정보를 조회할 수 있습니다. 특히, JavaScript SDK는 웹 애플리케이션에서 Genesys API를 손쉽게 사용할 수 있도록 도와주는 도구입니다. SDK는 API 호출을 간단하게 처리할 수 있는 메서드를 제공하며, OAuth 2.0을 통한 인증도 지원합니다.
프로젝트 설정
이제 Genesys API를 사용하여 사용자 정보를 가져오는 HTML 및 JavaScript 프로젝트를 설정해 보겠습니다.
1. 개발 환경 준비
이 예제에서는 JavaScript SDK와 HTML을 사용하여 간단한 웹 애플리케이션을 작성할 것입니다. 먼저, 아래와 같은 기본 HTML 구조를 만들어 보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Genesys API 사용자 정보 가져오기</title>
<script src="https://sdk-cdn.mypurecloud.com/javascript/genesys-cloud-client.js"></script>
</head>
<body>
<h1>Genesys 사용자 정보 가져오기</h1>
<button onclick="getUserInfo()">사용자 정보 가져오기</button>
<div id="user-info"></div>
</body>
</html>위의 코드는 기본적인 HTML 페이지를 설정합니다. head 섹션에서 Genesys Cloud JavaScript SDK를 CDN을 통해 불러옵니다. body 섹션에서는 사용자 정보를 가져오는 버튼과 결과를 표시할 div 요소를 추가했습니다.
2. Genesys Cloud 클라이언트 설정
Genesys API를 사용하려면 Genesys Cloud 애플리케이션을 등록하고, 클라이언트 ID와 리다이렉션 URI를 설정해야 합니다. 이는 Genesys Cloud 개발자 포털에서 수행할 수 있습니다.
- 클라이언트 ID(Client ID): Genesys Cloud 애플리케이션의 고유 식별자입니다.
- 리다이렉션 URI(Redirect URI): 사용자가 인증을 완료한 후 돌아올 URL입니다.
클라이언트 설정이 완료되면 JavaScript를 사용하여 Genesys Cloud API 클라이언트를 초기화해야 합니다. 아래 코드에서 이를 수행하는 방법을 보여줍니다.
<script>
// Genesys Cloud 초기화 설정
const clientId = 'YOUR_CLIENT_ID';
const redirectUri = 'YOUR_REDIRECT_URI'; // 예: 'http://localhost/callback'
// Genesys Cloud 클라이언트 생성
const platformClient = require('platformClient');
const client = platformClient.ApiClient.instance;
client.setEnvironment('mypurecloud.com'); // 지역에 맞게 환경 설정
client.setPersistSettings(true, 'my_app');
// 사용자 인증
client.loginImplicitGrant(clientId, redirectUri)
.then(() => console.log('로그인 성공'))
.catch(err => console.error('로그인 실패:', err));
</script>위 코드는 Genesys Cloud API 클라이언트를 초기화하고, OAuth 2.0 인증을 통해 사용자를 인증합니다. loginImplicitGrant 메서드는 클라이언트 ID와 리다이렉션 URI를 사용하여 인증을 수행합니다. 인증이 성공하면 "로그인 성공" 메시지가 콘솔에 출력됩니다.
3. 사용자 정보 가져오기
이제 사용자의 정보를 가져오는 기능을 추가해 보겠습니다. Genesys Cloud의 UsersApi를 사용하여 현재 인증된 사용자의 정보를 조회할 수 있습니다. 다음은 이 기능을 구현하는 JavaScript 코드입니다.
<script>
function getUserInfo() {
const usersApi = new platformClient.UsersApi();
usersApi.getUsersMe()
.then(user => {
console.log('사용자 정보:', user);
document.getElementById('user-info').innerText = JSON.stringify(user, null, 2);
})
.catch(err => console.error('사용자 정보 가져오기 실패:', err));
}
</script>이 코드는 getUserInfo 함수를 정의하여 getUsersMe 메서드를 호출합니다. 이 메서드는 현재 인증된 사용자의 정보를 가져와 콘솔에 출력하고, HTML 페이지의 div 요소에 표시합니다.
4. 결과 확인
모든 설정이 완료되면 HTML 파일을 웹 서버에 호스팅하거나 로컬에서 열어 테스트할 수 있습니다. 페이지를 열고 "사용자 정보 가져오기" 버튼을 클릭하면 Genesys API를 통해 사용자 정보를 가져와 화면에 표시됩니다.
결론
Genesys API를 사용하여 사용자 정보를 가져오는 HTML 및 JavaScript 예제를 만들었습니다. Genesys Cloud는 매우 유연한 플랫폼이며, 다양한 API와 SDK를 제공하여 개발자가 손쉽게 기능을 확장하고 맞춤형 애플리케이션을 개발할 수 있도록 돕습니다. 이 예제를 통해 Genesys Cloud API의 기본적인 사용 방법을 이해하고, 실제 프로젝트에 적용하는 데 도움이 되길 바랍니다.
다음 글에서는 더 복잡한 기능을 구현하거나 다른 API 엔드포인트를 사용하는 방법에 대해 다뤄보겠습니다.
질문이 있거나 도움이 필요하시면 댓글로 남겨 주세요! 감사합니다.
'C#' 카테고리의 다른 글
| 2개의 스레드를 활용하여 압축 및 해제 작업을 동시에 수행하는 방법 (0) | 2024.09.15 |
|---|---|
| Genesys API를 사용하여 채팅 기록 가져오기: HTML 및 JavaScript 샘플 가이드 (0) | 2024.08.24 |
| WPF에서 Blazor로 마이그레이션: 추가적인 도전 과제와 해결 방법 (0) | 2024.06.30 |
| WPF 및 WinForms 애플리케이션을 Blazor로 마이그레이션하는 이유와 방법 (0) | 2024.06.30 |
| Part 2: C#의 새로운 문법 기능 예제 (0) | 2024.06.24 |
