WangZixian
/
app


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
							<!-- 
 * Copyright 2019 Huawei Technologies Co.,Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use
 * this file except in compliance with the License.  You may obtain a copy of the
 * License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed
 * under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
 * CONDITIONS OF ANY KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations under the License.
 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Pragma" name="Pragma" content="no-cache">
<title>temporary_signature_sample</title>

</head>

<body>
	
    <h3>OBS BrowserJS SDK demo</h3>
    
    <h4>Basic Configuration</h4>
    <label>AK:</label> <input type="text" value="*** Provide your Access Key ***" id="ak" size="30"/>
    <label>SK:</label> <input type="text" value="*** Provide your Secret Key ***" id="sk" size="30"/>
	<p>
    <label>Server:</label> <input type="text" value="http://your-endpoint" id="server" size="30"/>
    <label>Bucket:</label> <input type="text" value="bucketname" id="bucketname"/>
	<label>Key:</label> <input type="text" value="objectkey" id="objectkey"/>
	
    <p>
    <input type="button" value="Click to upload object" onclick="putObject();"/>
     <p>
    <input type="button" value="Click to download object" onclick="getObject();"/>
     <p>
    <input type="button" value="Click to set object acl" onclick="setObjectAcl();"/>
     <p>
    <input type="button" value="Click to get object acl" onclick="getObjectAcl();"/>
     <p>
    <input type="button" value="Click to delete object" onclick="deleteObject();"/>


</body>


<script src="../dist/esdk-obs-browserjs.3.23.5.min.js"></script>
<script type="text/javascript">
/**
 * This sample demonstrates how to do common operations in temporary signature way
 * on OBS using the OBS SDK for BrowserJS.
 */

 function getObsClient(){
	 /*
	 * Initialize a obs client instance with your account for accessing OBS
	 */
	var ak = document.getElementById('ak').value;
	var sk = document.getElementById('sk').value;
	var server = document.getElementById('server').value;
	return new ObsClient({
		access_key_id: ak,
		secret_access_key: sk,
		server : server,
		timeout : 60 * 5,
		signature : 'obs'
	});
}
 
function doAction(msg, method, _url, content,headers){
	console.log(headers);
	var req = {
		method : method,
		url : _url,
		withCredentials: false, 
		headers : headers || {},
		validateStatus: function(status){
			return status >= 200;
		},
		data : content
	};
	
	axios.request(req).then(function (response) {
		if(response.status <300){
			console.log(msg + ' using temporary signature successfully.');
			console.log('response data:');
			console.log(response.data);
			console.log('\n');
		}else{
			console.log(msg + ' using temporary signature failed!');
			console.log('status:' + response.status);
			console.log('\n');
		}
	}).catch(function (err) {
		console.log(msg + ' using temporary signature failed!');
		console.log('\n');
	});

}
 
function putObject(){
	var bucketName =  document.getElementById('bucketname').value;
	var objectKey =  document.getElementById('objectkey').value;
	var obs = getObsClient();
	var method = 'PUT';
	var content = 'Hello OBS';
	var headers = {};
	headers['Content-Length'] = content.length;
	headers['Content-Type'] = 'text/plain';//if not set, axios will add content-type automaticlly
	var res = obs.createSignedUrlSync({Method : method, Bucket : bucketName, Key: objectKey, Headers: headers});
	doAction('Create object', method, res.SignedUrl, content, res.ActualSignedRequestHeaders);
}

function getObject(){
	var bucketName =  document.getElementById('bucketname').value;
	var objectKey =  document.getElementById('objectkey').value;
	var obs = getObsClient();
	var method = 'GET';
	var res = obs.createV2SignedUrlSync({Method : method, Bucket : bucketName, Key: objectKey});
	doAction('Get object', method, res.SignedUrl, null, res.ActualSignedRequestHeaders);
}

function setObjectAcl(){
	var bucketName =  document.getElementById('bucketname').value;
	var objectKey =  document.getElementById('objectkey').value;
	var obs = getObsClient();
	var method = 'PUT';
	var headers = {'x-obs-acl' : obs.enums.AclPublicRead};
	headers['Content-Type'] = 'text/plain';//if not set, axios will add content-type automaticlly
	var res = obs.createV2SignedUrlSync({Method : method, Bucket : bucketName, Key: objectKey, SpecialParam: 'acl', Headers: headers});
	doAction('Set object acl', method, res.SignedUrl, null, res.ActualSignedRequestHeaders);
}

function getObjectAcl(){
	var bucketName =  document.getElementById('bucketname').value;
	var objectKey =  document.getElementById('objectkey').value;
	var obs = getObsClient();
	var method = 'GET';
	var res = obs.createV2SignedUrlSync({Method : method, Bucket : bucketName, Key: objectKey, SpecialParam: 'acl'});
	doAction('Get object acl', method, res.SignedUrl, null, res.ActualSignedRequestHeaders);
}

function deleteObject(){
	var bucketName =  document.getElementById('bucketname').value;
	var objectKey =  document.getElementById('objectkey').value;
	var obs = getObsClient();
	var method = 'DELETE';
	var res = obs.createV2SignedUrlSync({Method : method, Bucket : bucketName, Key: objectKey});
	doAction('Delete object', method, res.SignedUrl, null, res.ActualSignedRequestHeaders);
}


</script>

</html>