ブラウザでsignatureUrlメソッドを使用して、オブジェクトをダウンロードまたはプレビューするためのURLを生成できます。 <a> HTML要素のdownload属性またはwindow.open APIを使用して、オブジェクトのURLを取得できます。
使用上の注意
WebpackやBrowserifyなどのパッケージングツールを使用する場合は、npm install ali-OSSコマンドを実行して、oss SDK for Browser.jsをインストールします。
ブラウザからOSSバケットにアクセスしたいが、バケットにCORSルールが設定されていない場合、ブラウザはリクエストを拒否します。 したがって、ブラウザからバケットにアクセスする場合は、バケットのCORSルールを設定する必要があります。 詳細については、「インストール」をご参照ください。
ほとんどの場合、ブラウザではOSS SDK for Browser.jsが使用されます。 AccessKeyペアが公開されないようにするには、Security Token Service (STS) から取得した一時的なアクセス資格情報を使用してOSSにアクセスすることを推奨します。
一時的なアクセス資格情報は、AccessKeyペアとセキュリティトークンで構成されます。 AccessKeyペアは、AccessKey IDとAccessKeyシークレットで構成されます。 一時的なアクセス資格情報を取得する方法の詳細については、「一時的なアクセス権限付与にSTSを使用する」をご参照ください。
プレビュー用のオブジェクトのURLを取得する
次のコードでは、プレビュー用にexamplebucketという名前のバケットでexampleobject.txtという名前のオブジェクトのURLを取得する方法の例を示します。
ブラウザでオブジェクトをプレビューするには、Content-Dispositionをインラインに設定し、バケットにマッピングされたカスタムドメイン名を使用してオブジェクトにアクセスします。 詳細については、「オブジェクトメタデータの設定」および「カスタムドメイン名の使用」をご参照ください。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<!-- Import the SDK file -->
<script
type="text/javascript"
src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.0.min.js"
></script>
<script type="text/javascript">
const client = new OSS({
// Specify the region in which the bucket is located. For example, if the bucket is located in the China (Hangzhou) region, set the region to oss-cn-hangzhou.
region: "yourRegion",
authorizationV4: true,
// Specify the temporary AccessKey pair obtained from STS.
accessKeyId: "yourAccessKeyId",
accessKeySecret: "yourAccessKeySecret",
// Specify the security token obtained from STS.
stsToken: "yoursecurityToken",
// Specify the name of the bucket.
bucket: "examplebucket",
});
// Specify the full path of the object. Do not include the bucket name in the full path.
const url = client.signatureUrl("example.jpg", {
// If you want to add an image style to the generated signed URL, you can use the process parameter to specify the style in the "style/image style name" format.
// process: "style/imagestyle",
});
console.log(url);
// Specify the validity period of a signed URL. Unit: seconds. If you do not specify the validity period, the signed URL is valid for 1800 seconds.
// url = client.signatureUrl('example.jpg', {expires: 3600});
// console.log(url);
</script>
</body>
</html> オブジェクトをダウンロードするためのURLの取得
次のコードは、examplebucketという名前のバケットでexampleobject.txtという名前のオブジェクトをダウンロードするためのURLを取得する方法の例を示しています。 デフォルトでは、URLの有効期間は1,800秒です。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<!-- Import the SDK file -->
<script
type="text/javascript"
src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.0.min.js"
></script>
<script type="text/javascript">
const client = new OSS({
// Specify the region in which the bucket is located. For example, if the bucket is located in the China (Hangzhou) region, set the region to oss-cn-hangzhou.
region: "yourRegion",
authorizationV4: true,
// Specify the temporary AccessKey pair obtained from STS. The AccessKey pair consists of an AccessKey ID and an AccessKey secret.
accessKeyId: "yourAccessKeyId",
accessKeySecret: "yourAccessKeySecret",
// Specify the security token obtained from STS.
stsToken: "yoursecurityToken",
// Specify the name of the bucket.
bucket: "examplebucket",
});
// Set the response header to automatically download an object by using the URL, and set the name of the local file after the object is downloaded.
const filename = "examplefile.txt";
const response = {
"content-disposition": `attachment; filename=${encodeURIComponent(
filename
)}`,
};
// Specify the full path of the object. Do not include the bucket name in the full path.
const url = client.signatureUrl("exampleobject.txt", { response });
console.log(url);
</script>
</body>
</html>