Cara menyematkan laporan ke sistem pihak ketiga - Quick BI

Quick BI memungkinkan Anda menyematkan laporan, seperti dashboard dan Buku kerja, dari suatu ruang kerja ke sistem pihak ketiga untuk integrasi bisnis yang mulus. Solusi ini berlaku untuk Quick BI Pro dan Quick BI Standar.

Batasan

Solusi dasar hanya mendukung penyematan dashboard dan Buku kerja.
Saat Anda menyematkan halaman entri data Buku kerja ke lingkungan pihak ketiga, beberapa browser sistem dapat mencegah iframe lintas origin menulis cookie. Hal ini dapat menyebabkan pengiriman data gagal pada halaman entri data Buku kerja yang kompleks. Misalnya, jika Anda membuka halaman entri data Buku kerja yang disematkan di browser bawaan WeCom pada perangkat iOS, pengiriman data gagal setelah Anda mengisi dan mengirimkan data tersebut.

Oleh karena itu, kami menyarankan agar Anda menggunakan fitur entri data Buku kerja secara langsung di platform Quick BI.

Informasi latar belakang

Untuk menyematkan laporan Quick BI di sistem Anda, Anda harus mengonfigurasi penyematan laporan.
- Jika Anda menggunakan Quick BI Pro, Anda tidak dapat membedakan izin database setelah laporan disematkan. Izin tingkat baris tidak berlaku untuk laporan yang disematkan, dan izin tersebut sama dengan izin pemilik laporan. Solusi peningkatan keamanan tidak didukung.
- Jika Anda menggunakan Quick BI Standar, Anda dapat membedakan izin database setelah laporan disematkan. Artinya, untuk laporan yang sama, pengguna berbeda melihat data yang berbeda. Solusi peningkatan keamanan juga didukung. Untuk informasi selengkapnya, lihat Solusi Peningkatan Keamanan untuk Kontrol Izin Data yang Disematkan dan Transmisi Parameter dalam Laporan.
Alibaba Cloud International memiliki lima situs dengan nama domain berikut:
- Singapura: bi-ap-southeast-1.data.aliyun.com
- Hong Kong (Tiongkok): bi-cn-hongkong.data.aliyun.com
- Malaysia (Kuala Lumpur): bi-ap-southeast-3.data.aliyun.com
- Jerman (Frankfurt): bi-eu-central-1.data.aliyun.com
- Indonesia: bi-ap-southeast-5.data.aliyun.com

Catatan

Topik ini menggunakan nama domain untuk situs Hong Kong (Tiongkok) sebagai contoh dalam pembentukan URL. Saat Anda menggunakan situs lain, gantilah nama domain tersebut dengan nama domain yang sesuai dengan situs Anda.

Langkah 1: Aktifkan penyematan untuk laporan

Anda hanya dapat mengonfigurasi penyematan laporan untuk laporan yang berada dalam status Published.

Anda dapat mengaktifkan penyematan laporan dari modul Open Platform:

Di halaman utama Quick BI, ikuti langkah-langkah pada gambar untuk menuju ke halaman Embed Report.
Di halaman Add Embedded Report, pilih ruang kerja dan tipe objek target. Di daftar tersebut, pilih laporan yang diinginkan lalu klik Enable Embedding. Jika daftarnya panjang, Anda juga dapat mencari laporan dengan memasukkan namanya.

Catatan
Untuk menyematkan halaman entri data Buku kerja ke lingkungan pihak ketiga, perlu diketahui bahwa beberapa browser sistem melarang iframe lintas origin menulis cookie. Hal ini dapat menyebabkan pengiriman data gagal. Oleh karena itu, kami menyarankan agar Anda menggunakan fitur entri data Buku kerja secara langsung di platform Quick BI.

Konfigurasi penyematan

Fitur uji untuk mengonfigurasi penyematan laporan hanya berlaku untuk solusi tingkat lanjut.

Penting

Fitur uji hanya untuk tujuan percobaan. Untuk penggunaan aktual, Anda harus menyelesaikan Langkah 2: Dapatkan accessTicket melalui antarmuka HTTPS dan Langkah 3: Bentuk URL tanpa login.

Setelah Anda mengaktifkan penyematan, solusi dasar dan solusi tingkat lanjut menawarkan kemampuan berbeda selama integrasi:

Kemampuan	Solusi dasar	Solusi tingkat lanjut
Pengguna terikat	Pemilik laporan, tidak dapat diubah	Dapat dikustomisasi, memungkinkan tampilan personalisasi
Jumlah kunjungan	Hingga 100.000 kali per tiket	Tanpa Batas, mendukung pengaturan kustom
Watermark	Tidak didukung	Dukungan (kecuali layar data itu sendiri tidak mendukung watermark)
Periode validitas	Maksimum 240 menit	Dapat dikustomisasi
Parameter global	Tidak didukung	Dukungan
Penyematan blok	Tidak didukung	Didukung
Jumlah lompatan Catatan Laporan target untuk lompatan juga harus memiliki penyematan yang diaktifkan.	Hanya satu lompatan yang diizinkan. Misalnya, setelah melompat dari laporan A ke laporan B, laporan B tidak dapat melompat ke laporan C.	Mendukung jumlah lompatan tanpa batas. Misalnya, setelah melompat dari laporan A ke laporan B, laporan B dapat melompat ke laporan C, dan seterusnya.

Langkah 2: Dapatkan accessTicket melalui antarmuka HTTPS

Contoh berikut menunjukkan cara menyematkan dashboard dari ruang kerja ke sistem pihak ketiga.

Jika akun yang mengaktifkan akses dashboard memiliki izin Developer atau Analyst, akun tersebut hanya dapat mengaktifkan izin untuk dashboard yang dibuat oleh akun tersebut.
Jika akun memiliki izin Admin, akun tersebut dapat mengaktifkan izin untuk semua laporan di ruang kerja.
1. Ikuti langkah-langkah berikut untuk mendapatkan ID AccessKey dan Rahasia AccessKey. Keduanya masing-masing berkorespondensi dengan accessId dan accessKey.
  1. Login ke Konsol Quick BI.
  2. Di halaman utama Quick BI, ikuti langkah-langkah pada gambar untuk mendapatkan ID AccessKey dan Rahasia AccessKey.
2. Dapatkan ID akun Alibaba Cloud. Ini berkorespondensi dengan aliyunUid.
  
  Login ke akun Alibaba Cloud Anda dan klik foto profil di pojok kanan atas untuk melihat ID akun Anda.
3. Di halaman pengeditan laporan, dapatkan ID laporan. Ini berkorespondensi dengan worksId:
4. Dapatkan accessTicket.
  
  Tambahkan parameter accessId, accessKey, aliyunUid, dan worksId yang Anda peroleh pada langkah sebelumnya ke URL permintaan berikut. Kemudian, kirim permintaan GET untuk mendapatkan accessTicket.
  
  https://bi-cn-hongkong.data.aliyun.com/openapi/ac3rd/ticket/create?worksId=xx&aliyunUid=xx&accessKey=xx&accessId=xx&validityTime=xx
  Catatan
  
  Akun yang digunakan untuk mendapatkan accessTicket memiliki batasan berikut:
  
  Jika akun tersebut dinonaktifkan di Manajemen Organisasi > Manajemen Pengguna, Anda tidak dapat membuat accessTicket baru, tetapi Anda masih dapat menggunakan accessTicket yang sudah ada.
  
  Jika akun tersebut dihapus dari Manajemen Organisasi > Manajemen Pengguna, Anda tidak dapat membuat accessTicket baru, dan Anda juga tidak dapat menggunakan accessTicket yang sudah ada.
  
  aliyunUid hanya digunakan untuk memverifikasi apakah peran saat ini memiliki izin untuk mengaktifkan akses tanpa login untuk laporan organisasi saat Anda membuat accessTicket. Parameter ini tidak digunakan untuk pengikatan identitas dalam laporan yang disematkan di pihak ketiga.
  
  validityTime adalah parameter opsional. Nilainya dapat berkisar antara 1 hingga 240. Nilai default-nya adalah 240. Satuannya adalah menit.
  
  Untuk segera membatalkan accessTicket, kirim permintaan POST dengan nilai yang sesuai untuk aliyunUid, accessId, accessKey, dan accessTicket.
  
  http://bi-cn-hongkong.data.aliyun.com/openapi/ac3rd/ticket/invalid?aliyunUid=xx&accessId=xx&accessKey=xx&accessTicket=xx

Langkah 3: Bentuk URL tanpa login

Catatan

Solusi ini tidak mendukung otentikasi untuk pengguna terikat. Secara default, laporan tanpa login diakses dengan identitas pemilik laporan.

Tabel berikut menunjukkan proses pembentukan dan contohnya.

Proses	Contoh Dashboard	Contoh Buku Kerja
1. Dapatkan nama domain Quick BI	`bi-cn-hongkong.data.aliyun.com/`	`bi-cn-hongkong.data.aliyun.com/`
2. Dapatkan URL pratinjau laporan	`token3rd/dashboard/view/pc.htm`	`token3rd/report/view.htm`
3. Dapatkan ID laporan	`dd0****83f`	`42****18ef6`
4. Dapatkan AccessTicket	`fd138bcb-****-4fde-b413-81bcee59bdb6`	`fd138bcb-****-4fde-b413-81bcee59bdb6`

Format pembentukan dan URL laporan adalah sebagai berikut.

Format untuk dashboard adalah https://<nama domain Quick BI>/<URL pratinjau laporan>?pageId=<ID laporan>&accessTicket=<AccessTicket>. URL yang dihasilkan adalah:
```
https://bi-cn-hongkong.data.aliyun.com/token3rd/dashboard/view/pc.htm?pageId=dd0****83f&accessTicket=fd138bcb-****-4fde-b413-81bcee59bdb6
```
Format untuk Buku kerja adalah https://<nama domain Quick BI>/<URL pratinjau laporan>?id=<ID laporan>&accessTicket=<AccessTicket>. URL yang dihasilkan adalah:
```
https://bi-cn-hongkong.data.aliyun.com/token3rd/report/view.htm?id=<42****18ef6>&accessTicket=fd138bcb-****-4fde-b413-81bcee59bdb6
```

Dapatkan nama domain Quick BI.

Misalnya, nama domain untuk situs Quick BI di Hong Kong (Tiongkok) adalah bi-cn-hongkong.data.aliyun.com/. Anda harus menggunakan nama domain untuk lingkungan spesifik Anda.
Dapatkan URL pratinjau laporan.

URL halaman pratinjau untuk laporan adalah sebagai berikut. Pilih salah satu yang Anda butuhkan.
- Dashboard: token3rd/dashboard/view/pc.htm
- Buku kerja: token3rd/report/view.htm
Di halaman pengeditan laporan, dapatkan ID laporan.
- ID dashboard
  
  Di halaman pengeditan dashboard, dapatkan nilai pageId dari bilah alamat.
- ID Buku kerja
  
  Di halaman pengeditan Buku kerja, dapatkan nilai ID Buku kerja dari bilah alamat.
Tambahkan nama domain Quick BI, URL pratinjau laporan, ID laporan, dan AccessTicket yang Anda peroleh pada Langkah 2 ke URL permintaan.
- Format dashboard: https://<nama domain Quick BI>/<URL pratinjau laporan>?pageId=<ID laporan>&accessTicket=<AccessTicket>
- Format Buku kerja: https://<nama domain Quick BI>/<URL pratinjau laporan>?id=<ID laporan>&accessTicket=<AccessTicket>

Kelola laporan yang disematkan

Anda dapat melakukan operasi berikut pada laporan yang disematkan:

Kueri laporan yang disematkan: Di kotak pencarian pada halaman daftar laporan, masukkan kata kunci dari nama laporan lalu klik ikon untuk mencari laporan tersebut.

Anda dapat mempersempit pencarian dengan memilih ruang kerja atau tipe laporan.
Lihat jumlah laporan yang disematkan. Untuk informasi selengkapnya, lihat Lihat jumlah laporan yang disematkan.
Hapus laporan yang disematkan: Klik ikon di samping laporan untuk menghapusnya.

Lihat jumlah laporan yang disematkan

Di halaman utama Quick BI, klik Open Platform.
Di panel navigasi sebelah kiri, klik Embedded Analytics.

Di halaman Report Embedding, Anda dapat melihat jumlah laporan yang disematkan di sistem pihak ketiga.

Cara mengatasi error "access report_tree unauthorized" saat penyematan laporan

Deskripsi masalah

Ketika Anda menggunakan fitur penyematan laporan pihak ketiga, muncul pesan error seperti yang ditunjukkan pada gambar berikut.

Penyebab

Izin laporan belum diaktifkan di ruang kerja yang sesuai.

Solusi

Anda dapat mengikuti langkah-langkah berikut untuk mengaktifkan izin laporan.

Cara membuat laporan Quick BI yang disematkan menyesuaikan tinggi secara otomatis (PC)

Deskripsi masalah

Ketika sistem pihak ketiga menggunakan iframe untuk menyematkan dashboard Quick BI, dashboard tersebut mungkin menampilkan bilah gulir karena pembatasan keamanan lintas domain mencegah sistem mendapatkan tinggi konten iframe.

Solusi

Saat Quick BI memuat dashboard, sistem mengirimkan tinggi dashboard ke halaman induk melalui postMessage. Halaman induk dapat mengambil tinggi dan ID tersebut dengan menggunakan pendengar event.

Anda dapat melakukannya dengan salah satu dari dua cara berikut:

Kirimkan tinggi konten iframe ke halaman induk.

// URL Quick BI. Anda dapat menambahkan URL lain sesuai kebutuhan.
const quickBIURL = ['https://bi-cn-hongkong.data.aliyun.com/'];
function messageListener(event) {
  if (quickBIURL.includes(event.origin)) {
    // Tinggi yang dikirimkan oleh postMessage
    console.log('Tinggi Dashboard Quick BI:', event.data.height);
    // ID halaman dashboard yang dikirimkan oleh postMessage
    console.log('ID Dashboard Quick BI:', event.data.pageId);
  }
}
// Tambahkan pendengar sebelum dashboard dimuat
window.addEventListener('message', messageListener);

Halaman induk mengirimkan postMessage ke halaman iframe untuk mendapatkan tinggi dashboard.

Catatan:

iframe adalah elemen yang menyematkan dashboard Quick BI.
Data yang dikirim dalam pesan harus mencakup { getDashboardHeight: true }.

Blok kode berikut memberikan contohnya.

// URL Quick BI. Anda dapat menambahkan URL lain sesuai kebutuhan.
const quickBIURL = ['https://bi-cn-hongkong.data.aliyun.com/'];
function messageListener(event) {
  if (quickBIURL.includes(event.origin)) {
    // Tinggi yang dikirimkan oleh postMessage
    console.log('Tinggi Dashboard Quick BI:', event.data.height);
    // ID halaman dashboard yang dikirimkan oleh postMessage
    console.log('ID Dashboard Quick BI:', event.data.pageId);
  }
}
// Tambahkan pendengar sebelum dashboard dimuat
window.addEventListener('message', messageListener);
// Secara aktif meminta tinggi dashboard Quick BI
// iframe yang menyematkan dashboard Quick BI
const iframe = document.querySelector('iframe');
// Data yang dikirim dalam pesan harus mencakup { getDashboardHeight: true }
iframe.contentWindow.postMessage({getDashboardHeight: true}, '*');

Catatan

Dashboard Quick BI secara otomatis menyesuaikan lebarnya ke wadah luar, sehingga menghilangkan bilah gulir vertikal dan kebutuhan penyesuaian lebar manual.

Contoh lengkap

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    </head>
    <body>
        <iframe 
        class="quickbi-iframe-demo"
    src="https://bi-cn-hongkong.data.aliyun.com//token3rd/dashboard/view/pc.htm?pageId=dd0****83f&accessTicket=fd138bcb-****-4fde-b413-81bcee59bdb6"
      scrolling="no"
     frameborder="0" 
      width="100%" 
      height="600">
    </iframe>
   <!-- <useBodyAutoHeight=true> membuat tinggi body halaman adaptif. <page_Id> adalah ID halaman dashboard. accessTicket adalah token untuk mengakses dashboard. -->
        <script>
      // URL Quick BI. Anda dapat menambahkan URL lain sesuai kebutuhan.
      const quickBIURL = ['https://bi-cn-hongkong.data.aliyun.com'];
      function messageListener(event) {
        if (quickBIURL.includes(event.origin)) {
          // Tinggi yang dikirimkan oleh postMessage
          console.log('Tinggi Dashboard Quick BI:', event.data.height);
          // ID halaman dashboard yang dikirimkan oleh postMessage
          console.log('ID Dashboard Quick BI:', event.data.pageId);
        }
      }
      // Tambahkan pendengar sebelum dashboard dimuat
      window.addEventListener('message', messageListener);
      // iframe yang menyematkan dashboard Quick BI
      const iframe = document.querySelector('iframe');
       // Secara aktif meminta tinggi dashboard Quick BI
      // Data yang dikirim dalam pesan harus mencakup { getDashboardHeight: true }
      iframe.contentWindow.postMessage({getDashboardHeight: true}, '*');
        </script>
    </body>
</html>

Cara mengatur lebar halaman seluler yang disematkan di aplikasi pihak ketiga menggunakan iframe

Deskripsi masalah

Karena masalah kompatibilitas iframe pada versi iOS yang lebih lama, lebar iframe mungkin meluap. Hal ini dapat menyebabkan dashboard bergulir secara horizontal, tabel daftar tetap berhenti bergulir, grafik terpotong, atau pop-up kontrol kueri salah posisi.

Solusi

Ubah gaya iframe.

Ikuti secara ketat contoh kode berikut:

iframe {
    border-width: 0;
    min-width: 100%;
    width: 0;
    *width: 100%;
    height: 667px; /* Tinggi harus bernilai tetap. Anda dapat mengaturnya secara dinamis setelah mendapatkan tinggi layar. height: 100% memiliki masalah kompatibilitas. */
}