WebOffice服務互動流程 -

出於安全考慮，文檔線上預覽和協作編輯的URL無法直接開啟，需要將憑證嵌入到HTML頁面中才能開，並且憑證自產生開始只有30分鐘的有效時間，如果需要保持更長時間的文檔開啟狀態，需要在到期之前使用憑證重新整理機制重新整理憑證。

文檔處理流程

文檔線上預覽和協作編輯流程

使用者開啟文檔預覽或者協作編輯頁面。
頁面通過調用IMM API介面GenerateWebofficeToken - 擷取Weboffice憑證擷取文檔訪問憑證，然後調用IMM js-sdk config 方法初始化。
使用者可以在頁面中預覽和編輯檔案。
使用者的憑證即將到期，頁面自動發起重新整理憑證請求。
頁面通過 IMM js-sdk config 設定的 refreshToken 回調方法，調用IMM API介面RefreshWebofficeToken - 重新整理Weboffice憑證重新整理文檔訪問憑證。
使用者可以繼續預覽和編輯檔案。

後端實現參考

擷取憑證資訊，封裝IMM的GenerateWebofficeToken - 擷取Weboffice憑證介面。
重新整理憑證資訊，封裝IMM的RefreshWebofficeToken - 重新整理Weboffice憑證介面。

前端實現參考

<!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() {
      // 調用後端介面擷取預覽連結和憑證。
      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 // Token到期自動重新整理。
      });
      demo.setToken({
        token: tokenInfo.AccessToken,
        timeout: 25*60*1000 // Token到期時間，單位為ms。25分鐘之後重新整理Token。
      });
    }

    // refreshToken方法暫不支援async/await，支援返回Promise, 或者普通對象{token,timeout}。
    function refreshTokenPromise() {
      return new Promise(function(resolve){
        axios.get("https://example.developer.backend.com/RefreshWebofficeURLToken", tokenInfo) // 調後端介面重新整理憑證。
        .then(r => r.data)
        .then(function(data) {
          // 儲存，供下次重新整理使用。
          tokenInfo = data
          resolve({
            token: tokenInfo.AccessToken,
            timeout: 10*60*1000 
          })
        })
      })
    }
  </script>
</body>
</html>