Object Storage Service:PHP

Step 1: Configure the web server

This topic uses Ubuntu 16.04 in the example to describe different environment configurations for different web servers. Configure the environment based on your requirements.

• If you use Apache as the web server, configure the environment based on the following description. Apache 2.4.18 is used in this example.
  • Set the public IP address of the web server over the Internet to 192.0.2.11. You can modify the public IP address by adding ServerName 192.0.2.11 to the /etc/apache2/apache2.conf configuration file.
  • Set the listening port of the web server to 8080. You can set the listening port to 8080 in the /etc/apache2/ports.conf configuration file.
  • Ensure that Apache can parse PHP files. To install PHP 5, run the sudo apt-get install libapache2-mod-php5 command. If other web servers are used, install PHP 5 and modify configurations based on your actual environment.

  You can modify the public IP address and listening port of your web server based on your actual environment. After you update the configurations, you must run /etc/init.d/apache2 restart to restart the Apache server.

• If you use NGINX as the web server, configure the environment based on the following description. NGINX 1.19.7 is used in this example.
  Set the public IP address of the web server over the Internet to 192.0.2.11 and set the listening port to 8080. You can modify the public IP address of the web server over the Internet and the listening port in the /etc/nginx/nginx.conf configuration file. The following code provides an example on how to modify the configuration file:

  server {
      listen 8080;
      server_name 192.0.2.11;
      
      root /var/www/html;
      index index.html index.php;
  
  
      location ~* \.php$ {
              fastcgi_pass 127.0.0.1:9000;
              fastcgi_index index.php;
              fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
              include fastcgi_params;
          }
  }

  You can modify the IP address and listening port of your web server based on your actual environment. After you update the configurations, you must restart the NGINX web server.

Step 2: Configure the application server

1. Download the application server source code in PHP.
2. Decompress the application server source code to the corresponding directory of the application server. In this example, decompress the application server source code to the /var/www/html/aliyun-oss-appserver-php directory of Ubuntu 16.04.
3. Access the http://192.0.2.11:8080/aliyun-oss-appserver-php/index.html URL of the application server from a browser on the PC. If the displayed page is the same as the homepage of test sample, the verification is passed.
4. If you use Apache as the web server, enable the feature to capture the Authorization field in the HTTP headers. If you use NGINX as the web server, you can skip this step.
   The callback response received by your application server may not have an Authorization header. This is because some web application servers automatically parse the Authorization header. In this case, you can modify the configuration file so that the Authorization header is not parsed. Apache 2 is used in the following example:
   1. Open the /etc/apache2/apache2.conf configuration file of Apache 2. Find and modify the following snippet:

      <Directory /var/www/>
              Options Indexes FollowSymLinks
              AllowOverride All
              Require all granted
      </Directory>

   2. In the /var/www/html/aliyun-oss-appserver-php directory, create a file named .htaccess and enter the following content:

      <IfModule mod_rewrite.c>
      RewriteEngine on
      RewriteCond %{HTTP:Authorization} .
      RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
      </IfModule>

   If other web servers or other versions of Apache are used, install and configure the application server based on your actual environment.
5. Modify the configurations of the application server.
   In the /var/www/html/aliyun-oss-appserver-php/php directory, open the get.php file. Modify the following snippet:

       $id= '<yourAccessKeyId>';          // Enter your AccessKey ID. 
       $key= '<yourAccessKeySecret>';     // Enter your AccessKey secret. 
   
       // Set $host to a value that is in the format of https://bucketname.endpointx. Modify the URL based on your actual information. 
       $host = 'https://bucket-name.oss-cn-hangzhou.aliyuncs.com';  
   
       // Set $callbackUrl to the URL of the callback server. Replace the IP address and port number with your actual information. 
       $callbackUrl = 'http://192.0.2.11:8080/aliyun-oss-appserver-php/php/callback.php';
   
       $dir = 'user-dir-prefix/';          // Specify the prefix for the name of the object you want to upload. 

   Parameter	Required	Example	Description
   id	Yes	LTAn*********************	The AccessKey ID and AccessKey secret of an Alibaba Cloud account or of a Resource Access Management (RAM) user. For more information, see Obtain an AccessKey pair.
   key	Yes	zbnK**************************
   host	Yes	https://bucket-name.oss-cn-hangzhou.aliyuncs.com	The access address of the application server, and the format is https://BucketName.Endpoint. For more information about endpoints, see Regions and endpoints.
   callbackUrl	Yes	http://192.0.2.11:8080/aliyun-oss-appserver-php/php/callback.php	The URL of the callback server which is used to communicate between the application server and OSS. After an object is uploaded, OSS sends the object upload information to the application server by using this URL.
   dir	No	exampledir/	The prefix of the object uploaded to OSS. Configure this parameter based on your requirements. If you do not need to configure the prefix of the objects uploaded to OSS, leave the parameter empty.

Step 3: Configure the client

In the /var/www/html/aliyun-oss-appserver-php directory of the application server, modify the upload.js file.

For the application server source code in PHP, you do not need to modify the upload.js file because relative paths can also properly function. If modification is required, find the serverUrl ='./php/get.php' snippet. Then, change severUrl to the address where the application server is deployed to communicate between the browser and the application server. In this example, change severUrl to serverUrl ='http://192.0.2.11:8080/aliyun-oss-appserver-php/php/get.php'.

Step 4: Modify CORS configurations

When you use form upload to upload data from the client to OSS, the client sends a request that contains the Origin header to OSS from the browser. Then, OSS verifies the request that contains the Origin header against the cross-origin resource sharing (CORS) rules that you configure for a specific bucket. Therefore, you must configure CORS rules for the bucket before you can use the POST method to upload data to the bucket.

1. Log on to the OSS console.
2. In the left-side navigation pane, click Buckets. On the Buckets page, click the name of the desired bucket.
3. In the left-side navigation tree, choose Content Security > Cross-Origin Resource Sharing (CORS).
4. On the Cross-Origin Resource Sharing (CORS) page, click Create Rule and configure the parameters as shown in the following figure.
   Important To ensure data security, we recommend that you specify the actual domain name from which you want OSS to allow requests in the Sources field. For more information, see Configure CORS.

Step 5: Send an upload callback request

1. Open the web browser on the PC, and enter http://192.0.2.11:8080/aliyun-oss-appserver-php/index.html.
   Important The index.html file may be incompatible with Internet Explorer 10 or earlier. If you encounter any problems when you use Internet Explorer 10 or earlier, you must perform debugging.
2. Click Select File. Select the file of a specified type. Then, click Upload.
   After the object is uploaded, the content returned by the callback server is displayed.

Core code analysis for the application server

The source code of the application server is used to implement signature-based upload and upload callback.

• Signature-based upload

  During signature-based upload, the application server responds to the GET message sent from the client. The code file is aliyun-oss-appserver-php/php/get.php. The following code provides an example on the snippet:

  
  $response = array();
  $response['accessid'] = $id;
  $response['host'] = $host;
  $response['policy'] = $base64_policy;
  $response['signature'] = $signature;
  $response['expire'] = $end;
  $response['callback'] = $base64_callback_body;
  $response['dir'] = $dir; 

• Upload callback

  During upload callback, the application server responds to the POST message that is sent from OSS. The code file is aliyun-oss-appserver-php/php/callback.php.

  The following code provides an example on the snippet:

  // 6.Verify the signature.
  $ok = openssl_verify($authStr, $authorization, $pubKey, OPENSSL_ALGO_MD5);
  if ($ok == 1)
  {
      header("Content-Type: application/json");
      $data = array("Status"=>"Ok");
      echo json_encode($data);
  }

  For more information, see Callback.