For security reasons, you cannot directly open a URL for online document preview or collaborative editing. You must include an access token in the HTML page to open the document for online document preview or collaborative editing. An access token is valid only for 30 minutes since its generation. To keep the document open for a longer period of time, you must refresh the access token before it expires.
Document processing
A document user opens the webpage for document preview or collaborative editing.
The GenerateWebofficeToken operation of the Intelligent Media Management (IMM) is called to generate an access token. The config method of the IMM WebOffice SDK for JavaScript is called to perform initialization.
The user can preview or edit the document on the webpage.
When the access token is about to expire, the webpage automatically requests an access token refresh.
The webpage calls the refreshToken callback, which includes a call to the IMM API operation RefreshWebofficeToken to refresh the access token.
The user gets prolonged access to the document.
Backend references
GenerateWebofficeToken: the API operation that generates an access token.
RefreshWebofficeToken: The API operation that refreshes an access token.
Frontend references
<!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() {
// Call the backend operation to create an access token and URL for document preview or collaborative editing.
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 the access token when it is about to expire.
});
demo.setToken({
token: tokenInfo.AccessToken,
timeout: 25*60*1000 // The validity period of the access token. Unit: milliseconds. The access token is refreshed after 25 minutes.
});
}
// The refreshToken method does not support async and await. It can return a promise object or a common object {token,timeout}.
function refreshTokenPromise() {
return new Promise(function(resolve){
axios.get("https://example.developer.backend.com/RefreshWebofficeURLToken", tokenInfo) // Call the backend operation to refresh the token.
.then(r => r.data)
.then(function(data) {
// Save the data for the next refresh.
tokenInfo = data
resolve({
token: tokenInfo.AccessToken,
timeout: 10*60*1000
})
})
})
}
</script>
</body>
</html>