Object Storage Service:Securely and directly upload data from a client to OSS

Step 1: Create a RAM user in the RAM console

Create a RAM user for which OpenAPI access is enabled and obtain the AccessKey pair of the RAM user. The AccessKey pair is long-term access credentials that are required to access and manage the application server.

1. Log on to the RAM console by using an Alibaba Cloud account or as an account administrator.

2. In the left-side navigation pane, choose Identities > Users.

3. On the Users page, click Create User.

4. Configure the Logon Name and Display Name parameters.

5. In the Access Mode section, select OpenAPI Access and click OK.

6. Click Copy in the Actions section to copy the AccessKey pair and paste the AccessKey pair into a securely stored file.

Step 2: Authorize the RAM user to call the AssumeRole operation

Grant the RAM user the permissions to call the AssumeRole operation. This way, the RAM user can obtain temporary access credentials by assuming a RAM role.

1. In the left-side navigation pane, choose Identities > Users.

2. On the Users page, find the RAM user to whom you want to grant permissions and click Add Permissions in the Actions column.

3. In the Policy section of the Grant Permission panel, select the AliyunSTSAssumeRoleAccess policy.

   Note

   The AliyunSTSAssumeRoleAccess policy allows a RAM user to call the AssumeRole operation. The permissions of the policy are independent of the permissions required for the RAM user to obtain temporary access credentials from STS and initiate requests to OSS.

4. Click Grant permissions.

Step 3: Create a RAM role in the RAM console

Create a RAM role for the Alibaba Cloud account and obtain the Alibaba Cloud Resource Name (ARN) of the RAM role. The RAM role is assumed by the RAM user later.

1. In the left-side navigation pane, choose Identities > Roles.

2. Click Create Role. In the Create Role wizard, set Select Trusted Entity to Alibaba Cloud Account and click Next.

3. In the Configure Role step, enter a name in the RAM Role Name field and set Select Trusted Alibaba Cloud Account to Current Alibaba Cloud Account.

4. Click OK. After you create the role, click Close.

5. On the Roles page, enter the role name in the search box. Example: oss-web-upload. Click the name of the role.

6. In the Basic Information section, click Copy next to the ARN field to record the ARN of the RAM role.

Step 4: Create a custom policy in the RAM console

Create a custom policy that allows the RAM role to call only the specified API operation on the bucket.

1. In the left-side navigation pane, choose Permission > Policies.

2. On the Policies page, click Create Policy.

3. On the Create Policy page, click JSON. Copy the following sample script and paste it into the code editor. Replace <BucketName> with the name of the bucket that you created.

   Important

   The following sample script is provided only for reference. You must configure fine-grained RAM policies based on your requirements to avoid granting excessive permissions to users. For more information about how to configure fine-grained policies, see Custom policies for OSS.

   {
     "Version": "1",
     "Statement": [
       {
         "Effect": "Allow",
         "Action": "oss:PutObject",
         "Resource": "acs:oss:*:*:<BucketName>/uploads/*"
       }
     ]
   }

4. Click Next to edit policy information.

5. In the Basic Information section, specify a policy name and click OK.

Step 5: Attach the custom policy to the RAM role in the RAM console

Attach the custom policy to the RAM role. This way, the RAM role can provide the required permissions when the RAM role is assumed.

1. In the left-side navigation pane, choose Identities > Roles.

2. On the Roles page, find the RAM role and click Grant Permission in the Actions column.

3. In the Policy section of the Grant Permission panel, select Custom Policy from the drop-down list and select the custom policy.

4. Click Grant permissions.

Step 6: Obtain temporary access credentials from the application server

Integrate STS SDK into the application server to obtain the /get_sts_token operation to obtain temporary access credentials from STS. When the /get_sts_token operation is called by using the HTTP GET method, temporary access credentials are created and returned to the requester.

Step 7: Use the temporary access credentials in the browser to upload a file to OSS

After you configure the /get_sts_token operation on the application server, import OSS SDK for JavaScript on the frontend page of the web application by using Alibaba Cloud CDN. When you upload data to the bucket, call the /get_sts_token operation to obtain temporary access credentials from STS and use the temporary access credentials to upload the data.

The following steps describe how to integrate OSS SDK for JavaScript into the frontend code of the web application on the ECS instance:

1. Press Ctrl+C to stop the application.

2. Create a frontend project file. Sample command:

   mkdir templates

3. Create an HTML file.

   1. Create an index.html file in the templates directory.

      vim templates/index.html

   2. Write the following HTML code to the HTML file:

      <!DOCTYPE html>
      <html lang="zh-CN">
        <head>
          <meta charset="UTF-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          <title>Upload an object to OSS</title>
          <script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.17.0.min.js"></script>
        </head>
        <body>
          <div class="container">
            <form>
              <div class="mb-3">
                <label for="file" class="form-label">Select File</label>
                <input
                  type="file"
                  class="form-control"
                  id="file"
                  name="file"
                  required
                />
              </div>
              <button type="submit" class="btn btn-primary">Upload</button>
            </form>
          </div>
          <script type="text/javascript">
            let credentials = null;
            const form = document.querySelector("form");
            form.addEventListener("submit", async (event) => {
              event.preventDefault();
              // Re-obtain the temporary access credentials when they expire. This reduces the number of STS calls.
              if (isCredentialsExpired(credentials)) {
                const response = await fetch("/get_sts_token", {
                  method: "GET",
                });
                if (!response.ok) {
                  // Handle the errors based on the HTTP status codes.
                  throw new Error(
                    `Failed to obtain STS token: ${response. Status} ${response.statusText}`
                  );
                }
                credentials = await response.json();
              }
              const client = new OSS({
                // Replace <YOUR_BUCKET> with the name of the OSS bucket. 
                bucket: "<YOUR_BUCKET>",
                // Replace <YOUR_REGION> with the ID of the region in which the OSS bucket is located. Example: oss-cn-hangzhou. 
                region: "<YOUR_REGION>",
                accessKeyId: credentials.AccessKeyId,
                accessKeySecret: credentials.AccessKeySecret,
                stsToken: credentials.SecurityToken,
              });
      
              const fileInput = document.querySelector("#file");
              const file = fileInput.files[0];
              const result = await client.put('uploads/'+file.name, file);
              console.log(result);
            });
      
            /**
             * Check whether the temporary access credentials expire. 
             **/
            function isCredentialsExpired(credentials) {
              if (!credentials) {
                return true;
              }
              const expireDate = new Date(credentials.Expiration);
              const now = new Date();
              // If the remaining validity period of the temporary access credentials is less than 1 minute, the temporary access credentials are considered expired. 
              return expireDate.getTime() - now.getTime() <= 60000;
            }
          </script>
        </body>
      </html>

   3. Replace <YOUR_BUCKET and <YOUR_REGION> in the code with the name of the bucket that you created and the ID of the region in which the bucket is located. For more information about region IDs, see Regions and endpoints.

4. Start the application by using the AccessKey pair that you obtained in Step 1.

   ALIBABA_CLOUD_ACCESS_KEY_ID=<YOUR_AK_ID> ALIBABA_CLOUD_ACCESS_KEY_SECRET=<YOUR_AK_SECRET> python3 main.py

5. Open http://<ECS-public-IP-address> in the address bar of the browser. On the web page, upload a file.