Directly add a signature on the server, transfer the file directly, and set upload callback

Last Updated: May 27, 2017

Background

For background information, refer to Overview of direct transfer on Web client.

The use of Direct transfer after adding a signature on the server solution poses a new problem. After a user uploads data, the application server needs to know which files the user uploads, the file names, the image size (if they are images), and so on in many scenarios. Therefore, the upload callback function is developed for the OSS.

User request logic

  1. The user obtains the upload policy and callback settings from the application server.
  2. The application server returns the upload policy and callback settings.
  3. The user sends a file upload request directly to the OSS.
  4. After the file data is uploaded and before a response is sent by the OSS to the user, the OSS sends a request to the user’s server based on the user’s callback settings.
  5. If the server returns ‘success’, the OSS returns ‘success’ to the user. If the server returns ‘failed’, the OSS returns ‘failed’ to the user. This ensures the application server will be notified of all images that the user has successfully uploaded.
  6. The application server returns information to the OSS.
  7. The OSS returns the information returned by the application server to the user.

Simply speaking, the user needs to upload a file to the OSS server, and hopes that the user’s application server can know this after uploading is completed. In this case, a callback function needs to be set to inform the user’s application server of this. In this way, the OSS starts uploading after receiving the user’s upload request, and does not return the result to the user directly after uploading, but notifies the user’s application server first: “I completed uploading”; then, the application server notifies the OSS “I got it. Please pass on the information to my owner”. After that, the OSS transfers the result to the user.

Download code

Click here: oss-h5-upload-js-php-callback.zip

The example adopts backend signature, and uses the PHP language.

  • Example of a backend signature using the Java language: Click here
  • Example of a backend signature using the Go language: Click here
  • Example of a backend signature using the Python language: Click here

Usage of other languages:

  1. Download the corresponding language example.
  2. Modify the example code, for example, set the listening port, and then start running.
  3. At upload.js in oss-h5-upload-js-php-callback.zip, change the variable severUrl to the address configured at step 2. For example, severUrl = http://1.2.3.4:8080 or serverUrl= http://abc.com/post/.

Quick start guide

A file can be uploaded to the OSS through the Webpage quickly using the following three steps, and the OSS will send a callback notification to the application server set by the user.

  1. Set your own id, key, and bucket.
    Setting method: Modify php/get.php, and set the variable $id to AccessKeyId, $key to AccessKeySecret, and $host to bucket+endpoint.
    1. $id= 'xxxxxx';
    2. $key= 'xxxxx';
    3. $host = 'http://post-test.oss-cn-hangzhou.aliyuncs.com
  2. To ensure browsing security, CORS must be set for bucket. Refer to the content below.

  3. Set your own callback URL, for example, http://abc.com/test.html (which can be accessed surely from the public network). In other words, your own callback server address. The OSS sends the file uploading information to the application server through the callback URL (http://abc.com/test.html) set by you after the file is uploaded.
    Setting method: Modify php/get.php (for this callback server code instance, refer to the content below).

  1. $callbackUrl = "http://abc.com/test.html";

For more details of this example such as uploading signature and setting the random file name, click here to learn more uploading details.

The core logic is explained below.

Core code analysis

The following content is to be added to the code:

  1. new_multipart_params = {
  2.      'key' : key + '${filename}',
  3.      'policy': policyBase64,
  4.      'OSSAccessKeyId': accessid,
  5.      'success_action_status' : '200', //Instructs the server to return 200. Otherwise, the server returns 204 by default.
  6.      'callback':  callbackbody,
  7.      'signature': signature,
  8. };

The preceding callbackbody is returned by the PHP server. In this example, the following content is obtained by running the PHP scripts on the backend :

  1. {"accessid":"6MKOqxGiGU4AUk44",
  2. "host":"http://post-test.oss-cn-hangzhou.aliyuncs.com",
  3. "policy":"eyJleHBpcmF0aW9uIjoiMjAxNS0xMS0wNVQyMDo1MjoyOVoiLCJjdb25kaXRpb25zIjpbWyJjdb250ZW50LWxlbmd0aC1yYW5nZSIsMCwxMDQ4NTc2MDAwXSxbInN0YXJ0cy13aXRoIiwiJGtleSIsInVzZXItZGlyXC8iXV19",
  4. "signature":"VsxOcOudxDbtNSvz93CLaXPz+4s=",
  5. "expire":1446727949,
  6. "callback":"eyJjYWxsYmFja1VybCI6Imh0dHA6Ly9vc3MtZGVtby5hbGl5dW5jcy5jdb206MjM0NTAiLCJjYWxsYmFja0hvc3QiOiJvc3MtZGVtby5hbGl5dW5jcy5jdb20iLCJjYWxsYmFja0JvZHkiOiJmaWxlbmFtZT0ke29iamVjdH0mc2l6ZT0ke3NpemV9Jm1pbWVUeXBlPSR7bWltZVR5cGV9JmhlaWdodD0ke2ltYWdlSW5mby5oZWlnaHR9JndpZHRoPSR7aW1hZ2VJdbmZvLndpZHRofSIsImNhbGxiYWNrQm9keVR5cGUiOiJhcHBsaWNhdGlvbi94LXd3dy1mb3JtLXVybGVuY29kZWQifQ==","dir":"user-dirs/"}

The preceding callbackbody is the Base64 encoded callback content in the returned results.

The decoded content is as follows:

  1. {"callbackUrl":"http://oss-demo.aliyuncs.com:23450",
  2. "callbackHost":"oss-demo.aliyuncs.com",
  3. "callbackBody":"filename=${object}&size=${size}&mimeType=${mimeType}&height=${imageInfo.height}&width=${imageInfo.width}",
  4. "callbackBodyType":"application/x-www-form-urlencoded"}

Content analysis:

  • CallbackUrl: Specifies the URL request sent by the OSS to this host.
  • callbackHost: Specifies the Host header to be included in the request header when this request is sent by the OSS.
  • callbackBody: Specifies the content sent to the application server upon the request of the OSS, which can include the file name, size, type, and the image width and height (if it is an image).
  • callbackBodyType: Specifies the Content-Type requested to be sent.

Callback application server

Steps 4 and 5 are very important in the user’s request logic. When the OSS interacts with the application server, you may have the following questions:

  • Question 1: If I am a developer, how can I confirm that the request was sent from the OSS?

    Answer: When the OSS sends a request, the OSS will construct a signature with the application server. They both use signatures to ensure security.

  • Question 2: How is this signature constructed? Is there any sample code?

    Answer: Yes. The preceding example shows the sample code of the application server callback: http://oss-demo.aliyuncs.com:23450 (only supports Linux at present).
    The code run above is as follows: callback_app_server.py.zip
    Running solution: Directly execute the file python callback_app_server.py under the Linux system.
    The program automatically implements a simple http server. To run this program, you may need to install the system environment on which the RSA depends.

  • Question 3: Why the callback request received by my application server does not have an Authorization header?

    Answer: Some Web servers resolve the Authorization header automatically, for example, apache2. Therefore, it is set not to resolve this header. Using apache2 as an example, the specific setting method is as follows:

    1. Start the rewrite module, and run the command: a2enmod rewrite;
    2. Modify the configuration file /etc/apache2/apache2.conf (it varies with the installation path of apache2). Set Allow Override to All, and then add the following content:
      RewriteEngine on
      RewriteRule .* - [env=HTTP_AUTHORIZATION:%{HTTP:Authorization},last]

The sample program shows how to check the signature received by the application server. You must add the code for parsing the format of the callback content received by the application server.

Callback application server versions in other languages

Java version:

  • Download address: Click here
  • Running method: Extract the archive and run java -jar oss-callback-server-demo.jar 9000 (9000 is the port number and can be changed as needed).

    Note that this jar runs on java 1.7. If there is a problem, you may make modifications based on the provided code. This is a maven project.

PHP version:

  • Download address: Click here
  • Running method: Deploy the program to an Apache environment. Due to the characteristics of the PHP language, retrieving headers depends on the environment. You may make modifications to the example based on your own environment.

Python version:

  • Download address: Click here
  • Running method: Extract the archive and directly run python callback_app_server.py. The program implements a simple HTTP server. To run this program, you may need to install the system environment on which the RSA depends.

Ruby version:

  • Download address: Click here
  • Running method: ruby aliyun_oss_callback_server.rb.

Conclusion

  • Example 1: Describes how to add a signature directly on the JavaScript client and upload the file in a form to the OSS directly. oss-h5-upload-js-direct.tar.gz
  • Example 2: Describes how to obtain a signature from the backend using the PHP script and then upload the file in a form to the OSS directly. oss-h5-upload-js-php.tar.gz
  • Example 3: Describes how to obtain a signature from the backend using the PHP script, and perform callback after uploading, and then, upload the form directly to the OSS, after which, the OSS calls back the application server and returns the result to the user. oss-h5-upload-js-php-callback.tar.gz
Thank you! We've received your feedback.