Intelligent Media Management:Gunakan WebOffice

Pemrosesan dokumen

1. Pengguna membuka halaman web untuk pratinjau atau pengeditan kolaboratif dokumen.

2. Operasi GenerateWebofficeToken dari Intelligent Media Management (IMM) dipanggil untuk menghasilkan token akses. Metode config dari IMM WebOffice SDK untuk JavaScript kemudian dipanggil untuk melakukan inisialisasi.

3. Pengguna dapat melakukan pratinjau atau mengedit dokumen di halaman web tersebut.

4. Saat token akses hampir kedaluwarsa, halaman web secara otomatis meminta refresh token akses.

5. Halaman web memanggil callback refreshToken, yang mencakup pemanggilan operasi API IMM RefreshWebofficeToken untuk merefresh token akses.

6. Pengguna memperoleh akses berkelanjutan ke dokumen tersebut.

Referensi Backend

1. GenerateWebofficeToken: operasi API yang menghasilkan token akses.

2. RefreshWebofficeToken: operasi API yang merefresh token akses.

Referensi Frontend

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Demo</title>
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <style>
    html,body{
      margin:0;
      height:100%;
    }
    #weboffice-zone{ 
      height: 100%;
      width: 100%; 
    }
    iframe {
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>
  <script src="https://g.alicdn.com/IMM/office-js/1.1.15/aliyun-web-office-sdk.min.js"></script>
  <script src="https://g.alicdn.com/code/lib/axios/0.27.2/axios.min.js"></script>
  <div id="weboffice-zone"></div>
  <script> 
    window.onload = init;
    var tokenInfo;
    function init() {
      // Panggil operasi backend untuk membuat token akses dan URL untuk pratinjau dokumen atau pengeditan kolaboratif.
      axios.get("https://example.developer.backend.com/GenerateWebofficeToken") 
      .then(r => r.data)
      .then(function (data){
        tokenInfo = data;
        weboffice(tokenInfo);
      });
    }
    function weboffice(tokenInfo) {
      var mount = document.getElementById('weboffice-zone');
      var demo = aliyun.config({
        mount: mount,
        url: tokenInfo.WebofficeURL,
        refreshToken: refreshTokenPromise // Refresh token akses saat hampir kedaluwarsa.
      });
      demo.setToken({
        token: tokenInfo.AccessToken,
        timeout: 25*60*1000 // Periode validitas token akses. Satuan: milidetik. Token akses direfresh setelah 25 menit.
      });
    }

    // Metode refreshToken tidak mendukung async dan await. Metode ini dapat mengembalikan objek promise atau objek biasa {token,timeout}.
    function refreshTokenPromise() {
      return new Promise(function(resolve){
        axios.get("https://example.developer.backend.com/RefreshWebofficeURLToken", tokenInfo) // Panggil operasi backend untuk merefresh token.
        .then(r => r.data)
        .then(function(data) {
          // Simpan data untuk refresh berikutnya.
          tokenInfo = data
          resolve({
            token: tokenInfo.AccessToken,
            timeout: 10*60*1000 
          })
        })
      })
    }
  </script>
</body>
</html>