ReportViewer를 통해 웹 앱에 Wyn Enterprise 임베드

소개

Wyn Enterprise는 협업형 셀프 서비스 리포팅과 분석, 데이터 시각화, 데이터 조정(Moderation), 대시보드를 제공하는 BI 소프트웨어입니다. 사용자는 자신의 데이터로 대시보드와 리포트를 자유롭게 설계할 수 있고, 개발팀은 임베디드 BI 로 이 기능을 기존 애플리케이션 내부에 통합할 수 있습니다.

이전 글에서는 iFrame으로 Wyn을 웹 앱에 호스팅 하는 방법을 다뤘습니다. 이번 글에서는 Wyn이 제공하는 ReportViewer 로 임베드하는 방법을 살펴봅니다. ReportViewer에는 탐색, 매개변수 패널, 내보내기, 인쇄 등 필수 기능이 포함되어 있어 별도 구현이 필요 없습니다.

인증 프로세스

모든 비즈니스 애플리케이션은 보안이 중요합니다. Wyn은 자체 인증 방식을 제공하여 데이터를 안전하게 보호합니다. /connect/token 엔드포인트에 필요한 파라미터를 보내 액세스 토큰 을 발급받습니다.

엔드포인트에는 grant_type , username , password , client_id , client_secret 이 필요합니다. 사용자명/비밀번호는 Wyn 포털 로그인 정보와 동일합니다.

예시: 토큰 요청 (JavaScript)

 Copy 
 async function getReferenceToken(url, user, password) {
  const endpoint = concatUrl(url, 'connect/token');
  const resolveResponse = async (response) => {
    const jsonResponse = await response.json();
    if (jsonResponse.error) return null;
    return jsonResponse.access_token;
  };
  return await fetch(endpoint, {
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
      'Accept': '*/*',
    },
    method: 'post',
    body:
      `grant_type=password&username=${user}` +
      `&password=${password}` +
      `&client_id=integration` +
      `&client_secret=eunGKas3Pqd6FMwx9eUpdS7xmz`
  })
  .then(async response => await resolveResponse(response))
  .catch(error => { alert(error); return null; });
} 

응답 예시

 Copy 
 {
  "access_token": "ywkpbtr9aafehf39uaiuic4292ncashf9hf4nwqpzx29aqoduxn",
  "expires_in": 315360000,
  "token_type": "Bearer"
} 

리포트 목록 가져오기 (GraphQL)

인증이 완료되면 Wyn 서버에 저장된 리포트 목록을 사용자에게 보여줄 수 있습니다. 이때 첫 단계에서 받은 액세스 토큰을 함께 전송하여 GraphQL 로 목록을 가져옵니다.

GraphQL 쿼리

 Copy 
 query {
  documenttypes(key: "rdl") {
    documents {
      id
      title
      type
    }
  }
} 

리포트의 경우 key 는 rdl 입니다. 필요 시 created , created_by , modified , modified_by , effective_ops 등의 필드를 추가할 수 있습니다. 참고: Wyn과 GraphQL 사용

예시: 리포트 목록 API 호출 (JavaScript)

 Copy 
 async function getReportList(portalUrl, referenceToken) {
  const url = concatUrl(portalUrl, 'api/graphql');
  const init = {
    headers: {
      'Cache-Control': 'no-cache, no-store, must-revalidate',
      'Accept': 'application/json',
      'content-type': 'application/json',
      'pragma': 'no-cache',
      'Reference-Token': referenceToken
    },
    method: 'post',
    body: JSON.stringify({
      query: 'query { documenttypes(key:"rdl") { documents{ id, filename, title, type } } }'
    })
  };
  const res = await fetch(url, init);
  if (!res.ok) return null;
  const response = await res.json();
  const documents = response.data.documenttypes[0].documents;
  const list = documents.map(x => ({ name: x.title, id: x.id }));
  list.sort((x, y) => x.name < y.name ? -1 : 1);
  return list;
} 

응답 예시

 Copy 
 {
  "data": {
    "documenttypes": [
      {
        "documents": [
          {
            "id": "4b7e3f22-41e1-409e-bd22-c36d4a734e54",
            "filename": "TestPageReport.rdlx",
            "title": "TestPageReport",
            "type": "rdl"
          },
          {
            "id": "6b8d4j22-41e1-409e-bd22-cadjsf48afj4",
            "filename": "TestReport2.rdlx",
            "title": "TestReport2",
            "type": "rdl"
          }
        ]
      }
    ]
  },
  "errors": null
} 

ReportViewer 초기화

Wyn Enterprise는 ActiveReports JS Viewer를 기반으로 하는 네이티브 Report Viewer 를 제공합니다. Viewer를 초기화하려면 호스트 역할을 하는 <div> 요소가 필요하며, reportService 속성에 Wyn 서버 URL과 인증 토큰을 지정합니다.

 Copy 
 // 예시: ReportViewer 생성
const wynViewer = GrapeCity.ActiveReports.JSViewer.create({
  element: '#wyn-viewer-root',
  reportID: '',
  reportService: {
    url: portalUrl,
    securityToken: referenceToken
  }
}); 

보고서 보기

Viewer가 초기화되면 openReport(reportId) 메서드로 보고서를 로드할 수 있습니다. 아래는 목록에서 아이템을 클릭하면 해당 리포트를 여는 예시입니다.

 Copy 
 const reports = await getReportList(portalUrl, referenceToken);
reportsList.innerHTML = null;
reports.forEach(report => {
  const item = document.createElement('li');
  item.value = report.id;
  const text = document.createElement('span');
  text.innerHTML = report.name;
  item.appendChild(text);
  item.className = 'wyn-report-list-item';
  reportsList.appendChild(item);
  item.addEventListener('click', () => {
    const items = reportsList.children;
    for (let i = 0; i < items.length; i++) {
      items[i].classList.remove('active');
    }
    item.classList.add('active');
    wynViewer.openReport(report.id);
  });
}); 

위 구현이 포함된 전체 샘플 앱은 여기에서 다운로드 할 수 있습니다.

샘플 애플리케이션 실행

1. Wyn 서버에 CORS 설정 추가
   • Wyn Enterprise 포털 열기
   • Admin Portal로 이동
   • 좌측 메뉴에서 System Configurations 선택
   • Allowed CORS Origins 에 애플리케이션 URL 추가 (예: 개발 모드라면 http://localhost:3000 )
   • Exposed Headers 에 location , content-Disposition 를 각각 한 줄에 추가
   Wyn은 애플리케이션이 Wyn에 API 호출을 하고 적절한 응답을 받을 수 있도록 위 설정을 요구합니다.
   
2. 개발 서버 실행

    Copy 
    yarn
   yarn dev 
   

   개발 서버가 시작되면 브라우저에서 http://localhost:3000 으로 접속해 동작을 확인합니다.