下面介紹如何在BrowserJS-SDK中快速使用訪問OSS服務,包括上傳/下載檔案和查看檔案清單。
注意:雲帳號AccessKey擁有所有API存取權限,建議遵循阿里雲安全最佳實務,在用戶端不要使用會泄露配置的ak,所以請建立並使用STS方式(臨時帳號許可權)給用戶端授權。
STS場景說明:臨時帳號許可權(STS)
更多有關瀏覽器的使用請參考:瀏覽器應用
樣本工程請參考:example
Bucket設定
從瀏覽器中直接存取OSS需要開通Bucket的CORS設定:
- 將allowed origins設定成
*
- 將allowed methods設定成
PUT, GET, POST, DELETE, HEAD
- 將allowed headers設定成
*
- 將expose headers設定成
ETag
x-oss-request-id
注意:請將該條CORS規則設定成所有CORS規則的第一條。
使用SDK
目前瀏覽器中不能直接進行Bucket相關的操作(例如list buckets, get/set bucket logging/referer/website/cors)。但是可以進行Object相關的操作(例如上傳/下載檔案,查看檔案清單等)。
包含SDK
首先在html檔案的<head>
中包含如下標籤:
<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>
想瞭解其他引入方式可參考安裝介紹。
通過new OSS.Wapper()
來建立client,OSS.Wrapper
提供了非同步介面,類似於callback的方式,在.then()
中處理返回的結果,在.catch()
中處理錯誤。
搭建STS Server 並從用戶端獲取臨時授權資訊
為帳號開通STS服務,如果已開通可以跳過,開通STS請參見STS開通說明。
藉助STS的SDK或API應用專屬的STS簽名服務。為了方便大家快速理解,提供了多個語言的版本Demo程式供參考:
在前端(瀏覽器)中向搭建的STS服務發起請求,獲取STS臨時授權資訊。
<script type="text/javascript">
OSS.urllib.request("http://your_sts_server/",
{method: 'GET'},
function (err, response) {
if (err) {
return alert(err);
}
try {
result = JSON.parse(response);
} catch (e) {
errmsg = 'parse sts response info error: ' + e.message;
return alert(errmsg);
}
// console.log(result)
})
</script>
查看檔案清單
<script type="text/javascript">
OSS.urllib.request("http://your_sts_server/",
{method: 'GET'},
function (err, response) {
if (err) {
return alert(err);
}
try {
result = JSON.parse(response);
} catch (e) {
return alert('parse sts response info error: ' + e.message);
}
var client = new OSS.Wrapper({
accessKeyId: result.AccessKeyId,
accessKeySecret: result.AccessKeySecret,
stsToken: result.SecurityToken,
endpoint: '<oss endpoint>',
bucket: '<Your bucket name>'
});
client.list({
'max-keys': 10
}).then(function (result) {
console.log(result);
}).catch(function (err) {
console.log(err);
});
});
</script>
其中region
參數是指您申請OSS服務時的區域,例如oss-cn-hangzhou
。完整的區域列表可以在OSS服務節點查看。
在瀏覽器中開啟html檔案,然後開啟Chrome的開發人員控制台,就可以看到list文件的結果了。
注意:瀏覽器是不受信任的環境,如果把AccessKeyId和AccessKeySecret直接保存在瀏覽器端,存在極高的風險。建議只在測試時使用明文設定,業務應用中請使用
STS鑒權模式
和自簽名模式
,詳細說明請參考存取控制、移動端直傳。
上傳檔案
下面使用multipartUpload
介面來上傳檔案:
<body>
<input type="file" id="file" />
<script type="text/javascript">
document.getElementById('file').addEventListener('change', function (e) {
var file = e.target.files[0];
var storeAs = 'upload-file';
console.log(file.name + ' => ' + storeAs);
OSS.urllib.request("http://your_sts_server/",
{method: 'GET'},
function (err, response) {
if (err) {
return alert(err);
}
try {
result = JSON.parse(response);
} catch (e) {
return alert('parse sts response info error: ' + e.message);
}
var client = new OSS.Wrapper({
accessKeyId: result.AccessKeyId,
accessKeySecret: result.AccessKeySecret,
stsToken: result.SecurityToken,
endpoint: '<oss endpoint>',
bucket: '<Your bucket name>'
});
client.multipartUpload(storeAs, file).then(function (result) {
console.log(result);
}).catch(function (err) {
console.log(err);
});
});
});
</script>
</body>
下載檔案
在瀏覽器中不能直接操作檔案,因此採用簽名URL的方式來組建檔案的下載連結,使用者只需要單擊連結就可以下載檔案。
<body>
<input type="button" id="download" value="Download" />
<script type="text/javascript">
document.getElementById('download').addEventListener('click', function (e) {
var objectKey = 'test/download_file';
var saveAs = 'download_file';
console.log(objectKey + ' => ' + saveAs);
OSS.urllib.request("http://your_sts_server/",
{method: 'GET'},
function (err, response) {
if (err) {
return alert(err);
}
try {
result = JSON.parse(response);
} catch (e) {
return alert('parse sts response info error: ' + e.message);
}
var client = new OSS.Wrapper({
accessKeyId: result.AccessKeyId,
accessKeySecret: result.AccessKeySecret,
stsToken: result.SecurityToken,
endpoint: '<oss endpoint>',
bucket: '<Your bucket name>'
});
var result = client.signatureUrl(objectKey, {
expires: 3600,
response: {
'content-disposition': 'attachment; filename="' + saveAs + '"'
}
});
console.log(result);
window.location = result;
});
});
</script>
</body>