Direct calls from a web frontend

Interaction flow

Prerequisites

Obtain an STS temporary credential:

1. Grant permissions:

   Before obtaining an STS temporary credential, the caller, such as a Resource Access Management (RAM) user or RAM role, must have the permissions to call STS operations. You can grant these permissions by creating a RAM access policy. For more information about the setup steps and access policies, see Use temporary access credentials provided by STS to access OSS. You can configure more fine-grained authorization policies as needed to prevent security threats that are caused by excessive permissions. For more information about how to configure fine-grained authorization policies, see Custom policies for Visual Intelligence API.

   Important

   To complete the following steps, the caller, such as a RAM user or RAM role, must be granted the AliyunSTSAssumeRoleAccess permission, which is required to call the AssumeRole operation of STS, and the AliyunVIAPIFullAccess permission. For this example, the AliyunVIAPIFullAccess permission is used to manage the Visual Intelligence API. In a production environment, we strongly recommend that you configure more fine-grained authorization policies as needed to prevent security threats that are caused by excessive permissions. For more information about how to configure fine-grained authorization policies, see Custom policies for Visual Intelligence API.

2. Call the AssumeRole operation:

   Use an authorized RAM user or RAM role to call the AssumeRole operation and fill in the required parameters as described in the API documentation. For more information about the operation and its usage, see the AssumeRole documentation.

3. Use the STS token:

   After you successfully call the AssumeRole operation, you will receive an STS token that contains an AccessKeyId, an AccessKeySecret, and a SecurityToken, as shown in the following code. When you call other Alibaba Cloud service operations, you must replace <ALIBABA_CLOUD_ACCESS_KEY_ID>, <ALIBABA_CLOUD_ACCESS_KEY_SECRET>, and <ALIBABA_CLOUD_SECURITY_TOKEN> in the code with the temporary AccessKeyId, AccessKeySecret, and SecurityToken from the STS token data.

{
  "RequestId": "429D9967-C809-5A30-B65E-9B742CF*****",
  "AssumedRoleUser": {
    "Arn": "acs:ram::175805416243****:role/STStokenTestRole/STSsessionName",
    "AssumedRoleId": "39779315882322****:STSsessionName"
  },
  "Credentials": {
    "SecurityToken": "exampleToken",
    "AccessKeyId": "STS.exampleAccessKeyID",
    "AccessKeySecret": "exampleAccessKeySecret",
    "Expiration": "2024-06-12T03:21:29Z"
  }
}

Step 1: Configure basic parameters

The following code segment is from the js/script.js file in the WebDemo and calls the RecognizeBankCard service of Alibaba Cloud.

1. Prepare the parameters for the API call:

   • AccessKeyId, AccessKeySecret, and SecurityToken: First, replace the <ALIBABA_CLOUD_ACCESS_KEY_ID>, <ALIBABA_CLOUD_ACCESS_KEY_SECRET>, and <ALIBABA_CLOUD_SECURITY_TOKEN> variables with the temporary AccessKey pair and security token from the STS token that you obtained in the Prerequisites section.

   • Endpoint: The API endpoint. In this example, it is ocr.cn-shanghai.aliyuncs.com.

   • Action: The name of the API operation. In this example, it is RecognizeBankCard, which indicates that the bank card recognition service is being called.

   • API Version: The API version. In this example, it is 2019-12-30.

   • Make sure to grant permissions to the RAM user or role to ensure that it has the permissions to call the Visual Intelligence API operations. For more information, see Grant permissions in the Prerequisites section.

2. Construct the request parameter object:

   The request_ object contains the system parameters required for the API call, such as the signature method, timestamp, and format, and the business parameters. In this example, the business parameter is the URL of the bank card image to be recognized, which is specified by ImageURL.

3. Initiate the API request:

   Call the encapsulated callApiRequest function. Pass the prepared request parameters, the HTTP request method, the API endpoint, the AccessKey secret of the STS token, and a callback function. The callback function is used to process the API response.

For example, if you want to use the common segmentation feature, you can find in the common segmentation API documentation that this feature belongs to the image segmentation category (imageseg20191230) and the operation name is SegmentCommonImage. In this case, you can change the endpoint to imageseg.cn-shanghai.aliyuncs.com and the Action to SegmentCommonImage. Keep the API_VERSION as 2019-12-30 and the request_["ImageURL"] parameter name as ImageURL. When you receive the result, note that the ImageURL parameter is not a bank card number, but the URL of the segmented image.

/**
 * ========================================================================================================================
 * This is an example for RecognizeBankCard.
 * In the code, replace <ALIBABA_CLOUD_ACCESS_KEY_ID>, <ALIBABA_CLOUD_ACCESS_KEY_SECRET>, and <ALIBABA_CLOUD_SECURITY_TOKEN> with the temporary AccessKeyId, AccessKeySecret, and SecurityToken from the Alibaba Cloud STS token data.
 * For more information about how to recognize bank cards, see https://help.aliyun.com/document_detail/151893.html
 * ========================================================================================================================
 */
function callRecognizeBankCard(callback) {
  /**
    Replace <ALIBABA_CLOUD_ACCESS_KEY_ID>, <ALIBABA_CLOUD_ACCESS_KEY_SECRET>, and <ALIBABA_CLOUD_SECURITY_TOKEN> with the temporary AccessKeyId, AccessKeySecret, and SecurityToken from the STS token data.
    You must grant the AliyunVIAPIFullAccess permission to the RAM user or RAM role. For more information, see https://help.aliyun.com/document_detail/145025.html
   */
  //AccessKeyID
  const accessKeyId = "<ALIBABA_CLOUD_ACCESS_KEY_ID>";
  //AccessKeySecret
  const accessKeySecret = "<ALIBABA_CLOUD_ACCESS_KEY_SECRET>";
  //SecurityToken
  const securityToken = "<ALIBABA_CLOUD_SECURITY_TOKEN>";


  // The endpoint is the API endpoint, which is related to the category. For more information about API endpoints for different categories, see https://help.aliyun.com/document_detail/143103.html
  const endpoint = "ocr.cn-shanghai.aliyuncs.com";
  // The Action is the name of the operation. For more information about the Action parameter for a specific algorithm, see its API documentation. This example uses RecognizeBankCard: https://help.aliyun.com/document_detail/151893.html
  const Action = "RecognizeBankCard";
  // We recommend that you set API_HTTP_METHOD to POST.
  const API_HTTP_METHOD = "POST";
  // API_VERSION is the API version, which is related to the category. For more information about API versions for different categories, see https://help.aliyun.com/document_detail/464194.html
  const API_VERSION = "2019-12-30";

  const request_ = {};
  //System parameters
  request_["SignatureMethod"] = "HMAC-SHA1";
  request_["SignatureNonce"] = signNRandom();
  request_["AccessKeyId"] = accessKeyId;
  request_["SignatureVersion"] = "1.0";
  request_["Timestamp"] = getTimestamp();
  request_["Format"] = "JSON";
  request_["RegionId"] = "cn-shanghai";
  request_["Version"] = API_VERSION;
  request_["Action"] = Action;
  request_["SecurityToken"] = securityToken;

  // Business parameters. Modify them based on the API documentation for the specific AI capability.
  request_["ImageURL"] = "http://viapi-test.oss-cn-shanghai.aliyuncs.com/viapi-3.0domepic/ocr/RecognizeBankCard/yhk3.jpg";
  
  callApiRequest(request_, API_HTTP_METHOD, endpoint, accessKeySecret, callback);
}

Step 2: Call the server-side operation and calculate the signature

The following code segment implements the signature calculation and request sending process for Visual Intelligence API operations. Signing is a common security measure for cloud services. It ensures that requests sent to the cloud service are not tampered with and are initiated by legitimate users with the corresponding credentials. For more information about the logic, see Request signing.

The following section describes the meaning and steps of this code segment:

Signature steps:

1. Generate a random number (Nonce): The signNRandom function generates a random number. This makes each request unique to prevent replay attacks.

2. Get the timestamp: The getTimestamp function generates a timestamp that complies with the ISO 8601 standard. It indicates the time the request was sent.

3. Sort the parameters: The ksort function sorts all request parameters in lexicographic order. The signature algorithm requires that the parameters are arranged in a specific order.

4. Calculate the signature: The createHmac and getSignature functions are used together. They use the provided AccessKey secret and the canonical request string generated above to calculate the request signature using the HMAC-SHA1 algorithm.

5. Construct the request URL: The generateUrl function constructs the complete request URL. It includes all the sorted request parameters and the calculated signature.

Request sending steps:

1. Send the request: The callApiRequest function uses the http.post function to send an HTTP POST request with the URL constructed above.

2. Process the response: When the server responds to the request, the callback function is called to process the returned result, such as converting the JSON response text into an object.

/**
 * ========================================================================================================================
 * The following code is only for calculating the signature to call the server-side operation. For more information about the logic, see the documentation: https://help.aliyun.com/document_detail/144904.html
 * ========================================================================================================================
 */

// A random number for SignatureNonce
function signNRandom() {
  const Rand = Math.random()
  const mineId = Math.round(Rand * 100000000000000)
  return mineId;
};
//Timestamp
function getTimestamp() {
  let date = new Date();
  let YYYY = pad2(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`;
};
// Pad with a leading zero
function pad2(num) {
  if (num < 10) {
    return '0' + num;
  }
  return '' + num;
};
// Sort
function ksort(params) {
  let keys = Object.keys(params).sort();
  let newParams = {};
  keys.forEach((key) => {
    newParams[key] = params[key];
  });
  return newParams;
};
// Encrypt with HmacSHA1 and then encode with Base64
function createHmac(stringToSign, key) {
  const CrypStringToSign = CryptoJS.HmacSHA1(stringToSign, key);
  const base64 = CryptoJS.enc.Base64.stringify(CrypStringToSign);
  return base64;
};
//Encode
function encode(str) {
  var result = encodeURIComponent(str);
  return result.replace(/!/g, '%21')
    .replace(/'/g, '%27')
    .replace(/\(/g, '%28')
    .replace(/\)/g, '%29')
    .replace(/\*/g, '%2A');
};
function sha1(stringToSign, key) {
  return createHmac(stringToSign, key);
};
function getSignature(signedParams, method, secret) {
  var stringToSign = `${method}&${encode('/')}&${encode(signedParams)}`;
  const key = secret + "&";
  return sha1(stringToSign, key);
};
// Concatenate parameters with &
function objToParam(param) {
  if (Object.prototype.toString.call(param) !== '[object Object]') {
    return '';
  }
  let queryParam = '';
  for (let key in param) {
    if (param.hasOwnProperty(key)) {
      let value = param[key];
      queryParam += toQueryPair(key, value);
    }
  }
  return queryParam;
};
function toQueryPair(key, value) {
  if (typeof value == 'undefined') {
    return `&${key}=`;
  }
  return `&${encodeURIComponent(key)}=${encodeURIComponent(value)}`;
};
function generateUrl(request, httpMethod, endpoint, accessKeySecret) {
  //Sort the keys in the parameters
  const sortParams = ksort(request);
  //Assemble the parameters
  const sortQueryStringTmp = objToParam(sortParams);
  const sortedQueryString = sortQueryStringTmp.substring(1);// Remove the extra & at the beginning
  //Construct the string to be signed
  const Signature = getSignature(sortedQueryString, httpMethod, accessKeySecret)
  //The signature must also be specially URL-encoded
  request["Signature"] = encodeURIComponent(Signature);

  //Generate the final valid request URL
  const finalUrl = "https://" + endpoint + "/?Signature=" + encodeURIComponent(Signature) + sortQueryStringTmp;
  return finalUrl;
}

Step 3: Encapsulate the request and send data to the specified Visual Intelligence API operation

The following code segment is an example implementation in a web frontend environment for encapsulating HTTP requests and sending data to a specified API. It provides an encapsulated method for calling the API from the web frontend, which simplifies the handling of asynchronous HTTP requests by defining request parameters and setting a callback method. It also provides basic error handling, such as for timeouts, and simplifies the process of sending JSON data using the POST method.

The following section describes the meaning and steps of this code segment:

1. Build the HTTP library: Create an http object that contains all HTTP request methods.

2. Implement the basic request method: Use the http.request function to support basic HTTP requests using XMLHttpRequest.

3. Encapsulate specific request types: Provide the http.post method to simplify the process of sending POST requests in JSON format.

4. Initiate the request and process the result: Use the callApiRequest function to show how to use the encapsulated HTTP library to send requests and process responses.

/**
 * ========================================================================================================================
 * Encapsulate the HTTP request
 * ========================================================================================================================
 */
var http = {};
http.request = function (option, callback) {
  var url = option.url;
  var method = option.method;
  var data = option.data;
  var timeout = option.timeout || 0;
  //Create an XMLHttpRequest object
  var xhr = new XMLHttpRequest();
  (timeout > 0) && (xhr.timeout = timeout);
  //Use the open method to set up the interaction with the server
  xhr.open(method, url, true);
  if (typeof data === 'object') {
    try {
      data = JSON.stringify(data);
    } catch (e) { }
  }
  //Send the request
  xhr.send(data);
  //If the request is complete and the response is ready, get the response data
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
      var result = xhr.responseText;
      try { result = JSON.parse(xhr.responseText); } catch (e) { }
      callback && callback(null, result);
    }
  }.bind(this);
  //Handle timeout
  xhr.ontimeout = function () {
    callback && callback('timeout');
    console.log('error', 'Connection timed out');
  };
};
// POST request
http.post = function (option, callback) {
  option.method = 'post';
  option.contentType = 'application/json;charset=UTF-8'
  this.request(option, callback);
};
//Request data
callApiRequest = (request_, API_HTTP_METHOD, endpoint, accessKeySecret, callback) => {
  const url = generateUrl(request_, API_HTTP_METHOD, endpoint, accessKeySecret);
  http.post({ url: url, timeout: 5000 }, function (err, result) {
    // Get the result
    console.log(result);
    callback && callback(result);
  });
}

Step 4: Trigger the button on the page to call the Visual Intelligence API operation

You can trigger the button on the page to call the API, in this case, the RecognizeBankCard operation. The following section describes the meaning and steps of this code segment:

1. The user clicks the button: This triggers the callRecognizeBankCard function.

2. Perform the bank card recognition operation: The callRecognizeBankCard function sends a request to the backend to recognize the bank card information.

3. Process the recognition result:

   • Error handling: Display different error messages based on the error code (Code).

   • Success handling: After the bank card information is successfully recognized, display the bank card number (CardNumber).

  <button onclick="callRecognizeBankCard(function(result) {
    if(result.Code) {
      // Handle the error
      if (result.Code == 'InvalidAccessKeyId.NotFound') {
          window.alert('Request error. Check whether you have correctly modified YOUR_ACCESS_KEY_ID and YOUR_ACCESS_KEY_SECRET in your code.');
      } else if(result.Code == 'InvalidApi.NotPurchase') {
          window.alert('Request error. Your account has not activated the corresponding category of the Visual Intelligence API. To activate it, see https://help.aliyun.com/document_detail/465341.html');
      } else if(result.Code == 'Unauthorized') {
          window.alert('Request error. Your RAM user has not been granted the AliyunVIAPIFullAccess permission. For more information, see https://help.aliyun.com/document_detail/145025.html');
      } else if(result.Code == 'InvalidAction.NotFound') {
          window.alert('Request error. Check whether the API operation you are calling matches the category and the endpoint. For more information about the relationships between API operations and categories, see https://help.aliyun.com/document_detail/465341.html. For more information about the relationships between categories and endpoints, see https://help.aliyun.com/document_detail/143103.html');
      } else {
          window.alert(result.Message);
      }
    } else {
      console.log(result.Data);
      // Get the bank card number. This is just an example. Obtain the response parameters you need based on the documentation.
      window.alert('Bank Card Number: ' + result.Data.CardNumber);
    }
  })">Start Call</button>

Interaction flow

Prerequisites

Obtain an STS temporary credential:

1. Grant permissions:

   Before obtaining an STS temporary credential, the caller, such as a RAM user or RAM role, must have the permissions to call STS operations. You can grant these permissions by creating a RAM access policy. For more information about the setup steps, see Use temporary access credentials provided by STS to access OSS. You can configure more fine-grained authorization policies as needed to prevent security threats that are caused by excessive permissions. For more information about how to configure fine-grained authorization policies, see Custom policies for Visual Intelligence API.

   Important

   To complete the following steps, the caller, such as a RAM user or RAM role, must be granted the AliyunSTSAssumeRoleAccess permission, which is required to call the AssumeRole operation of STS, the permission for a RAM role to upload OSS files, and the AliyunVIAPIFullAccess permission. For this example, the AliyunVIAPIFullAccess permission is used to manage the Visual Intelligence API. In a production environment, we strongly recommend that you configure more fine-grained authorization policies as needed to prevent security threats that are caused by excessive permissions. For more information about how to configure fine-grained authorization policies, see Custom policies for Visual Intelligence API.

2. Call the AssumeRole operation:

   Use an authorized RAM user or RAM role to call the AssumeRole operation and fill in the required parameters as described in the API documentation. For more information about the operation and its usage, see the AssumeRole documentation.

3. Use the STS token:

   After you successfully call the AssumeRole operation, you will receive an STS token that contains an AccessKeyId, an AccessKeySecret, and a SecurityToken, as shown in the following code. When you call other Alibaba Cloud service operations, you must replace <ALIBABA_CLOUD_ACCESS_KEY_ID>, <ALIBABA_CLOUD_ACCESS_KEY_SECRET>, and <ALIBABA_CLOUD_SECURITY_TOKEN> in the code with the temporary AccessKeyId, AccessKeySecret, and SecurityToken from the STS token data.

{
  "RequestId": "429D9967-C809-5A30-B65E-9B742CF*****",
  "AssumedRoleUser": {
    "Arn": "acs:ram::175805416243****:role/STStokenTestRole/STSsessionName",
    "AssumedRoleId": "39779315882322****:STSsessionName"
  },
  "Credentials": {
    "SecurityToken": "exampleToken",
    "AccessKeyId": "STS.exampleAccessKeyID",
    "AccessKeySecret": "exampleAccessKeySecret",
    "Expiration": "2024-06-12T03:21:29Z"
  }
}

Step 1: Configure basic parameters

The following code segment is from the js/script.js file in the WebDemo and calls the RecognizeBankCard service of Alibaba Cloud. You must replace <ALIBABA_CLOUD_ACCESS_KEY_ID>, <ALIBABA_CLOUD_ACCESS_KEY_SECRET>, and <ALIBABA_CLOUD_SECURITY_TOKEN> in the code with the temporary AccessKeyId, AccessKeySecret, and SecurityToken from the STS token data.

/**
 * For more information about how to obtain an Alibaba Cloud STS token, see https://help.aliyun.com/zh/oss/developer-reference/use-temporary-access-credentials-provided-by-sts-to-access-oss
 * Replace <ALIBABA_CLOUD_ACCESS_KEY_ID>, <ALIBABA_CLOUD_ACCESS_KEY_SECRET>, and <ALIBABA_CLOUD_SECURITY_TOKEN> with the temporary AccessKeyId, AccessKeySecret, and SecurityToken from the Alibaba Cloud STS token data.
 * You must grant the AliyunVIAPIFullAccess permission to the RAM user or RAM role. For more information, see https://help.aliyun.com/document_detail/145025.html
 */

  //AccessKeyID
  const accessKeyId = "<ALIBABA_CLOUD_ACCESS_KEY_ID>";
  //AccessKeySecret
  const accessKeySecret = "<ALIBABA_CLOUD_ACCESS_KEY_SECRET>";
  //SecurityToken
  const securityToken = "<ALIBABA_CLOUD_SECURITY_TOKEN>";

Step 2: Call the GetOssStsToken operation to obtain a temporary OSS STS token

In the following code segment, the getOssStsToken function is used to obtain an STS token for OSS. This token is used to request temporary access permissions from Alibaba Cloud to upload files to OSS. The uploaded files are stored in the OSS bucket for one day. The request is constructed using the specified endpoint (API endpoint), Action (name of the operation to be performed), and API_VERSION (API version). The result is then returned through the callback function. The callApi function is used to call any API operation on the Alibaba Cloud platform and supports request authentication through signatures. The function accepts the endpoint (API endpoint), action (API operation name), version (API version), optional business parameters params, and a callback function. The function constructs a compliant request object request_, which includes system parameters, such as the signature method, timestamp, and AccessKey ID, and business parameters. The signNRandom function (implementation not provided) generates a unique random value (SignatureNonce) for the signature to prevent replay attacks. The getTimestamp function (implementation not provided) provides the current timestamp. Finally, the function calls the callApiRequest function (implementation not provided) to make the actual API call and returns the result through the callback.

/**
 * ========================================================================================================================
 * Get an OSS STS token. This uses the official Visual Intelligence API OSS bucket for temporary storage. This method is provided only for debugging purposes. The file is stored for one day.
 * For more information about the principle of obtaining an OSS STS token, see the documentation at https://help.aliyun.com/document_detail/155645.html, specifically the "Other languages" section in Method 2.
 * ========================================================================================================================
 */
function getOssStsToken(callback) {
  
  // The endpoint is the API endpoint, which is related to the category. For more information about API endpoints for different categories, see https://help.aliyun.com/document_detail/143103.html
  const endpoint = "viapiutils.cn-shanghai.aliyuncs.com";
  // The Action is the name of the operation. For more information about the Action parameter for a specific algorithm, see its API documentation. This example uses RecognizeBankCard: https://help.aliyun.com/document_detail/151893.html
  const Action = "GetOssStsToken";
  // API_VERSION is the API version, which is related to the category. For more information about API versions for different categories, see https://help.aliyun.com/document_detail/464194.html
  const API_VERSION = "2020-04-01";

  callApi(endpoint, Action, API_VERSION, null, callback);
}

/**
 * ========================================================================================================================
 * Call an API operation using a signature. This method supports any API operation on the platform.
 * Signature documentation: https://help.aliyun.com/document_detail/144904.html
 * ========================================================================================================================
 */
function callApi(endpoint, action, version, params, callback) {

  const API_HTTP_METHOD = "POST";

  const request_ = {};
  //System parameters
  request_["SignatureMethod"] = "HMAC-SHA1";
  request_["SignatureNonce"] = signNRandom();
  request_["AccessKeyId"] = accessKeyId;
  request_["SignatureVersion"] = "1.0";
  request_["Timestamp"] = getTimestamp();
  request_["Format"] = "JSON";
  request_["RegionId"] = "cn-shanghai";
  request_["Version"] = version;
  request_["Action"] = action;
  request_["SecurityToken"] = securityToken;
  // Business parameters. Modify them based on the API documentation for the specific AI capability.
  if(params) {
    for(let key in params) {
      request_[key] = params[key];
    }
  }

  callApiRequest(request_, API_HTTP_METHOD, endpoint, accessKeySecret, callback);
}

Step 3: Use the temporary OSS STS token to upload the file to the official Visual Intelligence API OSS bucket

The following code segment is a JavaScript implementation for uploading a file or URL resource to OSS, specifically to the official temporary storage bucket of the Visual Intelligence API. The uploaded file is valid for one day, which is convenient for debugging the API.

The following section describes the meaning and steps of this code segment:

1. Initialize the OSS client: Use the STS token to initialize the OSS client and specify the OSS region and bucket.

2. Generate the file path: Use the getNonce function to generate a random string as part of the file name to ensure the uniqueness of the upload path.

3. Upload the file: Use the put method of the OSS client to upload the local file or the File object converted from a URL to OSS.

   Note

   • The path for uploading the file to the OSS bucket is accessKeyId/getNonce(6)/fileName.

   • The accessKeyId in the file path is the <ALIBABA_CLOUD_ACCESS_KEY_ID> retrieved in Step 1: Configure basic parameters.

4. Process the response: After the upload is complete, the upload result is returned through a callback function. This typically includes the URL of the newly uploaded file. If an exception occurs during the upload process, an error message is printed.

/**
 * ========================================================================================================================
 * Process a file or URL and upload it to the official Visual Intelligence API OSS bucket for temporary storage. This method is provided only for debugging purposes. The file is stored for one day.
 * ========================================================================================================================
 */
// Use the oss-client-sdk to upload the file
function uploadToTempOss(ossStsToken, filePath, callback) {
  let ossClient = new OSS({
    accessKeyId: ossStsToken.Data.AccessKeyId,
    accessKeySecret: ossStsToken.Data.AccessKeySecret,
    stsToken: ossStsToken.Data.SecurityToken,
    // The region is fixed to oss-cn-shanghai
    region: "oss-cn-shanghai",
    // The bucket is fixed to viapi-customer-temp
    bucket: 'viapi-customer-temp',
  });
  let ins = filePath;
  let fileName = filePath.name;
  // The path of the uploaded file must be in the format of ${accessKeyId}/xxx, where accessKeyId is the <ALIBABA_CLOUD_ACCESS_KEY_ID> obtained in Step 1.
  let objectName = `${accessKeyId}/${getNonce(6)}/${fileName}`;
  putObject(ins);
  async function putObject(data) {
    try {
      // Specify the full path of the object. The full path cannot contain the bucket name.
      // You can upload data to the current bucket or a specified directory in the bucket by customizing the file name (for example, exampleobject.txt) or specifying the full path (for example, exampledir/exampleobject.txt).
      // The data object can be a file object, BLOB data, or an OSS buffer.
      const result = await ossClient.put(
        objectName,
        data
      );
      console.log('result', result);
      callback && callback(result.url);
    } catch (e) {
      console.log(e);
    }
  }
}
// A random UUID, appended to the name of the file after it is uploaded by ossClient.
function getNonce(length) {
  var str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
  var result = '';
  for (var i = length; i > 0; --i)
    result += str[Math.floor(Math.random() * str.length)];
  return result;
}
// Convert any link to a File object. The link must support cross-domain requests. This is to upload the content from the link to the official Visual Intelligence API OSS bucket.
function getImageFileFromUrl(url, imageName) {
  return new Promise((resolve, reject) => {
    var blob = null;
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.responseType = "blob";
    xhr.onload = () => {
      blob = xhr.response;
      let imgFile = new File([blob], imageName);
      resolve(imgFile);
    };
    xhr.onerror = (e) => {
      reject(e)
    };
    xhr.send();
  });
}

Step 4: Use the returned OSS URL to call the Visual Intelligence API operation

The following code segment uses the returned OSS URL to call the Visual Intelligence API operation. The specific steps are the same as those in Scenario 1: The file is in an OSS bucket in the China (Shanghai) region. Each step of the code is encapsulated. For the complete example code, you can download the WebDemo.

1. Prepare the parameters for the API call:

   • Endpoint: The API endpoint. In this example, it is ocr.cn-shanghai.aliyuncs.com.

   • Action: The name of the API operation. In this example, it is RecognizeBankCard, which indicates that the bank card recognition service is being called.

   • API Version: The API version. In this example, it is 2019-12-30.

   • Make sure to grant permissions to the RAM user or role to ensure that it has the permissions to call the Visual Intelligence API operations. For more information, see Grant permissions in the Prerequisites section.

2. Construct the request parameter object:

   The request_ object contains the system parameters required for the API call, such as the signature method, timestamp, and format, and the business parameters. In this example, the business parameter is the URL of the bank card image to be recognized, which is ImageURL.

3. Initiate the API request:

   Call the encapsulated callApi function. Pass the prepared request parameters, the API endpoint, and a callback function. The callback function is used to process the API response.

In the js/script.js file of the WebDemo, the endpoint, Action, and API_VERSION parameters of the callRecognizeBankCard function and the request_["ImageURL"] line represent the business parameters. For example, if you want to use the common segmentation feature, you can find in the common segmentation API documentation that this feature belongs to the image segmentation category (imageseg20191230) and the operation name is SegmentCommonImage. In this case, you can change the endpoint to imageseg.cn-shanghai.aliyuncs.com and the Action to SegmentCommonImage. Keep the API_VERSION as 2019-12-30 and the request_["ImageURL"] parameter name as ImageURL. When you receive the result, note that the ImageURL parameter is not a bank card number, but the URL of the segmented image.

/**
 * ========================================================================================================================
 * This is an example for RecognizeBankCard.
 * For more information about how to recognize bank cards, see https://help.aliyun.com/document_detail/151893.html
 * ========================================================================================================================
 */
function callRecognizeBankCard(imageUrl, callback) {
  // The endpoint is the API endpoint, which is related to the category. For more information about API endpoints for different categories, see https://help.aliyun.com/document_detail/143103.html
  const endpoint = "ocr.cn-shanghai.aliyuncs.com";
  // The Action is the name of the operation. For more information about the Action parameter for a specific algorithm, see its API documentation. This example uses RecognizeBankCard: https://help.aliyun.com/document_detail/151893.html
  const Action = "RecognizeBankCard";
  // API_VERSION is the API version, which is related to the category. For more information about API versions for different categories, see https://help.aliyun.com/document_detail/464194.html
  const API_VERSION = "2019-12-30";

  const params = {};
  // Business parameters. Modify them based on the API documentation for the specific AI capability.
  params["ImageURL"] = imageUrl;

  callApi(endpoint, Action, API_VERSION, params, callback);
}