Intelligent Media Management:クイックスタート

GenerateWebofficeToken - Weboffice トークンを取得する 操作を呼び出して、コラボレーション URL を取得します。

• クエリの例

  {
      "ProjectName": "test-project", // IMM プロジェクトの名前。
      "SourceURI": "oss://test-bucket/test-object.docx", // OSS 内のドキュメントの URI。
      "Filename": "test-object.docx", // ドキュメントの名前。
      "UserData": "{\"fid\": \"123\"}", // ユーザーデータ。MNS 通知で返されます。
      "PreviewPages": 3, // プレビューページの数。
      "Permission": "{\"Rename\": \"true\", \"Readonly\": \"false\"}", // 権限。
      "User": "{\"Id\": \"test\", \"Name\": \"testuser\", \"Avatar\": \"http://xx.com/avatar.jpg\"}", // オンラインコラボレーションに表示されるユーザー情報。
      "Watermark": "{\"Type\": \"1\", \"Value\": \"imm\"}" // ウォーターマークを設定します。
  }

• サンプルレスポンス

  {
      "RefreshToken": "f1fd1afd79ee445f95d3dd99f34f35ffv3",
      "RequestId": "BC63D209-5E53-00E9-8D24-7043943DBC89",
      "AccessToken": "3de242da81e1433abefbbea000aaae39v3",
      "RefreshTokenExpiredTime": "2022-07-06T23:18:52.856132358Z",
      "WebofficeURL": "https://office-cn-shanghai.imm.aliyuncs.com/office/w/7c1a7b53d6a4002751ac4bbaea69405a01475f4a?_w_tokentype=1",
      "AccessTokenExpiredTime": "2022-07-05T23:48:52.856132358Z"
  }

• 完全なサンプルコード (Python V1.27.3 用 IMM SDK)

  # -*- coding: utf-8 -*-
  import os
  from alibabacloud_imm20200930.client import Client as imm20200930Client
  from alibabacloud_tea_openapi import models as open_api_models
  from alibabacloud_imm20200930 import models as imm_20200930_models
  from alibabacloud_tea_util import models as util_models
  from alibabacloud_tea_util.client import Client as UtilClient
  
  
  class Sample:
      def __init__(self):
          pass
  
      @staticmethod
      def create_client(
          access_key_id: str,
          access_key_secret: str,
      ) -> imm20200930Client:
          """
          AccessKey ID と AccessKey シークレットを使用してクライアントを初期化します。
          @param access_key_id:
          @param access_key_secret:
          @return: Client
          @throws Exception
          """
          config = open_api_models.Config(
              access_key_id=access_key_id,
              access_key_secret=access_key_secret
          )
          # アクセスするドメイン名を指定します。
          config.endpoint = f'imm.cn-shenzhen.aliyuncs.com'
          return imm20200930Client(config)
  
      @staticmethod
      def main() -> None:
          # Alibaba Cloud アカウントの AccessKey ペアは、すべての API 操作に対する権限を持っています。 これらの資格情報を使用して操作を実行することは、リスクの高い操作です。 RAM ユーザーを使用して API 操作を呼び出したり、日常的な O&M を実行することをお勧めします。
          # データセキュリティ上の理由から、プロジェクトコードに AccessKey ペア (AccessKey ID と AccessKey シークレット) を含めないことをお勧めします。
          # この例では、環境変数から AccessKey ペアを読み取って、API アクセスの ID 検証を実装しています。 環境変数の構成方法については、https://www.alibabacloud.com/help/ja/imm/developer-reference/configure-environment-variables?spm=a3c0i.29367734.6737026690.8.6d266e9bORGXvg をご参照ください。
          imm_access_key_id = os.getenv("AccessKeyId")
          imm_access_key_secret = os.getenv("AccessKeySecret")
          client = Sample.create_client(imm_access_key_id, imm_access_key_secret)
          # ウォーターマークを設定します。
          weboffice_watermark = imm_20200930_models.WebofficeWatermark(
              type=1,
              value='imm'
          )
          # コラボレーター情報を設定します。
          weboffice_user = imm_20200930_models.WebofficeUser(
              id='test',
              name='testuser',
              avatar='http://xx.com/avatar.jpg'
          )
          # 権限を設定します。
          weboffice_permission = imm_20200930_models.WebofficePermission(
              rename=True
          )
          get_weboffice_urlrequest = imm_20200930_models.GenerateWebofficeTokenRequest(
              # IMM プロジェクト名を設定します。
              project_name='test-project',
              # コラボレーションするドキュメントの URI を設定します。
              source_uri='oss://test-bucket/test-object.docx',
              # ドキュメントの名前を設定します。
              filename='test-object.docx',
              # ユーザーデータを設定します。
              user_data='{"fid": "123"}',
              preview_pages=3,
              external_uploaded=False,
              permission=weboffice_permission,
              user=weboffice_user,
              watermark=weboffice_watermark
          )
          runtime = util_models.RuntimeOptions()
          try:
              # API 操作の戻り値を出力します。
              response = client.get_weboffice_urlwith_options(get_weboffice_urlrequest, runtime)
              print(response.body.to_map())
          except Exception as error:
              # 必要に応じて、エラーメッセージを出力します。
              UtilClient.assert_as_string(error.message)
              print(error)
  
  
  if __name__ == '__main__':
      Sample.main()

RefreshWebofficeToken - Weboffice トークンを更新する 操作を呼び出して、AccessToken を更新します。

AccessToken の有効期限が切れると、フロントエンドはサーバーの RefreshWebofficeToken 操作を呼び出して AccessToken を更新する必要があります。 レスポンスの形式は、GenerateWebofficeToken 操作を呼び出した場合のレスポンスの形式と同じです。

JS-SDK をインポートします。

この例では、${x.y.z} は JS-SDK の最新バージョン番号を示しています。 実際のバージョン番号に置き換えてください。 最新バージョンについては、「JS-SDK バージョン」をご参照ください。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>デモ</title>
</head>
<body>
  <script src="https://g.alicdn.com/IMM/office-js/${x.y.z}/aliyun-web-office-sdk.min.js"></script>
  <script>
    console.log('インポート後、JS-SDK を使用できます！');
    console.log(aliyun); //グローバル変数名。
  </script>
</body>
</html>

初期化。

フロントエンドは、サーバーでカプセル化された GenerateWebofficeToken 操作を使用して、tokenInfo オブジェクトを取得します。

この例では、tokenInfo オブジェクトが GenerateWebofficeToken 操作へのレスポンスと同じ構造であると想定しています。 次のコードでは、サーバーでカプセル化された GenerateWebofficeToken 操作 /getTokenInfo を使用しています。

// コラボレーション URL と AccessToken を取得します。
var tokenInfo = await $.get('http://example.com/getTokenInfo')

// 初期化
let instance = aliyun.config({
  url: tokenInfo.WebofficeURL // ドキュメントコラボレーション URL を設定します。
})

iframe のマウントポイントを設定します。

デフォルトでは、iframe は body 要素にマウントされます。 必要に応じて、iframe のマウントポイントを設定できます。

let instance = aliyun.config({
  mount: document.querySelector('#container'),
  url: 'ドキュメントコラボレーション URL' // 手順 2 のドキュメントコラボレーション URL tokenInfo.WebofficeURL。
})

iframe オブジェクトをカスタマイズする必要がある場合は、インスタンス化された JS-SDK を使用して iframe のドキュメントオブジェクトモデル (DOM) オブジェクトを取得できます。

var instance = aliyun.config({
    mount: document.querySelector('#container')
   //...
})
console.log(instance.iframe)

トークンを設定します。

• 取得したコラボレーション URL にアクセスするには、トークンを設定する必要があります。

• 各トークンが更新された後、このメソッドを使用してトークンを設定する必要があります。

//https://www.alibabacloud.com/help/ja/imm/developer-reference/api-imm-2020-09-30-createsimilarimageclusteringtask?spm=a2c63.p38356.0.i3
// ビジネス要件に基づいて、非同期リクエストまたはテンプレート出力を使用してトークンを取得します。
var token = 'yourToken'; 
// トークンを指定します。
instance.setToken({
  token: token, 
  timeout: 25 * 60 * 1000, // トークンの有効期間。 このパラメーターは必須です。 単位: ミリ秒。 この例では、トークンの有効期間は 25 分に設定されています。 有効期限が切れる 5 分前に refreshToken 関数を使用してトークンを更新できます。
}) 

タイムアウト後にトークンを更新します。

フロントエンドは、サーバーでカプセル化された RefreshWebofficeToken 操作を使用して、tokenInfo オブジェクトを取得します。 この例では、tokenInfo オブジェクトが RefreshWebofficeToken 操作へのレスポンスと同じ構造であると想定しています。

トークンを取得する関数を渡すことができます。 トークンの有効期間がタイムアウトすると、JS-SDK は自動的に関数を呼び出し、新しいトークンを含む promise オブジェクトまたは共通オブジェクトを返します。

次の例では、サーバーでカプセル化された GetWebofficeToken 操作 /refreshTokenInfo を使用しています。

// トークンの更新のために最後の tokenInfo をキャッシュします。
  let lastTokenInfo = tokenInfo

// トークン関数を取得します。
// 注: refreshToken は非同期関数をサポートしていません。 promise または {token,timeout} オブジェクトのみを返すことができます。
  const refreshToken = function() {
    return new Promise(function(resolve){
      // ビジネス処理ロジック。 サーバーでカプセル化された refreshToken 操作を呼び出します。
      $.get('http://example.com/refreshTokenInfo',{
        RefreshToken: lastTokenInfo.RefreshToken,
        AccessToken: lastTokenInfo.AccessToken,
        //....
      }).then(function(tokenInfo){
        lastTokenInfo = tokenInfo
        resolve({
          token: tokenInfo.AccessToken, // このパラメーターは必須です。
          timeout: 25 * 60 * 1000, // トークンの有効期間。 このパラメーターは必須です。 単位: ミリ秒。 この例では、トークンの有効期間は 25 分に設定されています。 有効期限が切れる 5 分前に refreshToken 関数を使用してトークンを更新できます。
        })
      })
    })
  }
// トークンを取得する関数を構成します。
aliyun.config({
  //...
  refreshToken
})