Intelligent Media Management:WebOfficeの使用

ドキュメント処理

1. ユーザーが、ドキュメントのプレビューまたは共同編集用の Web ページを開きます。

2. Intelligent Media Management (IMM) の GenerateWebofficeToken API を呼び出して、アクセス トークンを生成します。次に、JavaScript 用 IMM WebOffice SDK の config メソッドを呼び出して初期化します。

3. ユーザーは Web ページ上でドキュメントをプレビューまたは編集できます。

4. アクセス トークンの有効期限が近づくと、Web ページは自動的にアクセス トークンの更新をリクエストします。

5. Web ページが refreshToken コールバックを呼び出します。このコールバックでは、IMM の RefreshWebofficeToken API を呼び出してアクセス トークンを更新します。

6. ユーザーは引き続きドキュメントにアクセスできます。

バックエンドリファレンス

1. GenerateWebofficeToken：アクセス トークンを生成する API。

2. RefreshWebofficeToken：アクセス トークンを更新する API。

フロントエンドリファレンス

<!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() {
      // バックエンドの API を呼び出して、ドキュメントのプレビューまたは共同編集用のアクセス トークンと URL を作成します。
      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 // 有効期限が近づいたらアクセス トークンを更新します。
      });
      demo.setToken({
        token: tokenInfo.AccessToken,
        timeout: 25*60*1000 // アクセス トークンの有効期間。単位：ミリ秒。アクセス トークンは 25 分後に更新されます。
      });
    }

    // refreshToken メソッドは async と await をサポートしていません。Promise オブジェクト、または通常のオブジェクト {token, timeout} を返すことができます。
    function refreshTokenPromise() {
      return new Promise(function(resolve){
        axios.get("https://example.developer.backend.com/RefreshWebofficeToken", tokenInfo) // バックエンドの API を呼び出してトークンを更新します。
        .then(r => r.data)
        .then(function(data) {
          // 次回の更新のためにデータを保存します。
          tokenInfo = data
          resolve({
            token: tokenInfo.AccessToken,
            timeout: 10*60*1000 
          })
        })
      })
    }
  </script>
</body>
</html>