Intelligent Media Management:Build a web application to directly upload data to OSS

Step 1: Create a RAM user in the RAM console

Create a RAM user and obtain the AccessKey pair of the RAM user. When you create the RAM user, set the Access Mode parameter to OpenAPI Access. The AccessKey pair is used as a long-term access credential for accessing and managing your 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 (includes an AccessKey ID and an AccessKey secret) and paste the pair into a securely stored file.

Step 2: Grant the RAM user the permissions to call the AssumeRole operation in the RAM console

After the RAM user is created, grant the RAM user the permissions to call the AssumeRole operation of STS. This way, the RAM user can assume a RAM role to obtain STS tokens.

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

2. On the Users page, find the RAM user and click Add Permissions in the Actions column.

3. In the Grant Permission panel, select the AliyunSTSAssumeRoleAccess system 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 STS tokens and initiate requests to IMM.

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. On the Roles page, click Create Role. In the Select Role Type step of the Create Role wizard, set the Select Trusted Entity parameter to Alibaba Cloud Account and click Next.

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

4. Click OK. After the RAM role is created, click Close.

5. On the Roles page, enter the RAM role name, such as imm-web-upload, in the search box. Then, 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 custom policies in the RAM console

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

{
    "Version": "1",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": "imm:*",
            "Resource": "acs:imm:cn-hangzhou:1413397765616316:project/<ProjectName>"
        }
    ]
}

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

Attach the custom policies 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 policy type drop-down list and select the preceding custom policies.

4. Click Grant permissions.

Step 6: Obtain STS tokens from your application server

Open your web application and integrate STS SDK into your application server to implement the /get_sts_token operation. For more information, see STS SDK overview. When you call the /get_sts_token operation by using the HTTP GET method, the system generates and returns an STS token.

Step 7: Use an STS token in your browser to initiate a request to IMM

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 to listen for data uploads. When you upload data to the bucket, call the /get_sts_token operation to obtain an STS token and use the STS token to upload the data. When you send a request from a browser to IMM, you must encrypt data by using the Hash-based Message Authentication Code (HMAC). In this example, the data encryption feature is implemented by using the HmacSHA1 function from the crypto.js library. This example integrates the DetectImageFaces operation.

The following steps show how to integrate the IMM operation into the frontend of the web application:

1. Press Ctrl+C to stop the web application.

2. Create a frontend project directory.

   mkdir templates

3. Create an HTML file.

   1. Create a file named imm_example.html in the templates directory.

      vim templates/imm_example.html

   2. Add the following HTML code to the HTML file: The following sample code implements the file upload and image face detection features.

      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          <title>imm_example</title>
          <script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.17.0.min.js"></script>
          <script src="https://unpkg.com/crypto-js@4.1.1/crypto-js.js"></script>
          <style>
            .app form div {
              display: flex;
              margin: 12px;
            }
            .app label {
              display: flex;
              width: 100px;
            }
            .app form input {
              width: 200px;
            }
          </style>
        </head>
        <body>
          <div class="app">
            <h2>1. Upload a file to OSS:</h2>
            <form id="oss-upload-form">
              <div>
                <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 id="oss-result"></div>
          </div>
          <div class="app">
            <h2>2. Call the DetectImageFaces operation of IMM:</h2>
            <form id="imm-form">
              <button type="submit">Request</button>
            </form>
          </div>
          <div>
            <h2>3. Show the result:</h2>
            <div id="result"></div>
          </div>
          <script>
            /**
             * Check whether the STS token expires. 
             **/
            function isCredentialsExpired(credentials) {
              if (!credentials) {
                return true;
              }
              const expireDate = new Date(credentials.Expiration);
              const now = new Date();
              // If the remaining validity period of the STS token is less than 1 minute, the STS token is considered expired. 
              return expireDate.getTime() - now.getTime() <= 60000;
            }
      
            let credentials = null;
            let uploadResult = null;
      
            // ############# OSS-UPLOAD #################
            const ossForm = document.querySelector("#oss-upload-form");
            ossForm.addEventListener("submit", async (event) => {
              event.preventDefault();
              // Re-obtain an STS token only when the original one expires. This reduces the number of calls to STS.
              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 an 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: "web-direct-upload",
                // Replace <YOUR_REGION> with the ID of the region in which the OSS bucket is located. Example: oss-cn-hangzhou. 
                region: "oss-cn-hangzhou",
                accessKeyId: credentials.AccessKeyId,
                accessKeySecret: credentials.AccessKeySecret,
                stsToken: credentials.SecurityToken,
              });
      
              const fileInput = document.querySelector("#file");
              const file = fileInput.files[0];
              const result = await client.put("/" + file.name, file);
              if (result) {
                uploadResult = result;
                document.querySelector("#oss-result").textContent = "The upload is successful.";
              }
            });
      
            // ##################################################
      
            // ################# IMM ############################
            function getTimestamp() {
              const pad2 = (number) => {
                return String(number).padStart(2, "0");
              };
              let date = new Date();
              let YYYY = date.getUTCFullYear();
              let MM = pad2(date.getUTCMonth() + 1);
              let DD = pad2(date.getUTCDate());
              let HH = pad2(date.getUTCHours());
              let mm = pad2(date.getUTCMinutes());
              let ss = pad2(date.getUTCSeconds());
              return `${YYYY}-${MM}-${DD}T${HH}:${mm}:${ss}Z`;
            }
            function generateSecureNonce(length = 32) {
              const array = new Uint8Array(length);
              window.crypto.getRandomValues(array);
              return Array.from(array, (byte) => byte.toString(36))
                .join("")
                .substring(0, length);
            }
      
            function normalize(params) {
              const list = [];
              const flated = params;
              const keys = Object.keys(flated).sort();
              for (let i = 0; i < keys.length; i++) {
                const key = keys[i];
                const value = flated[key];
                list.push([encode(key), encode(value)]);
              }
              return list;
            }
            function canonicalize(normalized) {
              const fields = [];
              for (let i = 0; i < normalized.length; i++) {
                const [key, value] = normalized[i];
                fields.push(key + "=" + value);
              }
              return fields.join("&");
            }
            function encode(str) {
              const result = encodeURIComponent(str);
              return result
                .replace(/!/g, "%21")
                .replace(/'/g, "%27")
                .replace(/\(/g, "%28")
                .replace(/\)/g, "%29")
                .replace(/\*/g, "%2A");
            }
            async function sha1(data, key = null) {
              const keyData = CryptoJS.enc.Utf8.parse(key);
              // Use the HmacSHA1 method to calculate the HMAC.
              const hmac = CryptoJS.HmacSHA1(data, keyData);
              // Convert the HMAC (CryptoJS object) to a Base64-encoded string.
              const base64Hmac = hmac.toString(CryptoJS.enc.Base64);
              return base64Hmac;
            }
      
            async function getRPCSignature(signedParams, method, secret) {
              const normalized = normalize(signedParams);
              const canonicalized = canonicalize(normalized);
              const stringToSign = `${method}&${encode("/")}&${encode(
                canonicalized
              )}`;
              const key = secret + "&";
              return await sha1(stringToSign, key);
            }
      
            async function getStsToken() {
              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 an STS token: ${response.status} ${response.statusText}`
                );
              }
              return await response.json();
            }
      
            // let credentials = null;
            async function getParams({ Action, ProjectName, SourceURI }) {
              if (isCredentialsExpired(credentials)) {
                credentials = await getStsToken();
              }
              const params = {
                AccessKeyId: credentials.AccessKeyId,
                Format: "JSON",
                Action,
                ProjectName,
                Timestamp: getTimestamp(),
                SecureTransport: true,
                SignatureMethod: "HMAC-SHA1",
                SignatureNonce: generateSecureNonce(),
                SignatureVersion: "1.0",
                SourceURI,
                Version: "2020-09-30",
                SecurityToken: credentials.SecurityToken,
              };
              params.Signature = await getRPCSignature(
                params,
                "POST",
                credentials.AccessKeySecret
              );
              return params;
            }
            async function detect(requestParams) {
              const params = await getParams(requestParams);
              const url = `${requestParams.EndPoint}?${new URLSearchParams(
                params
              ).toString()}`;
              const response = await fetch(url, {
                method: "POST",
                headers: {
                  "Content-Type": "application/json",
                },
              });
              if (!response.ok) {
                throw new Error(
                  `The operation failed: ${response.status} ${response.statusText}`
                );
              }
              return await response.json();
            }
      
            const immForm = document.querySelector("#imm-form");
            immForm.addEventListener("submit", (e) => {
              e.preventDefault();
      
              detect({
                // Specify the IMM operation.
                Action: "DetectImageFaces",
                // Replace <YOUR_PROJECT_NAME> with the IMM project name.
                ProjectName: "web-direct-project",
                //Replace <YOUR_OSS_FILE_PATH> with the path to the object in the bucket: Example: oss://imm-example-cn-hangzhou/test.jpg.
                SourceURI: `oss://web-direct-upload/${uploadResult.name}`,
                // Replace <YOUR_END_POINT> with the endpoint of IMM. Example: https://imm.cn-beijing.aliyuncs.com.
                EndPoint: "https://imm.cn-hangzhou.aliyuncs.com",
              })
                .then((res) => {
                  // console.log(res);
                  document.querySelector("#result").textContent = JSON.stringify(res);
                })
                .catch((err) => {
                  document.querySelector("#result").textContent = err;
                });
            });
          </script>
        </body>
      </html>
      
      

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. Visit http://<Public IP address of the ECS instance>/imm in your browser. On the web page, upload the image from which you want to detect face information.